Search code examples
svgscaleblurryrasterize

svg inside svg is rasterized causing blury results when scaling up

I'd like to embed an external SVG image file within an <svg> tag. To do this, i'm using SVG's <image> tag as follows:

<svg width="1000" height="1000"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

    <image x="0" y="0" width="48" height="48"
     xlink:href="http://static.micahcarrick.com/media/images/autotools-tutorial/hello-world.svg"
     transform="scale(5.0)" />

</svg>

As you can see, I'm trying to scale the nested SVG by 5.0 by adding a transform attribute. Unfortunately, in both Firefox and Chrome, I'm sometimes getting a blury image because it's rasterizing the nested SVG before scaling it up.

Note: It sometimes works as expected (The nested SVG stays crisp) in Firefox and Chrome, but not always (For example, if I open the attached JSFiddle in Chrome, it's blury/broken. If I press F5, it's crisp/working)

Is there any way to ensure that the nested SVG is never rasterized before scaling ?

Thanks :)

JSFiddle: http://jsfiddle.net/a9NRY/17/

ugly rasterization perfect

Solution

  • This is a known bug in Chrome, caused by the fact that the image is cached. You can't fix this from your code, since it's a browser bug, but you could try to disable caching for that image on the server side.