Over a million developers have joined DZone.

Scalable Vector Graphics Support in Current Browsers

DZone's Guide to

Scalable Vector Graphics Support in Current Browsers

· Java Zone
Free Resource

Bitbucket is for the code that takes us to Mars, decodes the human genome, or drives your next car. What will your code do? Get started with Bitbucket today, it's free.

Summary: Scalable Vector Graphics (SVG) is OK in the latest browsers, but there are inconsistencies. If the last mile were closed, then bloggers like me would appreciate the speed improvement (and scaling) for end-users.

Last week’s blog entry used SVGs instead of PNGs for the images, and here are clips of that so we can compare in all browsers (SVG made in OmniGraffle).


It looks great, on Chrome (as I intended in OmniGraffle):


The diagram is OK in Firefox, but text not at the bottom is not. Particularly the “r” and “e” of “are” smushed together:


Safari is close to OK, but some of the text in the boxes is inexplicably ghosted:

Internet Explorer 9

The aspect ratio might not be as bad as it looks, as I’m using SauceLabs to crank up IE Virtual Machines.

The text below the boxes is really bad:

Internet Explorer 10

Looks OK in IE 10. Same aspect ratio thing from SauceLabs though:

Playing the waiting game

There’s caniuse.com/svg that’s worth checking out to track progress of things. It really needs shades of green though, as there’s still variance.

There’s also Ben Howdle’s svgeezy to allow a graceful fallback to PNGs for even older browsers (needs JavaScript)

Finally, there’s an ACID test for SVG that shows a lot of difference for even current browsers

Bitbucket is the Git solution for professional teams who code with a purpose, not just as a hobby. Get started today, it's free.


Published at DZone with permission of Paul Hammant, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}