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 }}

我认为这可以做到。

Answer 2

对于较旧的 Liquid 版本，这是一种解决方法：

{% capture svg %}{% include foo.svg %}{% endcapture %}
{% assign svgsplit = svg | split: 'svg11.dtd">' %}
{% assign svgpart = svgsplit[1] | strip_newlines %}
{% assign svgpart_url_encoded = svgpart | replace: ' ', '%20' | replace: '&', '%26' | replace: '?', '%3F' | replace: '!', '%21' | replace: ',', '%2C' | replace: "'", "%27" | replace: "<", "%3C" | replace: '>', '%3E' | replace: '"', '%22' %}
{{ svgpart_url_encoded }}