If you see flash and wpf/silverlight they both rely heavily on vectors for creating their user interfaces. That's because vectors are very easy to manipulate and animate.

I'm wondering if SVG has a potential in this area. Right now, there are not a lot of tools for animating/creating SVG user interfaces but do you think that in the future it will replace CSS as the de-facto standard for creating user interfaces for the web?

The nice thing about SVG is that you could potentially export an illustrator file into this format and you'd have a pretty slick user interface that is resolution independent. But I notice that most people create interfaces with CSS (rounded rect/gradient/etc.) but why not do it in SVG instead??

closed as off-topic by locationunknown, Shreyas Tripathy, Ken Mohnkern, maxathousand, Joel Tebbett May 24 at 18:40

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – locationunknown, Shreyas Tripathy, Ken Mohnkern, maxathousand, Joel Tebbett
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    might have better luck with that question on SO. Not really a UX question. – Assaf Lavie Oct 14 '11 at 17:13
  • 1
    You could probably use SVG for this in the same way that you can use a set of pliers as a hammer even though they aren't the right tool for the job. Rather use the right tool. – JohnGB Oct 14 '11 at 17:14
  • my belief is that SVG is the RIGHT way for creating custom user controls. – foreyez Oct 14 '11 at 17:16
  • what are you basing that belief on? I don't think export from Illustrator is enough to convince most web folks that it's the right option. – DA01 Oct 14 '11 at 17:45
  • 2
    Honestly the big deal about CSS3 is getting AWAY from needing to export and use images for buttons, SVG is very nice for image images but I think a great deal of web developers appreciate being able to style in purely CSS and still having gradients and rounded corners. Moving to SVG for simple buttons feels like a major step backward IMO, even if the buttons are resolution independent. – Ben Brocka Oct 14 '11 at 22:49

SVG is more of an image file format. It lacks all of the semantics and accessibility that HTML provides. So it's less of a 'vs' issue and more of a 'with' issue. SVG is going to be used more and more with the foundation HTML and CSS.

SVG can't replace what HTML and CSS does. It can maybe make a web page look different, but under the hood, you don't have what makes the web, the web.

Which is often the main detriment to relying too much on Flash as well.

But we will see a lot more done with SVG as well as HTML5's Canvas. A lot more will be done 'in-browser' rather than via plugins ala Flash and Silverlight.

  • 2
    In practicality I think the argument is more "SVG vs Flash," unless you're talking specifically about using SVG to make buttons/ect instead of styling an element with CSS and no images. – Ben Brocka Oct 14 '11 at 16:14
  • yes, I was talking about making buttons, menus, and other custom user controls, entirely in SVG – foreyez Oct 14 '11 at 17:12
  • 2
    also, SVG is NOT just an image file format. Please check out d3.js where they manipulate SVG with animations. See this in Chrome: mbostock.github.com/d3/ex/force.html – foreyez Oct 14 '11 at 17:14
  • That is a good example of how SVG and JS can be substituted for Flash. Still, that's a different realm than what HTML and CSS cover. – DA01 Oct 14 '11 at 17:44
  • I guess then we'd still have html and css for laying out the divs etc, and the SVG would just live inside the DIVs and provide advanced user interaction. gotcha. – foreyez Oct 14 '11 at 18:01

There are three big issues with using SVG over CSS3 for buttons and interface elements:

Firstly, SVG forces designers to maintain a set of image assets, away from the stylesheet. They have to be updated separately to site CSS with a dedicated, and often sluggish vector editor. This creates an awkward workflow.

Secondly, attributes of an SVG item can't be split across semantic classes. CSS lets me define meaningful classes, that each define just their relevant stylistic attributes, then apply them at will. That's a lot more convenient than manually designing each element.

Thirdly, CSS3 degrades gracefully. SVG doesn't. If you view SVGs in IE8 and below, you just get a broken image. You could maintain non-SVG versions for IE users, but that doubles the number of assets to maintain, increasing your workflow exponentially.


D3.js might help.

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.



Not the answer you're looking for? Browse other questions tagged or ask your own question.