Scalable Vector Graphics is known as SVG files. SVG is ideal for high-quality images and can be scaled to ANY size. As you are a Shopify user like others you face this problem to add SVG file logo in your online store and it very common issue that discussed in the Shopify community
In this tutorial i am going to show you. How you can add a .svg logo to your online store.
Here the step by step guideline. It’s will take max 2 minute.
1) Go to “Themes” > “Actions” > “Edit Code”
2) Go to the “Assets” folder in the sidebar and upload your logo as an SVG file.
3) Go to the “Sections” folder and open the “header.liquid” file.
4) Search for “img src” within that file, there should be two entries.
5) Remove the following lines from the first entry:
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"6) Remove the following line from the second entry:
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"7) Now change the line with the “src” attribute to the following (change both entries):
src="{{ 'your_logo.svg' | asset_url }}"Done.
6 reasons why you should be using SVG
- It’s resolution independent and responsive. Images can be scaled the same way we scale all other elements in responsive web design. …
- It’s got a navigable DOM. SVG inside the browser has its own DOM. …
- It’s animate. …
- It’s style-able. …
- Interactive. …
- Small file sizes.
Are looking Shopify Expert or Assistant for your online business? You are in the right place.
I am Foysal, an experienced Shopify Expert and a full-time individual virtual assistant. You can know more about me at here: About Foysal and discuss with me for your project. Contact with Me