Sic Transit Gloria VML

January 7, 2010 8:41 PM

Scalable Vector Graphics (SVG) - a sort of image format which records shapes and lines instead of pixels - is partially supported in most web browsers but not in Internet Explorer. Javascript libraries such as dojo.gfx and Raphaël have tried to bridge the gap programmatically with impressive results but it remains difficult to simply draw something in one of the available illustration tools and display it on the web (without converting to a raster graphic as Wikipedia does.) But hope for compatibility may be on the horizon: Microsoft has just joined the W3C SVG Working Group. (previously)
posted by XMLicious (51 comments total)

I feel like what with the canvas tag this is a day late and a dollar short. Am I wrong to believe that?
posted by Jeff_Larson at 9:05 PM on January 7, 2010

Oops, you could be. Does Illustrator output to something you can use with the canvas tag?
posted by XMLicious at 9:09 PM on January 7, 2010

If this means I can play Tempest in my browser, count me in.
posted by escabeche at 9:13 PM on January 7, 2010

I feel like what with the canvas tag this is a day late and a dollar short. Am I wrong to believe that?

Somewhat. SVG isn't widely supported in browsers, but it's become a decent standard in many other areas, and the toolchain is far more developed (e.g., exporting from Illustrator as SVG). And where SVG is supported, as in Firefox, the support is quite mature. If IE9 gets decent native SVG support, that's the last piece of the puzzle for a lot of niche SVG knowledge to combine with general web knowledge in the browser.
posted by fatbird at 9:14 PM on January 7, 2010 [3 favorites]

I routinely use a website that employs SVG. There is a plug-in to use it with IE. No big deal.
posted by Doohickie at 9:15 PM on January 7, 2010

Arrgh - Jeff_Larson, when I responded to you I meant to say "Oops, you could be right."
posted by XMLicious at 9:18 PM on January 7, 2010

Bout flipping time. MS should be leading wrt browsers, but they've never cared enough.
posted by smoke at 9:19 PM on January 7, 2010

I feel like what with the canvas tag this is a day late and a dollar short. Am I wrong to believe that?

Yeah, it seems rather odd that. SVG is pretty much dead, canvas is pretty much the ordained succesor once it comes out of proprietry land, and MS already has Silverlight as a competitor to it, so it's a bit headscratchy.

TBH it probably doesn't mean much of anything. Still, I feel a bit sorry for any MS hating SVG enthusiasts out there who will be obligated to throw a tizzy over it.
posted by Artw at 9:20 PM on January 7, 2010

The canvas tag and SVG are similar in that they're both capable of rendering vector graphics, but they go about it in pretty different ways. They're not completely complementary, but they're not redundant either.

Anyway, maybe I'm just scarred from my time in the Browser Wars, but having Microsoft join the SVG WG doesn't really lead me to think we'll all be rendering SVG in MSIE by next year, or something. (How long did it take them to figure out PNG? Ten years? And PNG is a simple format.)
posted by hattifattener at 9:24 PM on January 7, 2010 [1 favorite]

Microsoft has just joined the W3C SVG Working Group

Awesome. Can't wait for the new OpenSVGXML format.
posted by Blazecock Pileon at 9:24 PM on January 7, 2010 [4 favorites]

Either way there's still IE 6. There will always be IE 6.
posted by localhuman at 9:27 PM on January 7, 2010 [5 favorites]

> Bout flipping time. MS should be leading wrt browsers, but they've never cared enough.

They tried to care. They introduced VML back in the late 90s (IE5), but the W3C kind of shafted them by defining SVG in response. Back then I was cursing all the other browsers, because they had no support for my beloved vectors.
posted by iconjack at 9:37 PM on January 7, 2010

The beast that never dies. I'm predicting it long outlasting IE7 and maybe even IE8.
posted by Artw at 9:38 PM on January 7, 2010

