svg scaling is pixelated for Sarfari 6.0

Safari 6.0 is now rendering scaled svg graphics in a unconventional way which leads to horrible looking vector graphics. The image below is a test svg image shown in FireFox (or Safari 5.x) on the left and Safari 6.0 on the right. Safari is creating a rasterized image and then scaling it up which leads to the pixelated image on the right. The svg code is there to use, so why not render it out pixel perfect like it used to. There are some clunky work-arounds for this problem, but why not have Safari 6.0 render the scaled svg correctly? This is a portion of a 100x100 graphic scaled to 500x500... the whole advantage to using svg is its vector based rendering... lost here.

User uploaded file

The code is basically an img tag refering to an external svg and the thing is scaled up. Something like this:


<svg width="500" height="500" viewbox="0 0 100 100"

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

<image x="0" y="0" width="100" height="100" xlink:href="example.svg" />

</svg>


Safari 5.x handled this correctly.

Safari 6.0-OTHER, Mac OS X (10.7.4)

Posted on Aug 16, 2012 7:44 AM

Reply

There are no replies.

This thread has been closed by the system or the community team. You may vote for any posts you find helpful, or search the Community for additional answers.

svg scaling is pixelated for Sarfari 6.0

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.