Archived topic
Only part of my SVG file (site logo) is displaying in browser
7 replies · Started by Matt on March 17, 2021
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
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.
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).
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.
Cool, thank you!
No problem :)
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. :)
I see, glad that you figured it out :)
Thanks for telling me!