I like thaton the "jut joined" link the text is all "HTML 5 this and that" and the photo is all "here's some very old fashioned table code with some sinister lighting".
posted by Artw at 9:40 PM on January 7, 2010

What's really making me scratch my head is that svg is xml and not an api. I'd think it'd be more difficult to throw around and create new dom nodes, than a coupla simple save, draw, and restore calls. Given that html5 is moving towards a more api driven interface (workers, canvas, progressbar, etc.) rather than an xml, dtd-and-dom-based interface, isn't this moving away from web standards?

This is confusing.

Though, I'm certainly going to have a look at raphael at least.
posted by Jeff_Larson at 9:46 PM on January 7, 2010

Also, XMLicious, no illustrator won't export to a canvas readable file b/c canvas is an api. But I bet someone's working on it.
posted by Jeff_Larson at 9:48 PM on January 7, 2010

To me, the thing is being able to have some vector file format that lets you just draw something, save it as a file, and display it in a web browser rather than by writing a script. (Which, as far as I can tell, is what you do with canvas, am I right?) But I agree that if you were going to generate a vector image dynamically or with a script an API would be better, as long as no one ever needs to save that dynamically-generated output as a standalone file.

But it seems to me that it would be better to have both - an API that generates a static format like SVG, which is portable and is already rendered in a variety of things besides web browsers. Like, if you've generated something with canvas, how do you get it into a PDF? Is there canvas support in PDF's? With SVG everything is already there for interoperability. (Though granted, you can't directly render SVG in a PDF, it has to be converted, but there are a whole bunch of converters already out there.)
posted by XMLicious at 10:05 PM on January 7, 2010

What's really making me scratch my head is that svg is xml and not an api.

How does that even make sense?

It's a file format. How would you make a file format as an "API"? (I mean yeah you could make the files store code that uses the api ala Windows Metafiles or PostScript but that makes editing rather difficult)

And anyway, you could always write a vector drawing API that generates SVG on the fly. You could also just draw whatever you want on the screen using canvas.
posted by delmoi at 10:08 PM on January 7, 2010

Another thing is - I don't know how it is on the Mac but in Linux, Gnome at least, there's SVG built into the OS already. If I'm not mistaken your desktop icons are SVG.
posted by XMLicious at 10:15 PM on January 7, 2010 [3 favorites]

XMLicious, that's a very good point. The canvas spec isn't far enough along to cover that yet, and I bet it won't get there, as delmoi points out, you'd either need to parse a standard graphic format. Anyway, put me down as a-ok with this.

delmoi, I wasn't making a judgement, rather I was trying to point out (yeah, pretty clumsily) that this is a game of catch up. It seems that browsers are moving towards api interaction, so if msft wanted to accept standards that'd be the way to go. New support for aging file formats-as-dom-extensions would not be the way to go. (I bet you could probably make the argument that svg nodes are traversable in the document, this amounts to a new api of sorts.)
posted by Jeff_Larson at 10:23 PM on January 7, 2010

Just to mention, I thought of another one - you can validate SVG against the DTD, like you would validate HTML or CSS, before trying to convert or render it. That's another thing that you could theoretically sort of do with code manipulating the canvas but you'd really be debugging it *shudder*.

As far as it being an aging format - if it's deficient in one way or another the thing to do is to revise the standard, not throw it out and start over again.
posted by XMLicious at 10:35 PM on January 7, 2010 [1 favorite]

Wow. I guess when Firefox, Opera, Safari and Chrome all provide some awesome web feature, then Microsoft might consider adding it to Internet Explorer too and making it "ready for prime time," eh?

In a way, I kind of hope Microsoft never adds SVG support, or any other damn thing to Internet Explorer. The more websites people will have to move to some other web browser to use, one that isn't a hateful artifact of Ballmer's fury towards a long-dead company, that much sooner the legacy of Internet Explorer can be put to rest. It's like only grandmas use it anymore. (Yes, there is a bit of hyperbole in that last sentence, but not really that much.)
posted by JHarris at 10:47 PM on January 7, 2010 [1 favorite]

They tried to care. They introduced VML back in the late 90s (IE5), but the W3C kind of shafted them by defining SVG in response. Back then I was cursing all the other browsers, because they had no support for my beloved vectors.

When Microsoft "cares" about something, you should go count the silverware.
posted by JHarris at 10:56 PM on January 7, 2010 [4 favorites]

To me, the thing is being able to have some vector file format that lets you just draw something, save it as a file, and display it in a web browser rather than by writing a script.

Create a vector image in Illustrator or another drawing program, save it as an SVG file, open it in Firefox/Opera/Safari/Chrome. Using SVG does not require you to write it like its HTML.

It seems that browsers are moving towards api interaction

API interaction is being added to HTML as a layer on top of the basic declarative language in order to obtain things that are difficult to do declarative. Movement towards API interaction doesn't imply movement away from the declarative foundation, and in that, I think that SVG has the advantage of being declarative, since it fits well into the existing browser programming model.
posted by fatbird at 10:59 PM on January 7, 2010

And MS already have a XML based declarative language for vector images which can be manipulated programatically in the form of XAML, which makes this all the weirder.
posted by Artw at 11:49 PM on January 7, 2010

What I want to know is when are we getting OpenGL support? I should be able to add shaders to DOM and load 3D models. None of this stuff is going to work very well when we move to volumentric displays -- a stop-gap to neural implants, of course.
posted by delmoi at 12:05 AM on January 8, 2010

I think it's a political decision for MSFT. It's known that there's zero love for canvas within MSFT, so throwing their weight behind SVG means they're setting themselves up against it. Of course, the current draft of HTML5 still has canvas in it despite many strenuous objections from all sides saying the canvas tag just isn't ready for prime time. For one thing, accessibility is still a work in progress, which is a big issue given that you can construct UIs with canvas.

I don't think this is groundbreaking, and I don't think this is really going to make a difference, not given that Ian Hixson and his merry band of zealots really want their vision of the web thrust upon us and see themselves as unstoppable. SVG is going to be out of the spec and canvas will be in. (Personally, I think they should both be out of the spec and treated separately by the standards committees.)
posted by dw at 12:21 AM on January 8, 2010

Wow. Slowly but surely, HTML gets what Flash had in 2000.
posted by effugas at 2:24 AM on January 8, 2010

This is not the hope you were looking for.
posted by Civil_Disobedient at 4:32 AM on January 8, 2010

Wait...IE *still* doesn't support SVG?

Remember when the argument for proprietary, closed-source, profit-driven software was that it was innovative?
posted by DU at 4:39 AM on January 8, 2010 [5 favorites]

"But hope for compatibility may be on the horizon: Microsoft has just joined..."

What? Wait, what? Are you trying to be funny or ironic? I don't get this. Microsoft joining something is typically an indication they intend to embrace/extend/extinguish it, or at the very least gain control of it to undermine it. Not standardize on it and improve compatibility.

Remember: Every Microsoft breath is breathed in the service of reducing compatibility and increasing lock-in. They're a very large, very profitable company, and the only options they have to continue that kind of existence are to either start innovating or to exploit their monopoly position. They have time and again chosen the latter, and this cycle of participating in standardization in order to undermine it is something they've done for decades.

Suddenly they're changing their stripes over a small, mostly obscure vector graphics format? I don't think so.
posted by majick at 5:53 AM on January 8, 2010 [3 favorites]

Canvas != SVG

SVG is data you can inspect and transform. Canvas = dumb code that you can't do much with expect display (* not quite true but hey).

While I couldn't care less about IE supporting SVG or the political reasons about why they've finally decided to do so - I think more SVG everywhere is a good thing. SVG gets a lot of criticism because of it's complexity - most of that complexity is done away with by the SVG Tiny spec.
posted by schwa at 5:59 AM on January 8, 2010

Forget the browsers, I want LaTeX to support SVG figures without having to go through an intermediate PDF stage that always screws them up. Compatibility wise, SVG is much worse than HTML / JavaScript a few years ago since there is no easy way to programatically work around Inkscape's, rsvg's and Firefox's frustrating incompatibilities.

Even just a good bi-directional PDF to SVG converter would be useful. Trying to load a PDF from pdflatex into Inkscape either crashes or ignores 99% of the math. That's not very useful for adding nice math to figures.
posted by autopilot at 6:13 AM on January 8, 2010

delmoi:
What I want to know is when are we getting OpenGL support?

WebGL is coming very soon. I've used it on development builds ( Firefox 3.7 ) and seen some incredible demos. Firefox will support it within the end of the year, I believe/hope.

If anyone is interested is seeing it contact me. Also, if there is any feature you ever want in your browser, join an open source project like Firefox and speak up. If your concerns are important enough and you ask well enough, your wish just may be granted.
posted by localhuman at 6:46 AM on January 8, 2010

The key thing about SVG is it is declarative. You write a big ol' XML document to describe the scene and the browser draws it. What's neat is the browser then builds a DOM for those graphics that you can manipulate with Javascript, attaching behaviors, modifying on the fly, loading new data into with DOM, etc. Just like the HTML model, but for vector graphics.

For some good examples of what you can do with SVG, check out the protovis visualization library. The bummer is that it doesn't work in IE. I think the SVG plugin won't work because you can't access the resulting stuff via Javascript. There's some home that svgweb will provide useful SVG emulation for IE.
posted by Nelson at 6:46 AM on January 8, 2010

What's neat is the browser then builds a DOM for those graphics that you can manipulate with Javascript, attaching behaviors, modifying on the fly, loading new data into with DOM, etc. Just like the HTML model, but for vector graphics.

Yep. My first post on the Blue here was about Euclid's Elements. At the time, I was also working on an SVG + CSS + Javascript version of Theorem 1.1. The cool part was that as you hovered over the line segment names, the actual segments would boldify. I think I had some other features in there too, but I forget what.

WebGL is coming very soon. I've used it on development builds ( Firefox 3.7 ) and seen some incredible demos. Firefox will support it within the end of the year, I believe/hope.

What. Oh but wait--that is an API and not some kind of 3D SVG. Cool, but...
posted by DU at 6:55 AM on January 8, 2010

This is potentially great news. I know, ideally, it would be wonderful if Microsoft just licensed Gecko or WebKit and put out their browser like that but that's not going to happen. The sooner they move to support standards the better, and the death of IE6 in particular would be a godsend.

The ability to use a native vector format in to display at least static "images" like logos for example and diagrammatic images at the very least is long overdue.

It would make my life and the life of many in web development, a lot nicer.
posted by juiceCake at 8:55 AM on January 8, 2010

Heh. You know whats's going to be awesome? When crosss browser support of rounded corners without any silly mucking about is possible.

Of course that'll be the moment designers stop putting them in photoshop comps and start doing traingular corners or making everything a hexagon or whatever it is that will be a pain in the ass todo then.
posted by Artw at 11:04 AM on January 8, 2010

effugas: Wow. Slowly but surely, HTML gets what Flash had in 2000.

I'm still waiting for Flash to get what HTML has had since 1992: standardized back/forward navigation, normal text selection, URLs that can refer to content more than zero clicks deep...
posted by Riki tiki at 12:13 PM on January 8, 2010 [4 favorites]

autopilot: Even just a good bi-directional PDF to SVG converter would be useful. Trying to load a PDF from pdflatex into Inkscape either crashes or ignores 99% of the math. That's not very useful for adding nice math to figures

I've occasionally had good luck going from PDF to Scribus and then saving as SVG from Scribus before opening it in Inkscape. But it has only helped in some specific cases, not in general.
posted by XMLicious at 12:43 PM on January 8, 2010

majick: ...a small, mostly obscure vector graphics format...

"Mostly obscure"? Did you read the rest of the thread? Just to sum up for you, SVG is the vector graphics format supported in all browsers except IE (at least when it comes to taking an image file and displaying it, I don't know if canvas is supported everywhere too), it's integrally supported in Linux such that even desktop icons are SVG, it's an export format from Adobe Illustrator and other commercial illustration tools and is the basis of Inkscape and a several other open source illustration tools. Besides that, basically any open source tool that deals in vector graphics you'll find - big projects like Scribus but also little command line tools and things - deals in SVG, often even when they don't output PostScript. Oh, and all of Wikipedia uses it, to the point that they pressure editors to convert their graphics from raster formats into SVG. So not so obscure.

Probably postscript is more widely used but besides that I'd think that most other vector graphics formats are restricted to just a few applications or within a specific domain or industry.
posted by XMLicious at 1:13 PM on January 8, 2010 [1 favorite]

When Microsoft "cares" about something, you should go count the silverware.

This.
posted by Blazecock Pileon at 1:21 PM on January 8, 2010

I think it's a political decision for MSFT. It's known that there's zero love for canvas within MSFT, so throwing their weight behind SVG means they're setting themselves up against it... SVG is going to be out of the spec and canvas will be in.

If a hate-on for canvas is what it takes to get MS to support SVG, I'm OK with that. If the support is thorough, mostly compliant, and performs well, there will all but certainly be a canvas shim on top of it, just as there is on top of VML.

Of course, it's far from a foregone conclusion that it will be thorough, mostly compliant, and perform well. In fact, I think it's much more likely it'll be designed and implemented in such a way as to draw developers toward Silverlight.
posted by weston at 2:12 PM on January 8, 2010 [1 favorite]

I'm still waiting for Flash to get what HTML has had since 1992: standardized back/forward navigation, normal text selection, URLs that can refer to content more than zero clicks deep...

To be fair, Flash has had all these things for a while now. Text selection is simply a matter of the developer setting the selectable property to "true." URL back/forward can be solved by using #anchor tags, which can even be masked from the user completely by combining anchors with Apache's mod_rewrite. Of course, if the person developing the site doesn't know about these things (and truth-be-told, that's probably a big percentage) then yeah, it's pretty easy to make Flash suck. But the visualizations stuff? That's fairly old-hat for Flash.

But Adobe really doesn't make it easy for you to be a Flash Champion with their ugly-as-sin ActionScript API, though.

Random AS3 gripes that nobody asked for:

• CONSISTENCY, dammit! How do you go about setting an object's property? Let's see, there's…
  • object.name = value
  • object.setProperty("name", value)
  • object.setName(value)
  • object.extraUnguessableTextName = value
  ASSHOLES.


• Number is an Object. Great. So what's the value of an uninitialized Number? NULL? No, no that would make too much fucking sense, wouldn't it? No, it's NaN (not-a-number). Great! So how do you test if something is NaN?
  
  How about…
  if (x == NaN) ... do stuff
  
  NOPE! Why not? Because in AS3...
  NaN == NaN (FALSE, motherfucker!)
  
  No, to test for an uninitialized Number object, you must use isNaN(number).


• And don't even get me started on the abomination known as Flex.

posted by Civil_Disobedient at 4:08 PM on January 8, 2010 [1 favorite]

and the death of IE6 in particular would be a godsend

Well - in the Microsoft "SharePoint" world, the official *current* word is that IE6 will NOT be supported in SharePoint 2010 (due in June) - this is big news for corporate environments - they will have to upgrade to a newer version...

Below is the official quote, from the product-team:

To ensure the best possible experience across multiple browsers we’re focusing our SharePoint 2010 engineering efforts on targeting standards based browsers (XHTML 1.0 compliant) including Internet Explorer 7, Internet Explorer 8 and Firefox 3.x. running on Windows Operating Systems. In addition we’re planning on an increased level of compatibility with Firefox 3.x and Safari 3.x on non-Windows Operating Systems. Due to this focus Internet Explorer 6 will not be a supported browser for SharePoint Server 2010.

Hopefully there won't be any last-minute changes of heart...
posted by jkaczor at 5:12 PM on January 8, 2010 [1 favorite]

Flash's big problem is that it handles text really, really terribly.

It's slow, it's blurry, it doesn't scroll well. You always know you're dealing with a Flash text interface and its never a good thing.

This, more than anything else, more even than back/forward, stopped Flash from replacing HTML in most contexts. In an alternate universe, people would have gone to Flash for text-driven websites just to avoid the IE6 compat problem.
posted by effugas at 3:24 AM on January 9, 2010

jkaczor - Hmm. Of course corporate enviromnts standardised on IE6 might take a while to upgrade to a new version of Sharepoint...

And then theres the compnaies that chose to invest in big freaky custom intranets that are IE6 dependent.
posted by Artw at 8:52 AM on January 9, 2010

Flash's big problem is that it handles text really, really terribly.

Again, almost always a product of poor implementation and not Flash specifically. Flash's native support of TrueType (and native selective font map embedding) puts it leaps and bounds ahead of straight HTML/CSS. But it's true, you need to know what you're doing. Developers who are not aware of the various language options are bound to produce teh suck.

And the scrolling problems? I've seen Flash sites that handle scrolling text beautifully. I've also seen exactly what you describe. The one critical element? How much Adobe Kool-Ade had the developer drunk?

• Teetotaler: no mx.* imports, no Adobe built-in components (fl.*) Result: Fast scrolling of huge lists without requiring a Core2 Duo
• Adobeholic: Entire site in Flex, heavy usage of Spark-themed components Result: Slow scrolling, system-hanging, slurred speech, at least one black eye, etc.

Friends don't let friends trust Adobe.
posted by Civil_Disobedient at 7:19 AM on January 10, 2010

So what you're saying is if I study really hard, I can learn to program Flash well enough to render a chunk of text as well as the default HTML rendering in a web browser?

I kid, I kid. But seriously, if you could point to an example of a Flash chunk of text that is anti-aliased well, with reasonable scrollbars, I'd like to see it. "Well" to me means anti-aliased but non-fuzzy. I'd prefer subpixel rendering but I'm guessing that's a non-starter, so I'll settle for vertical lines that are properly hinted and rendered sharply. I've never understood how Adobe, of all people, could get font rendering so wrong in Flash.
posted by Nelson at 9:01 AM on January 10, 2010

Your missing the point - it can be text that you get to by using a really over the top navigation system!

...I kid, I kid. But I have seen too many sites where flash is basically used to make the "chrome" of the site really, um, flashy, and then when you get down to actual content it's just a few paragraphs grabbed from an XML file that no-one really cares much about or has put much effort into.
posted by Artw at 10:08 AM on January 10, 2010

Sorry for the delay Artw - wasn't monitoring this thread, but you mention:

Hmm. Of course corporate enviromnts standardised on IE6 might take a while to upgrade to a new version of Sharepoint...

And then theres the compnaies that chose to invest in big freaky custom intranets that are IE6 dependent.

Yes - but they are slowly dragging their heels into the future. Actually, surprisingly the release of Windows 7 will make this much more viable. Nearly every large corporate shop that I know in my local market had skipped Vista completely... But... they ALL have plans for Windows 7, because of... "XP Mode"

They can then maintain their old IE6 web applications "side-by-side" with newer technologies, but access IE6-specific websites and older software within a virtual version of XP.

(Of course - many will say this has been possible using VirtualPC or vmWare for years... but don't forget the license costs... You have to license the host, plus the guest(s).... Well... AFAIK "XP Mode" licensing is included in versions of Windows 7 that support it)
posted by jkaczor at 8:56 PM on January 19, 2010