Jekyll 工作流程中 CSS 中的内联 SVG

Question

我使用 https://github.com/GSI/jekyll_image_encode 将 SVG 内联到我的 CSS:

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

但这增加了 base64 编码开销。我想内联 SVG 本身。但是为此，我需要在 foo.svg 文件中删除这个 header：

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

Jekyll 工作流程中 CSS 中的内联 SVG

Inline SVG in CSS within the Jekyll workflow

svg

liquid

jekyll

jekyll-extensions