Highlighted

SVG logo does not render on Chrome or Safari

Community Beginner ,
Aug 03, 2017

Copy link to clipboard

Copied

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.

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.

Cheers,

Ankush

Views

7.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

SVG logo does not render on Chrome or Safari

Community Beginner ,
Aug 03, 2017

Copy link to clipboard

Copied

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.

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.

Cheers,

Ankush

Views

7.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 03, 2017 0
Aug 03, 2017

Copy link to clipboard

Copied

Hey monzep,

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!

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2017 0
Community Beginner ,
Aug 03, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2017 0
Aug 03, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2017 0
Community Beginner ,
Aug 03, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2017 0
Aug 03, 2017

Copy link to clipboard

Copied

Can you please check the link again?

It says site not found!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2017 0
Community Beginner ,
Aug 03, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2017 0
Aug 03, 2017

Copy link to clipboard

Copied

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.

Regards,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2017 1
Guide ,
Aug 04, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2017 1
Community Beginner ,
Aug 04, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2017 0
Most Valuable Participant ,
Aug 04, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2017 1
LEGEND ,
Aug 04, 2017

Copy link to clipboard

Copied

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:

http://tmp-photography-access.businesscatalyst.com/index.html

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2017 1
Most Valuable Participant ,
Aug 04, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2017 0
LEGEND ,
Aug 04, 2017

Copy link to clipboard

Copied

It definitely does, just as it does in Chrome! Do you think, I don’t test, before writing? 

Screen.jpg

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2017 0
Aug 04, 2017

Copy link to clipboard

Copied

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.

Cheers,

Ankush

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2017 0
Community Beginner ,
Aug 04, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2017 1
LEGEND ,
Aug 04, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2017 1
Aug 04, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2017 1