1

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??

Improve this question
6
  • 2
    might have better luck with that question on SO. Not really a UX question.
    – Assaf Lavie
    Commented Oct 14, 2011 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 ♦
    Commented Oct 14, 2011 at 17:14
  • my belief is that SVG is the RIGHT way for creating custom user controls.
    – foreyez
    Commented Oct 14, 2011 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
    Commented Oct 14, 2011 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.
    – Zelda
    Commented Oct 14, 2011 at 22:49

3 Answers 3

Reset to default
7

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.

Improve this answer
5
  • 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.
    – Zelda
    Commented Oct 14, 2011 at 16:14
  • yes, I was talking about making buttons, menus, and other custom user controls, entirely in SVG
    – foreyez
    Commented Oct 14, 2011 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
    Commented Oct 14, 2011 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
    Commented Oct 14, 2011 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
    Commented Oct 14, 2011 at 18:01
0

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.

Improve this answer
-1

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.

example

http://square.github.com/crossfilter/

Improve this answer

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