Skip to main content
Previous post All posts Next post
Banner image

Maybe-crazy Things to do with Inline SVG in Drupal 8 Twig Templates

4
min read

Audrey Brockhaus
Frontend Developer
Inline SVG


Many developers treat using SVG as something similar to flossing their teeth—it’s one of those things that is generally accepted as a good practice, but not the kind of thing you’d do when you are in a hurry. (Or ever? You animals.)

But if you are theming in Drupal, you ought to know that Twig in Drupal 8 makes using inline SVG easy and awesome. This post will discuss why you might want to use inline SVG in your templates and how to do it, and show you some examples of cool things that you can do.

Why Use SVG in Your Templates?

To do really cool stuff with SVG (animating with CSS, hover effects, masking page content, whatever the heck this is), you need to make the SVG code accessible to the DOM by including SVG code inline in your HTML. But do you want to work with templates that are bloated by inline SVG? And do you need to?

SVG HTML


Gah.

Not with Twig in Drupal 8. Not only does Twig allow you to painlessly include SVG inline, it is also possible to pass variables into the SVG. This opens up a world of possibilities for creating some really cool, customizable stuff, and giving your content editors more power than they know what to do with. Here’s how.

1. Including Your SVG Files Inline

To use inline SVG in a template, you can simply open an SVG in your code editor, copy the code, and paste it into your template, just as you would HTML. However, Twig has an `include` function that will print the contents of your SVG file inline without you needing to gunk up your template with a few dozen lines of SVG code.

SVG Path to File


The path used by the Twig include function will be relative to your site’s docroot. The best way to point to assets in your theme folder is to use the theme namespace.

SVG The Name


The theme namespace points to your theme’s template folder, so if your SVG is outside of your template folder you’ll need to hop up a step. So, for example, an include pointing to your theme’s image folder might look like this:

Theme Name SVG


Using the include function, you can choose to store your SVG files in your theme’s images folder, or in your theme’s template folders (they are a part of your template after all), or wherever makes the most sense to you.

2. Using Variables in Your SVG

To use variables in your inline SVG, simply print them as you normally would with Twig. When you use a variable as the value of an attribute in your SVG, you may want to consider how the SVG will render if no value is passed to it.  

Some SVG attributes (like the fill color of a path, which is black unless specified) have a default value that will be used if there is no value specified. But in cases where you are unsure a value will be passed, it makes good sense to build an acceptable default value into your SVG “template” yourself using Twig’s handy default filter.

SVG Path Fill


3. Doing CSS Animation

The most common reason I use SVG inline is to allow its contents to be animated with CSS (or JavaScript, if that’s your bag). In this example, classes applied to the parent element animate the width of the progress bar gradient. This is a simple simulation of what might happen on your site as a user progresses through a checkout process.
In this example, no variables are passed to the SVG at all, it just needs to be inline so it’s available in the DOM for your CSS to apply to the gradient! Easy!

Progress Good
Click the image to see my code


4. Creating Authorable SVG Text

Text in an SVG file can do awesome things that HTML text can’t, and it’s a great tool to use for interesting banner and headline text. Is this the power you want to give to your content editors?

Why Not?
Click the image to see my code


Notice that the SVG text in the example above is selectable. Yeah!

Here is an example of text inside of an SVG being used as a clipping mask to reveal part of an image:

Space
Click the image to see my code


It scales beautifully and is painlessly aligned both horizontally and vertically within the image area without extra wrapping elements or flexbox.

In the “space” example above, both the image and the text could be values in the database passed to SVG in the template to create a cool, customizable banner (see Twig in white).These example variables are from a node template.

SVG Code


5. Setting Colors of Elements

Using the color field module, you can easily allow the user to set color values in fields that are passed into your templates’ inline SVG. For example, you could create three color fields for a user avatar: hair color, skin color, and eye color. The color field module returns hex-codes that can be output right into your inline SVG.

SVG Version

Note: In the example above I am using the field_value filter provided by the Twig Field Value module to more easily print the hex value in the template.

Result:

Avatar


Green skin? User, you’re so quirky!

Twigging Out

These examples are just scratching the surface of what you can do with SVG in a template. If you are unafraid to look inside the SVG file, you will find so many properties and attributes that are easy to modify to customize your content, and you may come to consider SVG an amazing extension of your Twig templates. 

If you have ideas for more creative ways to use SVG in your templates, comments about this post, or just want to say hi, hit me up on Twitter at @AudreyBrockhaus.