svg - Jekyll ワークフロー内の CSS のインライン SVG

Question

https://github.com/GSI/jekyll_image_encodeを使用して、SVG を CSS にインライン化します。

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

ただし、base64 エンコーディングのオーバーヘッドが追加されます。SVG 自体をインライン化したいと思います。しかし、そのためには、ファイル内のこのヘッダーを取り除く必要がありfoo.svgます:

<?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">

そして、SVG コンテンツを URL エンコードする必要があります。

これどうやってするの？

Answer 1

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

これでいけると思います。