SVG

Have you heard of SVG? It’s a dialect (or namespace or whatever the correct term is) of XML which defines images. Defining the dimensions of rectangles, circles, paths, etc with text instead of saving information for every pixel allows SVG images to be scaled infinitely (SVG stands for scalable vector graphics) without the file getting any bigger, and you can also make tweaks in any old text editor, which is kind of cool.

Image editing programs like Inkscape and Adobe Illustrator can save to SVG, and non-lame web browsers like Firefox, Safari, and Opera can render SVG images. An example: you know the little three-arrow logo at the bottom of Wikipedia disambiguation pages? It’s converted to a PNG when it goes out because of IE, but the original file is SVG — click it and click the direct link to the file, and your browser renders the image from the XML (you can “view source” like a normal page!). Download the file and open it up and Inkscape, and you can edit it—move the elements around and stuff.

More advanced SVG features (not sure if browsers even support these yet) are animations and filters (blur, etc). If the DOM could be manipulated with JavaScript, SVG would be an open-source, standards-compliant, W3C-championed alternative to Flash, which is pretty cool. Combine scriptable SVG with HTML 5, and you have a whole world of semantically-organized, snazzilly animated, open source goodness. It’ll only happen if people other than opensource/standards buffs (like Wikipedia people) notice, though.

08:18 PM | 13 Comments

Comments

  1. Apparently SMIL is the W3C recommended markup language for making interactive svg images. And lame web browsers like IE (with its Adobe SVG Viewer plugin) support SMIL and SVG better than Firefox. And Opera schools them all with SMIL support without a plugin.

    Delete What! on

  2. Also, the fact that all of the drawing and animation code for SVGs are available simply by hitting “view source” may be kind of a turn-off for commercial flash people who don’t want people being able to use their work.

    Delete What! on

  3. Why do they call it scalable vector graphics. It seems redundant.

    Delete What! on

  4. Hmm, good points. And yeah the “S” isn’t really necessary – I guess they’re just emphasizing that big advantage of vector images. And it sounds better than “VG”. Maybe “XVG” for XML Vector Graphics – that would be more descriptive and not repetitive.

    Pedro Viltero on

  5. Yeah, I’m not to much of a big fan of SVG images.

    Why? Not compatible with MS Office or Wordpress. Basically, it’s not compatible with XP or Vista unless you go through the hassle of converting them to jpgs or something (e.g. even though paint might be poor in function, it can’t handle svg images)

    So, I mean it’s pretty easy to convert them, but, what can I say, I like things to go about my business and not get sidetracked with converting stuff.

    Delete T-Hawk on

  6. Well they are vector images which means they aren’t stored by the pixel. They use mathematical formulas to store lines and shapes. It would be rare to need to use an svg in word just like you don’t need to put swf’s in word. It is a web format, you can’t go and take a svg photograph because vector images are not suited for that kind of thing. I know that I’ve never used svg’s except for in my web browser or Inkscape.

    Delete What! on

  7. Aren’t some office clip art images vector anyway?

    Pedro Viltero on

  8. Yes, the format is called a Windows Metafile.

    Delete What! on

  9. I read the Wikipedia article—interesting. I saw a couple libraries for it at the bottom, but it doesn’t seem like any editors have support for it… I didn’t look too hard though. I guess Microsoft doesn’t really have any reason to switch to SVG – it would make open source people happy, but MS already has all those WMF compatible programs out there on like 99% of computers. That’s kind of annoying—MS doesn’t really comply fully with standards and stuff (IE…) because everyone just has to bend to them because everyone uses their computers.

    Sort of like the US blowing off the UN about Iraq and stuff… The UN can’t stop it…

    Pedro Viltero on

  10. Well actually IE 8 will be compliant with a lot of standards and should pass the Acid2 test. As will Firefox 3

    Delete What! on

  11. yeah, I heard that. that’s good.

    Pedro Viltero on

  12. hm, this could also theoretically allow ctrl-f-ing within images. That would be pretty cool. for like big diagrams and stuff.

    Pedro Viltero on

  13. Yeah, you can highlight text in svgs.

    Delete What! on