Including SVG in Twig template

5
votes

I am changing my assets from PNGs to SVGs, where appropriate, however I am having difficultly including these SVGs in my Twig templates.

I am trying to include the SVG like this:

{{ source('/assets/img/crmpicco-horizontal-logo.svg') }}

However, this results in the following error:

Unable to find template "/assets/img/crmpicco-horizontal-logo.svg" (looked into: /Library/WebServer/Documents/crmpicco/symfony/app/Resources/views, /Library/WebServer/Documents/crmpicco/symfony/vendor/symfony/symfony/src/Symfony/Bridge/Twig/Resources/views/Form).

Why can't I include this SVG in the same directory as my other assets? Specifically, i'm interested in finding out why a SVG can't be treated as an asset with Assetic.

2
phpsymfonysvgtwigsymfony-2.8
Possible duplicate of Twig: Include external Code from an SVG file – Fabien Salles

2 Answers

3
votes

You have to rename your svg file with a twig extension crmpicco-horizontal-logo.svg.twig and do this :

{% include ":svg:crmpicco-horizontal-logo.svg.twig" %}

The folder svg is in app/Ressources/views in this example

6
votes

Here is the solution I use (Twig with Symfony 4 and Webpack Encore) :

  1. Inside your twig config, declare your public path :
twig:
    paths:
        "%kernel.project_dir%/public": public_path
  1. Load your svg asset like that :
{{ source('@public_path'~asset('build/images/your_file.svg')) }}