Getting the most out of SVGs with Twig templates

This week I want to share some findings on the different ways to display an SVG inside the DOM using a simple Twig technique.

I am sure you will agree with me when I say that SVG is a very powerful thing when it comes to transforming a webpage from an ordinary, even boring I might say, into the work of art. And rather fast at that! Nevertheless, there are some tips & tricks that every developer should be aware of. Here is one of them: If you want to get the most out of SVGs, inline them!

This opens up a whole new universe of options and extra effects: A large palette of animations, changing SVGs’ colors based on some rules set in your Twig templates, using them as a clipping mask or similar, and lastly, very interesting and eye candy visual effects. How you go about doing this is however the main topic of this article. In general, there are two ways how you can implement this on your website.

The first and most straightforward solution is to simply insert your SVG code directly into the Twig template. Extremely simple, yet also “dirty” solution to this problem.

A more appropriate (and a suggested) way of doing this goes as follows: Include an SVG using the Twig “include” function, just the way you would include a typically Twig template inside another Twig template. This will automatically inline your SVG to your DOM, allowing you to do animations using CSS or JavaScript animation libraries, while keeping your Twig file clean and simple to understand.

You can do this using a following syntax (FYI, I use a custom “Emulsify” Drupal theme):

{% include "@type_of_component/component-name/your-svg-filename.svg" %}

 

If you are using a non-PatternLab Drupal theme, you should use Twig namespaces, e.g.:

{% include "@theme_machine_name/your-svg-filename.svg" %}

 

Example above is when your SVG is placed under the “templates” directory tree, if it’s outside of it, use “..” to return one step back, e.g. (when SVG is right under theme root directory):

{% include "@theme_machine_name/../your-svg-filename.svg" %}

 

And that’s it.

By using the Twig’s “include” function for an SVG, you also avoid a rather unpleasant issue. You probably already know that some “general rules of web development” suggest placing your icons and images into a single directory which we typically name “images” directly under a theme’s directory tree.

If you’re using a Drupal theme which comes with PatternLab, there may be situations where you already know that you’ll be using, for example, an SVG image just in a single place on your website. Placing it in a specific component directory actually helps you to keep your directory structures simple and (relatively) tidy.

There is just one, small catch: PatternLab’s side of a theme, unlike Drupal’s, uses different paths for files inside of a theme. That’s because of the different interpretations of a theme’s root directory between PatternLab and Drupal. Consequently, even if you implement your SVG through CSS or insert it’s path inside Twig, JSON or yml file, you won’t see the SVG both in PL and Drupal, but instead just in one of them. There are some ways around this, as nicely demonstrated in the article by Brian Lewis. A more straightforward solution however is to add SVGs with the “include” function, which is a really simple, yet powerful solution that works both in Drupal and PL. In other words, your SVGs will be displayed correctly both in Drupal and PL.

 

I should mention that you can also make your SVGs highly configurable by inserting Twig variables directly in SVGs. This way you can put variables for different pieces of SVG and manipulate them from within Twig templates. Consequently, you can change colors or some other SVG attributes in an easy and practical way.

Example:

- with your favorite IDE or text editor put this variable somewhere in your SVG file, for example, somewhere when some color is applied):

fill:{{ custom_color }}

 

- after that in a Twig file in which you already included this SVG, enter appropriate value in “custom_color” variable. End result will be something like:

(for PL Drupal theme)

{% include "@type_of_component/component-name/your-svg-filename.svg" with {
	custom_color: “#fe055e”,
} %}

 

(for non-PL Drupal theme)

{% include "@theme_machine_name/your-svg-filename.svg" with {
	custom_color: “#fe055e”,
} %}

 

Don’t forget to clear caches for changes to take effect!

Hope you will find these advices useful and feel free to share them with others.

Do you know of or use any other technique in situation like this one? If so, please share your thoughts and ideas!

Have a nice coding day! :)