I placed an svg logo on my website www.photographyaccess.com, but it only renders on Firefox, Internet Explorer, and Safari (mobile). It does not render at all on Chrome, Safari (desktop), or the Samsung Internet browser. I don't want to use a PING version because it looks too pixelated.
A particular SVG or any image not rendering properly is most of the times related to a host end issue.
To eliminate that possibility can you please try to place the same SVG in a new file and publish it on Business Catalyst test site.
Let us know if it behaves the same or renders properly!
Ankush - That is incorrect. The issue is not related to the host end at all. I previously had this site as a trial site on Adobe Business Catalyst for several months, and the exact same issue occurred on the Adobe host with the trial site, using the exact same image and site files.
I understand, and to eliminate any host site issue I asked you to test on Business Catalyst.
As you said that it is behaving same way on BC as well, I now can assume for any other possibilities
Can you please share the same SVG with me so I can test it at my end?
Can you please check the link again?
It says site not found!
Looks like there was some miss happened while exporting the SVG from Illustrator.
I re-exported the SVG at my end, and now it looks good in all browsers.
Please take a look at it - Home
You can also download your logo from here - Adobe Creative Cloud.
Please see if this works for you as well and then I will tell you the export settings which I used.
Ankush - Thank you for your assistance. The image still doesn't render on Safari from my devices. But it does appear on Chrome now. Thank you for your assistance. Yes, if you could provide the export settings you used, I would appreciate it, and I'll continue to tweek on my end. Thanks.
The only way to have this logo work successfully as .svg is to start from an Illustrator file containing vector content and no rasterized elements. Otherwise, you would be better off saving the art as .png
It was said before:
The logo you are using is an SVG without any vector content.
Therefore it makes no quality difference at all if you save it as a PNG.
Nevertheless: Here both versions – SVG ans PNG work fine in Safari and Chrome. Just test it:
Right, OP asked Ankush the export settings to try. And, I was just reiterating what had been stated... so OP would not be wasting time and effort.
PS, your SVG logo still does not appear in Safari.
It definitely does, just as it does in Chrome! Do you think, I don’t test, before writing?
But maybe you have an older version of Safari.
The Photoshop export options are irrelevant, because loading the original „SVG“, which the OP gave us, only allows an SVG export in different sizes. There are no other options.
As far as I understand, this image was created in Photoshop and exported to svg. Photoshop is a bitmap editor, so it can not do true SVGs and is not at all suitable for this. It does SVG from png, Such files do not work well in browsers. Only a vector editor such as an Illustrator can create real svg files.
As you have mentioned that the SVG is still not visible on Safari.
Looks like the issue is what other contributors are suspecting of using a Ps exported PNG in Illustrator.
It will best to recreate a vector logo in Ai, and export it as SVG with settings mentioned here - Export high-quality, optimized SVG.
However, if you want the Photoshop file only then PNG will be the best option and no less than SVG.
I guess this sums up all the contributor's comments.
Ankush - Thank you for the link to the svg settings Yea, I rasterized the logo on Photoshop after I created it on Illustrator because I preferred the PS bevel effect fine tuning. And the SVG was showing up way better than the best PNG. I'll work on the vector version later. For now your solution works on most browsers, so I'll take it. Thanks again for your help on this.
Why does the Photoshop SVG, taken without any modification from the OP's download, render fine on my Safari/Chrome on my Mac and on Safari (iPad, iPhone) as well?
Looks like either SVG or browsers have got a terrible mood swing issues. haha.
Well just that was just a bad joke by me.
But probably some security settings or any firewall blocking it at our end, can't say.
I have even checked the code in browser's console, and it was showing transparent.
once I re-exported it from Ai, rendered properly.