Twig: Include external Code from an SVG file

Question

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=".... />

Solution 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/

Solution 2

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

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

Solution 3

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

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

Solution 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, output using raw filter, or else it will escape the SVG markup:

{{ some_svg|raw }}

Solution 5

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.

View more solutions