Bookmark with del.icio.us submit A%20Quick%20svg2vml%20Example%3A%20Gradients digg.com reddit

A Quick svg2vml Example: Gradients

A couple weeks ago I mentioned the first release of svg2vml, a lightweight library that enables cross platform, JavaScript-driven vector graphics. Here's a quick example where I use svg2vml to create Digg style gradient buttons:

If you're reading from a feed reader that doesn't embed iframes, you'll need to click through to see the example.

Check out the frame source for full details. Notice that the button itself is an HTML DIV and that we use CSS and HTML elements to define and position our text. So it's possible to mix HTML and vector graphics as you see fit.

We're just scratching the surface. svg2vml can do all kinds of cool stuff. Have fun!

Comments

Looks good. It doesn't work in Safari, though.

Indeed it does not :(. I believe we're still waiting on support for inline SVG in WebKit. Any ideas when that might pop?

Hi Kyle,

SVG2VML sounds nice. Still, I've got several questions: what is the project momentum? Is there any chance a larger subset of SVG gets supported? Also, as far as I can see: you are scripting the SVG. But authoring SVG tools such as Inkscape output a SVG XML file. So you'll need to turn it back into a script, right? Any way to make this easier? What about using http://goog-ajaxslt.sourceforge.net/
to turn SVG into VML?

Finally I think such an abstraction level is very useful. I'm a strong believer in the desktop on the web. Such vectorial tool is highly required to fill the gap between web clients and desktop rendering lib.

Raphael, Good questions. Lorien and I wrote svg2vml in the fall for a prototype we were working on. We implemented only the subset of SVG that we needed for our project. We thought it might be useful to others, so we opened it up. I expect that we'll add features as we need and in response to suggestions.

The largest missing features are support for paths and full support for matrix transforms (I think we only support translations right now).

svg2vml only supports SVG defined in JavaScript. I think this is also the case for dojo2D(?). Mark Finkle has a library for IE that converts static xml-defined SVG to VML using IE's HTC behaviors. No doubt, we're solving similar problems and should really get together on this stuff.

I'll give some thought to your comments about integration with static SVG editors. I think you're onto something.

Thanks for the thoughtful comments. If you have a specific applications in mind, let us know. It's a real help to understand how others are using this stuff. Contributions are always welcome!

Hi Kyle,

have you looked to MxGraph?
see:
http://www.mxgraph.com/demo/mxgraph/editors/diagrameditor.html
and:
http://www.mxgraph.com/demo/mxgraph/editors/workflow-demo.html

I worked a bit with those guys from JGraph (for the Swing graph lib though).

They are working on a very similar subject too (VML/SVG hybrid graph lib). Still, it's not open source yet as far as I understood. Not to sure about how you could team... But they are both competent and friendly.

But what I liked about JSViz, is the clear license, the small lib size and the integrated layouting. MxGraph rather focus on complex diagramm edition.

Now, my own site, http://www.livetribune.com, I use JSVisz and it's almost ready for production. Give it a try whenever you get time. Of course, if I see anything I can improve for JSViz, I'll contribute it back.

Cheers.

Raphaël.

PS: applications I see for SVG2VML (aside from diagramming), is the ability to use SVG instead of raster graphics to make web pages look richer while being actually smaller, I mean normal SVG use, but finally cross browser.

Post a Comment

(optional)
(optional)