[Resolved] Only part of my SVG file (site logo) is displaying in browser

[Matt]

Hi there, first time using SVG files, sorry.

Ok so a designer created me a logo in Illustrator. I’m not comfortable with AI, so I edited it in Photoshop. I didn’t use Paths.

I also added some text — which I later converted to a shape before my export to SVG.

I uploaded the SVG to WordPress, and in the preview, my logo’s mascot is missing. But when I look at the live link (first link in the private info), it’s there.

…but in the browser, it doesn’t show up. Did I do something wrong? I assume the issue is either with my WordPress setup, or with the fact that I didn’t use Paths to create the final SVG file.

Thanks

[Elvin]

Hi there,

The “zenmaster” path part has a fill value of #fff which is equal to “white” so it won’t look visible if you place the logo on a page with a background-color same color as the fill.

Take a look at this inspection. https://share.getcloudapp.com/qGuXk95G

What you can do to fix this is to edit the svg file with with a text editor.

You should be able to find this within the file:

<style xmlns="http://www.w3.org/2000/svg">
      .cls-1 {
        fill: #21b573;
      }

      .cls-1, .cls-2 {
        fill-rule: evenodd;
      }

      .cls-2 {
        fill: #fff;
      }
    </style>

Change .cls-2 fill value from #fff to your preference.

Tip: Ideally, all contents within your svg file should be a vector path for better scaling quality.

[Matt]

Hey Elvin,

Thanks but I’m actually okay with that white portion. I’m referring to the guy on the left side of the logo. The red guy. I don’t see him. (except on my phone, weirdly enough).

[Ying]

Hi Matt,

I tested your SVG, it does not work on my testing site either, missing the red guy 🙂

It’s not a theme issue, it’s the issue of this SVG file.

If you don’t have AI, then go to https://www.photopea.com/, open the file there, export it as SVG.

The new file should work then.

[Matt]

Cool, thank you!

[Ying]

No problem 🙂

[Matt]

Hey Ying, I actually found the issue. (My fault, as expected). If you’re curious, here it is:
I pulled an Adobe Illustrator object into Photoshop, where I did my edits, and added new objects. But to export a Photoshop doc as a svg, all of the components must have been built in Photoshop. So I actually need to pull everything back to AI and export there. 🙂

[Ying]

I see, glad that you figured it out 🙂
Thanks for telling me!

[Author]

Posts