C
A
T
E
G
O
R
I
E
S

&

R
E
C
E
N
T

SVGs and Browsers

Posted by tigerhawkvok on November 05, 2009 21:15 in computers , programming , websites , internet

First, I realize I missed this week's Tuesday Tetrapod. I'll put up a double-feature next week — but I've been trying to meet a personal deadline and didn't quite have time to give the TT the attention it deserved. So, let me touch a little bit on SVGs and, thus, in a roundabout way, what's been occupying my time.

First, "SVG" stand for "Scalable Vector Graphic". As the image at the right demonstrates, zooming in on raster graphics such as bitmaps, PNGs, or JPGs introduces artifacts. Further, if you want to reuse the image, you cannot scale it beyond a certain resolution. Vector graphics, on the other hand, are very much like text in that their descriptions are essentially plaintext describing how lines arc. The lines arc the same way no matter how zoomed in you are, so they are rendered on the fly by computers. This means that they are infinitely resizeable, and retain fidelity limited only by the physical pixel sizes on your monitor.

Now, the problem is, of course, Internet Explorer. It's not the only problem, but the main one. See, IE doesn't support SVGs at all. Just can't do a thing with them. While Firefox has finally passed IE6 in market share, IE still holds ~65% of the global market (though on technical sites, its market share is closer to 20%). So this was a game-stopper to SVG adoption.

However, in October Google released the SVGWeb library, which is a simple Javascript library that renders SVGs on IE in Flash, and displays them as a Flash document. Suddenly, in one blow, SVG has a nearly universal level of application. If NetApplications is right, a combined implementation has a 98.88% market share penetration. Now, this isn't quite right, as Flash still doesn't support 64-bit browsers, so users of Internet Explorer 64-bit are out in the cold — but most users of 64-bit operating systems, even those that use IE, use the 32-bit version, so that's pretty negligible.

Now, with that hurdle done with, we have a few other hoops to jump through. First, of Gecko, Webkit, and Presto-based browsers (read: Firefox, Safari + Chrome, and Opera), Gecko and Webkit each incompletely support external SVG resources with the two tags that should work, <object> and <img> (Presto properly supports both). Gecko does not support <img> at all, and instead displays the alt-text; Webkit supports <object> but manipulating sizes and such does not work.

Now, I wanted to use an SVG-based logo on my site, and I was fed up with this implementation problem, so I wrote up a simple PHP library to get SVG working conveniently on multiple browsers. Now, to use an SVG, all you have to do is

<?php dispSVG('PATH/TO/FILE.svg'[,'ALTERNATE TEXT',WIDTH_IN_PX,HEIGHT_IN_PX,HTML_ID,HTML_CLASS]); ?>

Where everything in the square brackets is optional (do note, however, that if no height or width is specified IE will default to 100px by 100px). So, for example, on this implementation test page, the logo with the yellow background is just in:

	    <div style='background:yellow;width:500px;height:600px;'>
	      <?php dispSVG('assets/logo.svg','logo',450); ?>
	    </div>

That's it. Nice, simple, clean and cross-browser. All you have to do is extract the library to your server in a location, edit the $relative variable in svg.inc if it's not in the root directory, and paste the following into the head of your (X)HTML document:

<?php 
require('PATH/TO/svg.inc'); // edit this path
if(browser_detection('browser')=='ie') echo ""; 
?>

Once you've done that, you're done! Just call dispSVG whenever you want to display an SVG. By giving the ID or class calls a value, you can address your SVG as normal in you CSS. Nice and easy! It's not quite perfect, as CSS background only works with Presto (of course. Go Opera!), but it works for most uses.

Now, all that is because I'm working on creating a site to advertise my website creation and deliver built-to-order computers for customers. The computer building system is almost done, requiring some modification on the last four system types to give configuration options. Then I just need to generate some content for the other pages, and it'll go live!

So, I ask (what readers I have) a favor: Can you please check out the site, and give me any stylistic, functional, or content critiques, reccommendations, or comments you may have? With luck, soon it should have the proper domain http://www.velociraptorsystems.com/!

Information and Links

Join the fray by commenting, tracking what others have to say, or linking to it from your blog.



Add comment

 This is the ReCaptcha Plugin for Lifetype