15

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
  • 1
    If you place that file in your template folder, sure
    – DarkBee
    Jul 8, 2016 at 7:40

7 Answers 7

20

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/

0
12

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

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

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

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

0
3

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 }}
1

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.

0

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 }}
0

This worked for me in Drupal 9:

{% include active_theme_path() ~ '/images/sprite.svg' %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.