How can I properly use SVG code for a logo in a custom theme?

Store Design
, ,
1

Hi, I’m trying a custom theme with a field for entering the SVG code for the logo. I have never used an SVG file so I am trying to figure out what to do here. Please see the screenshots attached

I am able to see the logo in the desktop view but not in the mobile view

Also, I have seen the same SVG code box in the YUVA theme trial as well. Can you please help with this? I have found articles on how to add SVG code in the theme code but this is different.

Screenshot 2023-03-13 at 4.38.26 pm.png
Screenshot 2023-03-13 at 4.38.26 pm.png300×625 26 KB

Screenshot 2023-03-13 at 4.39.42 pm.png
Screenshot 2023-03-13 at 4.39.42 pm.png1219×634 246 KB

Screenshot 2023-03-13 at 4.39.51 pm.png
Screenshot 2023-03-13 at 4.39.51 pm.png367×503 75 KB

2

Hello there

It sounds like you are trying to use an SVG code for your logo in your custom theme, but you are having trouble getting it to display properly in the mobile view. Here are a few suggestions that may help:

  1. Make sure that your SVG code is valid and does not contain any errors. You can use an online SVG validator to check your code.
  2. Check that the SVG code is being properly outputted in the mobile view. You can use a browser inspector tool to see if the SVG code is being loaded on the page.
  3. Ensure that the SVG code is being scaled properly for the mobile view. You may need to use CSS to adjust the size of the SVG element for smaller screens.
  4. Test your theme on different mobile devices and browsers to ensure that the logo displays correctly on all devices.
3

Hi,

I had run into this post after having the same issue and I was able to fix it by changing the SVG export settings for my software (illustrator) with these settings (below) . If you are using different software experiment with different export settings until you get it right. Even though this an old thread im hoping it would help someone as ı

i couldn’t find anyone posting a solution that worked for me. Have a nice day All!

SVG illustrator 2024 Settings:

File > export For screen > Select SVG > click the small advanced settings icon (a screen will pop up):

Styling: Presentation Attributes

Image: Embed

Uncheck Responsive

Check Minify

P.S. if you have font in your logo, convert to outlines (i didnt test this though)