Winter CMS resources and help articles

Simple and to the point. Optimized by the community.

Include SVGs inline in themes

1
by LukeTowers, last modified on March 26th, 2022

If you would like to include inline SVGs in your theme templates then you can do the following:

  1. Create a partial called include-svg.htm and put the following code in it:
    ==
    <?php
    function onStart() {
    $this['svgContents'] = File::get(base_path($this->file));
    }
    ?>
    ==
    {{ svgContents|raw }}
  2. Include your desired SVG like so:
    {% partial "include-svg" file="themes/mytheme/assets/images/mysvg.svg" %}

Discussion

2 comments

0
AIC BV
Post on March 29th, 2022 3:26 PM

Looks very handy. Does that mean one less network request for each SVG using this partial?

0
ImpactFactory
Post on June 23rd, 2022 7:34 PM

I just copy paste the svg code into a partial "mysvg.htm" and include its with {% partial "mysvg.htm" %}.

Works very nice too, no network request too, but perhaps not such a clean solution :)

We use cookies to measure the performance of this website. Do you want to accept these cookies?