Including SVG in Twig template

Question

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.

Answer 1

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

2. Load your svg asset like that :

{{ source('@public_path'~asset('build/images/your_file.svg')) }}