codedread

SVG Kickstart 1: Allow Myself To Introduce...Myself

by Jeff Schiller, 2005-06-10

Table of Contents

4. The Immediate Benefit

File Size

Let's talk for a minute about file size. As mentioned earlier, SVG file size is going to vary with how complex the image is. With complex images, the SVG files could end up being larger than the raster version. But for such a basic image as our flag example, the file will understandably be quite simple and short. The size of the japan.svg file is 409 bytes, but it displays perfectly at any resolution (thumbnail size or 5000x5000 pixels large). Compare this to the same image at high resolution saved as a Photoshop file (.PSD), a raster bitmap (.BMP) or even as a lossy compressed image (.JPG). Furthermore, SVG files themselves can be losslessly compressed using gzip (use the extension svgz). Performing this compression results in japan.svgz being 300 bytes. Larger SVG text files might even compress at a better ratio.

Interoperability

Using the HTML <object> tag, it is possible to embed SVG files within an HTML document, as I did in the previous section (and can be seen on my website navigation menu and masthead). The W3C is currently putting together a "Compound Document Format" which will describe how different XML grammars can exist in the same document (such as XHTML, SVG and MathML).

However, one goal of the SVG specifications is that user agents should be able to render a SVG image anywhere a raster-based image is supported. For web browsers and HTML, this means that I should be able to write:

<img width="32" height="32" src="thumb.svg" />

And for CSS I should be able to write:

body { background-image: url("bkgnd.svg"); }

Unfortunately, as of August 2007, I know of only one SVG implementation that allow this: Opera 9.5 Alpha. Of course, SVG plugins could never offer this capability, so it is yet another advantage of native browser support.

See Mozilla bugs 231179 (CSS) and 276431 (<img> tag). Time to pester the developers and let them know you want to see this functionality implemented. ;)

<<<Prev: 3. A Good Starting Point Next: 5. Conclusion>>>
codedread codedread