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

Question

Is there a filter to stick an SVG file right in the HTML of a Liquid file? I want to be able to manipulate the SVG styling with CSS, which I am unable to do if I only set the SRC of an IMG .

For example, is something like this possible with Shopify Liquid:

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

compiles to

<svg>blablalba</svg>

Answer 1

I would recommend instead that you put all of your svgs into one liquid snippet file like this:

<!-- 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"/>
...

Then you can call it like this:

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

Which is the equivalent of calling it like this:

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

Answer 2

Nope there is no filter but you can "hack" it to show it's html.

If you make a fetch request to the SVG url and it will return it's contents and you can append the content on your page.

While this is not a great solution it's something.

Example:

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

Answer 3

I use the below to add svg images into liquid files.

1. Upload the svg file to the theme
2. Use the below code to output the img tag point to the svg file.

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