Shopify Question posted in
The Shopify help center can be found here.

Shopify Liquid Filter to insert SVG file straight in HTML?

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>
Tags:

3

Answers


  1. 0

    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);
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
  3. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search