How can I use SVG for all graphics on my website?

[BirdhouseUSA]

Hello, we have a lot of small graphics on our website and the client requested we use SVG for all of them.

I am not seeing this as an option in Shopify. Is there a way to do this that the customer can also manage (without going in to the code).

Thank you!

https://cast-elegance.myshopify.com/

castdev

[Ninthony · Accepted solution]

Unfortunately, Shopify's image picker does not support SVGs. There is a possible work around, but it will require editing some code. 

If you want to give a client the ability to add an SVG through the customize editor, what you could do is use a text input instead of an image picker in the schema. You could upload the SVG via Settings > Files – and then in the text area you would type the name of the image including the extension. Lets just make a simple section that accepts a text input and would output the SVG on the page assuming the correct name and extension is typed into the image editor:

<div class="section-container">
<img src="{{ section.settings.svg_path | file_url }}">
</div>
{% schema %}
{
"name": "SVG Uploader",
"class": "svg-uploader",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "text",
"id": "svg_path",
"label":"SVG Path"
}

],
"presets": [
{
"name": "SVG Uploader",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

Then in the customize editor you'd just have to type the name of the file and the extension:

This would output your logo onto the page which you could then manipulate with CSS.

[EugeneHarin]

Starting from April 2023 this has become an official feature and is no longer an issue
https://eugeneharin.hashnode.dev/shopify-introduces-native-svg-support

[Ninthony]

Thanks for the update @EugeneHarin , I missed the announcement and have still been dancing around this for months lol.