Why is this SVG image blurry when scaled down?

Question

I am making a responsive web page using the Bootstrap 3 framework. I have an image that I want to use as a logo on the page.

I started off saving the full size (788 x 1098) image as a PNG. My custom CSS makes sure the image has a max-width of 280px and of course Bootstrap's CSS will scale down the image appropriately for the device. When I viewed my responsive web page on my desktop PC it looked ok even though it had been scaled down to 197 x 280. However when I viewed it on my mobile the image looked blurry and wasn't good at all.

So then I heard about SVG images and thought I'd give it a go. I downloaded Inkscape for Mac, opened the full size PNG in Inkscape and re-saved as a SVG image. Unexpectedly the SVG image looks good when I view my web page on my mobile phone but looks blurry and bad when viewed on my desktop PC.

Why is this? I thought the whole point of SVG images was that they can be scaled without loss or blurriness?

I've made a CodePen to help demonstrate: http://codepen.io/theclarkofben/pen/WvdKgM

<p>SVG 20%</p>
<img src="http://www.clarkben.com/img/cv.svg" alt="a" style="height: 20%; width: 20%;"/>
<p>SVG 100%</p>
<img src="http://www.clarkben.com/img/cv.svg" alt="a" />

Solution

Your "SVG" is just SVG containing single raster (PNG) image, so nothing really scalable; see <image … in view-source:http://www.clarkben.com/img/cv.svg.

You can control rendering of such raster a bit with CSS (either using image-rendering or forcing GPU to handle that via some transform, but result woudn't be perfect either. Anyway, even it this was vector image, rendering A4 into cca 300 screen pixels wide box would not be "readable" as well, in my oppinion.

Comments

[ta.speot.is]

Spin up a copy of Outlook 32-bit, import the emails, export PST, import PST into Outlook 64-bit

[Robert Longson]

More accurately it's a PNG image wrapped in an SVG file.

[vijrox]

I'm not a graphic designer so if there's any terminology I got wrong, feel free to edit

[theclarkofben]

Are you sure? I followed a guide on how to convert raster to vector using Inkscape and it took about 2 mins to process the conversion before I saved it. See here where it's listed as a conversion product: en.wikipedia.org/wiki/…

[Robert Longson]

I'm sure, see @myf's answer for more details on how to see it.

[vijrox]

Zooming in on your image yields a blurry, pixelated image; not the sort of smooth edges that you would get if this image were vectorized properly.

[theclarkofben]

Thanks. Questions; what does "cca" mean? also, I tried viewing page source but theres no <image ... anywhere?

[Robert Longson]

@theclarkofben paste this into the browser address bar: view-source:http://www.clarkben.com/img/cv.svg and then look for <image ... xlink:href="data:image/png;... That's the original PNG raster embedded in the SVG file

[Max Payne]

i wouldn't use circa in this context.

[myf]

You are most probably right (my English is terrible) and in my language environment this word usually expresses uncertainty in general and is not bound to dates exclusively (like in English, as I just found out), so yes, it might be unfortunate "misuse". In this case my uncertainty was referring to the relative "20%" SVG width in example, when one can not precisely predict resulting width, because it will depend on actual client viewport ("display") or offset parent dimensions.