Shopify 液体过滤器将 SVG 文件直接插入 HTML 中？

Question

是否有过滤器可以在 Liquid 文件的 HTML 中粘贴 SVG 文件？ 我希望能够使用 CSS 操作 SVG 样式，如果我只设置IMG的SRC ，我将无法做到这一点。

例如，Shopify Liquid 是否可以实现类似的情况：

{{ 'file.svg' | file_url | svg_filter }}

编译为

<svg>blablalba</svg>

Answer 1

相反，我建议您将所有 svg 放入一个液体片段文件中，如下所示：

<!-- snippets/icon.liquid -->
<span class="icon icon-{{ icon }}" aria-hidden="true">
  <svg xmlns="http://www.w3.org/2000/svg" {%- if title != blank %}aria-label="{{ title }}"{% endif %} role="img" width="{{ size | default: 16 }}px" height="{{ size | default: 16 }}px" viewBox="{{ viewbox | default: '0 0 16 16' }}">
    {%- case icon -%}
      {%- when 'down' -%}
        <path class="stroke" d="M11.25 6.75l-3.5 3.5-3.5-3.5"/>
      {%- when 'chevron' -%}
        <path class="stroke" d="M1 0l7.875 8L1 16"/>
      {%- when 'location' -%}
        <g class="fill">
          <path d="M8 4.23c-.919 0-1.667.725-1.667 1.616 0 .89.748 1.616 1.667 1.616s1.667-.725 1.667-1.616c0-.89-.748-1.615-1.667-1.615zM8 7c-.656 0-1.19-.518-1.19-1.154 0-.636.534-1.154 1.19-1.154.656 0 1.191.518 1.191 1.154C9.191 6.482 8.656 7 8.001 7z"/>
          <path d="M11.537 2.436A5.022 5.022 0 0 0 8 1c-1.337 0-2.592.51-3.537 1.436C2.717 4.15 2.5 7.373 3.994 9.327L8.001 15l4-5.665c1.5-1.962 1.283-5.185-.464-6.899zm.04 6.6l-3.576 5.066L4.417 9.03c-1.355-1.773-1.161-4.684.416-6.231a4.5 4.5 0 0 1 3.168-1.286 4.5 4.5 0 0 1 3.167 1.286c1.577 1.547 1.772 4.458.41 6.238z"/>
        </g>
      {%- when 'phone' -%}
        <path class="fill" d="M12.555 15.5c-.626 0-1.38-.158-2.207-.47-1.818-.685-3.793-2.037-5.567-3.811C3.007 9.446 1.652 7.467.967 5.652.344 3.999.344 2.642.965 2.02c.089-.089.18-.185.274-.283C1.805 1.142 2.445.47 3.293.5c.586.025 1.153.389 1.732 1.111 1.714 2.13.94 2.892.046 3.771l-.157.158c-.145.145-.424.823 2.15 3.394.838.84 1.555 1.454 2.126 1.826.36.234 1.005.588 1.269.325l.16-.16c.879-.894 1.638-1.663 3.768.05.722.58 1.087 1.145 1.109 1.731.035.847-.64 1.49-1.237 2.056-.098.094-.194.185-.283.274-.308.308-.8.463-1.421.463zM3.234 1.006c-.604 0-1.148.571-1.631 1.079-.096.103-.19.202-.283.293-.461.463-.414 1.678.12 3.097.66 1.75 1.973 3.665 3.698 5.387 1.724 1.724 3.636 3.037 5.387 3.697 1.419.535 2.633.582 3.094.119.094-.092.192-.185.294-.282.52-.492 1.105-1.051 1.08-1.67-.017-.426-.327-.881-.921-1.359-1.773-1.426-2.27-.924-3.094-.089l-.162.163c-.395.394-1.032.308-1.9-.256-.603-.392-1.344-1.03-2.209-1.892C4.571 7.157 3.89 5.852 4.557 5.18l.162-.157c.838-.823 1.342-1.32-.086-3.097-.478-.593-.936-.904-1.36-.92h-.04z"/>
...

然后你可以这样称呼它：

{% render 'icon' with 'down' %}

这相当于像这样调用它：

{% render 'icon', icon: 'down' %}

Answer 2

不，没有过滤器，但您可以“破解”它以显示它的 html。

如果您向 SVG url 发出 fetch 请求，它将返回它的内容，您可以将内容附加到您的页面上。

虽然这不是一个很好的解决方案，但它确实有所作为。

例子：

fetch('the_svg_url')
  .then(r=>r.text())
  .then(r => document.querySelector('.svg-holder').innerHTML = r);

Answer 3

我使用以下将 svg 图像添加到液体文件中。

1. 将svg文件上传到主题
2. 使用以下代码将 output 的 img 标签指向 svg 文件。

{{ 'file.svg' | asset_url | img_tag }}