Search code examples
svgjekyllliquidjekyll-extensions

Inline SVG in CSS within the Jekyll workflow

I use https://github.com/GSI/jekyll_image_encode to inline a SVG into my CSS:

background: url("{% base64 foo.svg %}");

But that adds a base64 encoding overhead. I would like to inline the SVG itself. But for that I need to get rid of this header in the foo.svg file:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

And I need the SVG content to be URL encoded.

How can I do this?

Solution 
  • {% capture svg %}{% include img/gnu.svg %}{% endcapture %}
{% assign svgsplit = svg | split: 'svg11.dtd">' %}
{% assign svgpart = svgsplit[1] | escape %}
{{ svgpart }}

    I think this does it.