Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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=".... />
like image 431
Marten Zander Avatar asked Jul 08 '16 07:07

Marten Zander


People also ask

How do I add SVG to twig?

One simple way using Twig There's a very simple way to do it using Twig! Simply use the source function in your template. This will copy the text present in the SVG file and put it in your generated HTML, thus make it a proper recursive and editable DOM element. That's it!

What does SVG stand for?

Scalable Vector Graphics (SVG) is a web-friendly vector file format. As opposed to pixel-based raster files like JPEGs, vector files store images via mathematical formulas based on points and lines on a grid.


2 Answers

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

{{ source(directory ~ '/images/my.svg') }}
like image 59
5n00py Avatar answered Sep 20 '22 10:09

5n00py


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/

like image 41
Tillit Forsikring Avatar answered Sep 19 '22 10:09

Tillit Forsikring