Blurry Svg Images in Chrome for Android

svg not sharp, but blurry

If you want your SVG to be at its sharpest, then design it so that its shapes - especially the horizontal and vertical parts of the shapes - are on pixel boundaries.

For example, compare the following two examples:

<svg width="50" height="50">

  <rect x="9.5" y="9.5" width="31" height="31"/>

</svg>

<svg width="50" height="50">

  <rect x="10" y="10" width="30" height="30"/>

</svg>

Blurry downscaled images in Chrome

I found the exact same issue on Mac: Firefox downscales the image really well, while Chrome makes it look blurry, which is very bad.
I couldn't care less about rendering time or speed, I need the logo to look GOOD!

I found the following CSS rule fixing Chrome for Mac

image-rendering: -webkit-optimize-contrast;

Why is this SVG image blurry when scaled down?

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.

SVG canvas too big, android default browser only

After some time, the solution:

If you open the SVG in a text editor, the first part will have something like:

viewBox="0 0 190 70"

If you add width="190 and height="70" after it, the problem will disappear. This will create some small difficulties when you want to resize, but the major problem is solved:

viewBox="0 0 190 70" width="190" height="70"

Blurry web graphics on smart phone - double image size or resolution?

Your assumptions are correct. You need to double the image size, maybe even a little more if you wanted to get picky as some screen resolutions have 3x or more pixel density than a desktop monitor. Double works pretty well though so I would start there.

Resolution, as in DPI, won't do anything for web graphics on screens besides make the image resource's filesize larger than it needs to be. You could have a resolution of 5 DPI and they would look the same as 300 DPI on a screen. The main issue with lowering DPI for web graphics is when a user wants to print your page, then any images with really low DPI would be very pixelated.

Depending on the graphics you've created you have some options besides your standard image formats. You can use SVG or create your own icon font. Both are vector images so they will look sharp on any device that supports them. Icon fonts are widely supported and SVG is decent but might need a small shim depending on what you need to do.

Blurry web graphics on smart phone - double image size or resolution?

Your assumptions are correct. You need to double the image size, maybe even a little more if you wanted to get picky as some screen resolutions have 3x or more pixel density than a desktop monitor. Double works pretty well though so I would start there.

Resolution, as in DPI, won't do anything for web graphics on screens besides make the image resource's filesize larger than it needs to be. You could have a resolution of 5 DPI and they would look the same as 300 DPI on a screen. The main issue with lowering DPI for web graphics is when a user wants to print your page, then any images with really low DPI would be very pixelated.

Depending on the graphics you've created you have some options besides your standard image formats. You can use SVG or create your own icon font. Both are vector images so they will look sharp on any device that supports them. Icon fonts are widely supported and SVG is decent but might need a small shim depending on what you need to do.

---

Related Topics