SVG image looks terrible in Safari.

Post about projects that use Inkscape for web design.
holthaunt
Posts: 16
Joined: Sun Feb 18, 2018 7:20 am

SVG image looks terrible in Safari.

Postby holthaunt » Fri Jun 15, 2018 8:34 am

I have an SVG image on this website, http://test.holthaunt.com/mennonites/mennonite.html, that looks terrible in Safari, but renders fine in other browsers. Does anyone know reason for this? I did some research, finding some suggestions that scaling down of large SVG files could be the cause, but this SVG file is scaled up from a smaller file size(width and height).

tylerdurden
Posts: 2106
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: SVG image looks terrible in Safari.

Postby tylerdurden » Fri Jun 15, 2018 9:09 pm

I'd try saving a copy as a "Plain SVG" and see if it works better.

I'd be happy to test, but Safari is no longer available for Windows OS. :/

TD
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

Moini
Posts: 2813
Joined: Mon Oct 05, 2015 10:44 am

Re: SVG image looks terrible in Safari.

Postby Moini » Sat Jun 16, 2018 12:15 am

Maybe if you could share a screenshot, that could help us to understand what 'terrible' means...?
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

holthaunt
Posts: 16
Joined: Sun Feb 18, 2018 7:20 am

Re: SVG image looks terrible in Safari.

Postby holthaunt » Sat Jun 16, 2018 5:25 am

Terrible means, pixelated and blurry. Won't be able to uplaod screen until tomorrow.

Moini
Posts: 2813
Joined: Mon Oct 05, 2015 10:44 am

Re: SVG image looks terrible in Safari.

Postby Moini » Sat Jun 16, 2018 7:27 am

That's fine - it will help us to understand the issue better.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

holthaunt
Posts: 16
Joined: Sun Feb 18, 2018 7:20 am

Re: SVG image looks terrible in Safari.

Postby holthaunt » Tue Jun 19, 2018 8:29 am

Here is the screen shot of the svg file that looks terrible in Safari, below a screen shot of what it looks like in other browsers. I tried saving it as a plain svg, but no change to clarity.
Attachments
bikeshop_firefox.png
bikeshop_firefox.png (242.6 KiB) Viewed 2156 times
bikeshop_blurry.png
bikeshop_blurry.png (191.26 KiB) Viewed 2156 times

Moini
Posts: 2813
Joined: Mon Oct 05, 2015 10:44 am

Re: SVG image looks terrible in Safari.

Postby Moini » Wed Jun 20, 2018 7:07 am

What kind of filters are you using in your file? (I think the bottom screenshot is the one from Safari?) It looks like there's a problem with the browser trying to interpret a filter. Not all browsers support all types of filters.

What I'd try: select affected object, go to Filters > Remove Filters, and then restrict myself to blur (which is a filter, too).
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

holthaunt
Posts: 16
Joined: Sun Feb 18, 2018 7:20 am

Re: SVG image looks terrible in Safari.

Postby holthaunt » Wed Jun 20, 2018 7:34 am

Thanks Moini. I will go back and check for filters, though I thought that this was all blurs, but I may be wrong.

holthaunt
Posts: 16
Joined: Sun Feb 18, 2018 7:20 am

Re: SVG image looks terrible in Safari.

Postby holthaunt » Fri Jun 29, 2018 5:54 am

I have gone through this svg file and it appears that only blur was used. So, I am still trying to figure out why the image is so blurry in Safari. One note, when testing the site offline, just loading off the hard drive, the image looks fine. It is only when loading the site online that image becomes blurry, I don't know if this matters or not. I have uploaded a screen shot of the file open in Inkscape with one element selected, so you can see the attributes on the info bar at the bottom.
Attachments
bikeshop_svg_info.png
bikeshop_svg_info.png (87.04 KiB) Viewed 1872 times

Moini
Posts: 2813
Joined: Mon Oct 05, 2015 10:44 am

Re: SVG image looks terrible in Safari.

Postby Moini » Fri Jun 29, 2018 11:09 am

Aha. So you're uploading the picture to a website. Can you right-click on the image in Firefox and select to see the info about the image? Is it still an SVG file?
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

tylerdurden
Posts: 2106
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: SVG image looks terrible in Safari.

Postby tylerdurden » Fri Jun 29, 2018 12:51 pm

Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

holthaunt
Posts: 16
Joined: Sun Feb 18, 2018 7:20 am

Re: SVG image looks terrible in Safari.

Postby holthaunt » Sun Jul 01, 2018 7:32 am

Just to be clear, Moini, I'm not uploading to a website. I meant, when I test my site just off my hard drive as I am building it the image will render fine, but once I transfer everything to my hosting server, then test my site over the internet is when the image displays blurry. I still don't know if this make a difference.

Tyler thanks for the information, I'll review it in the next day or so. I know that blur are filters, I was just meaning other filters besides blur, per Moini's earlier suggestion.

User avatar
brynn
Posts: 9967
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: SVG image looks terrible in Safari.

Postby brynn » Sun Jul 01, 2018 4:25 pm

....looks terrible in Safari, but renders fine in other browsers.


It's quite normal that browsers have varying support for SVG. And it's quite common that we hear complaints about images displaying fine in some browsers (or image viewers, or graphic or other programs) but not in others. We even have an FAQ item for it.

It's for that reason, that most people....experts even, suggest to use raster images on websites, if it's very important to you, that the image looks good for everyone. If you want to use an SVG image on a website, you have to expect that not everyone will necessarily see it the same way or same quality.

Although having said that, I'm not sure if Moini or others might have some particular issue in mind, which might have a fix. I just wanted to mention the SVG support issue, since no one else has, yet.

Moini
Posts: 2813
Joined: Mon Oct 05, 2015 10:44 am

Re: SVG image looks terrible in Safari.

Postby Moini » Mon Jul 02, 2018 9:06 am

And is it still an SVG image? Can you check by right-clicking on the image in the browser, when it comes from your hosting site? Depending on your setup, it could be sending you a jpg, for all we know currently (probably not if you're writing the site software yourself, but if you use some CMS, it may happen).
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

tylerdurden
Posts: 2106
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: SVG image looks terrible in Safari.

Postby tylerdurden » Mon Jul 02, 2018 10:15 am

Unless the server delivers a bitmap only to Safari browsers, this looks like a svg to me.

A heavily filtered svg... like 88 out of 92 objects filtered. (gaussian blurs)

The article linked above mentions how Safari downsamples memory-intensive elements like the filters in the svg. I think that's probably what's happening here. But, it might also be related to syntax: https://stackoverflow.com/questions/479 ... ances?rq=1

This is a bit beyond my paygrade, but that's what the google machine coughed up.

MPH
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

Moini
Posts: 2813
Joined: Mon Oct 05, 2015 10:44 am

Re: SVG image looks terrible in Safari.

Postby Moini » Mon Jul 02, 2018 10:15 pm

TD, thanks for researching!

@holthaunt: can you try if inserting a

Code: Select all

filterUnits="userSpaceOnUse"

into the filter definitions (inside the <filter> tags) makes a difference?

If you use search + replace, search for

Code: Select all

<filter

and replace by

Code: Select all

<filter filterUnits="userSpaceOnUse"


(this is, in a text editor, use a copy of the file)
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)


Return to “Inkscape & the Web”

Who is online

Users browsing this forum: No registered users and 1 guest