Menu
This is very strange. I am using SVG images, because of the low file size, sharp rendering, and scalability ( the objects animate quite a bit ). Its working perfect in FF, ie9, Safari and iPad, but in chrome certain SVG images are rendering very poorly.
Any ideas why this might be happening? The svg files themselves are very small.
Here is some a sample svg
494
Root Cause. The problem is as the graphic becomes smaller there are less pixels to work with. When rendering the SVG the browser is using equations to determine pixels but the equations result in numbers that fall in between pixels.
Displaying SVG in web browsers like Chrome, Firefox and Internet Explorer can be done in several ways: Point the browser to the URL of the SVG file. Embed SVG inside an HTML page.
So how does the SVG format differ to bitmap-based images? They are vector-based meaning that they are resolution independent. Rather than consisting of pixels, SVG images consist of shapes. This means that they can scale indefinitely without a reduction of quality.
So anyway, this is a legit chrome bug. And there is a fix, make the svg 'larger', svg files that internally report as too small cause this bug.
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
