Twig: Include external Code from an SVG file

问题

Is it possible to inlcude code from a svg file directly into a twig template file?

Something like:

{% include 'my.svg' %}

that will result in:

<svg viewbox=".... />

回答1:

One way of doing this:

{{ source('my.svg') }}

Read more here: https://www.theodo.fr/blog/2017/01/integrating-and-interacting-with-svg-image-files-using-twig/

回答2:

Had a similar issue, ended up renaming my svgs to be .twig files.

{% include 'my.svg.twig' %}

回答3:

You can do in a Drupal8 theme via setting a new variable:

function theme_preprocess_page(&$variables) {
  $svg = file_get_contents(drupal_get_path('theme', 'socialbase') . '/images/icons.svg');
  $variables['svg_sprite'] = t('svg', array('svg' => $svg));
}

In your twig file you can print it with:

{{ svg_sprite }}

回答4:

For me, it worked:

{% include '/images/my.svg' %}

Just a quick update if you are using Drupal 8 because the code in the previous answer didn't work for me. This is how I did it:

function theme_preprocess_page(&$variables) {
  $svg = file_get_contents(drupal_get_path('theme', 'theme_name') . '/images/my.svg');
  $variables['some_svg'] = $svg));
}

And in the twig file I outputed it like this:

{{ some_svg|raw }}

回答5:

In case of theme it's good option to use {{ directory }} variable that holds path to theme.

{{ source(directory ~ '/images/my.svg') }}

回答6:

The twig function source() works fine in Drupal. I am not sure if it's better to use source() or include, but the Symfony docs recommend using the include() function rather than the directive. https://twig.symfony.com/doc/3.x/tags/include.html

I also find it helps to add the theme namespace, which tells Twig to look in the templates directory.

Assuming:

template file is themes/custom/theme_name/templates/some-template.html.twig
svg file is themes/custom/theme_name/templates/svg/sprite.svg

  {{ source('@theme_name/svg/sprite.svg') }}
{# or #}
  {% include '@theme_name/svg/sprite.html.twig' %}
{# or #}
  {{ include('@theme_name/svg/sprite.html.twig') }}

This should also work for module templates as well as theme templates.

I would think there is a performance benefit to using source() since the contents aren't parsed, but if you wanted a dynamic SVG, you should probably go the include() route.

来源：https://stackoverflow.com/questions/38261299/twig-include-external-code-from-an-svg-file

标签

svg

twig

inline

templating