How to work with Scalable Vector Graphics (SVG) in HTML 5

http://mrbool.com/how-to-work-with-scalable-vector-graphics-svg-in-html-5/25183

by PatriciaLopes • 14 years ago

30 15 14 years ago

hsmyers• 14 years ago

I read the article with some interest remembering what it used to take to work with SVG (the Adobe plug in---free, but still). Just for grins I copied one of the examples to my editor, EditPlus which uses whatever version of IE that you have installed on your system. To my very pleasant surprise, the example worked. This should open up a very large box of goodies of interest to me. I spend a lot of time working with chess and HTML. If this could simplify my code in any significant fashion then I'm all for. It will be interesting to explore.

raganesh2• 14 years ago

Has SVG not been around a lot longer than HTML5? The article says "This is a HTML5 tag to draw a vector graphics"

And pretty sophisticated JS libraries have been built to make use of this technology in web applications. The best IMHO is d3.js: http://d3js.org/

tptacek• 14 years ago

Yes. We had SVG back in '02-'03 (the company I was at built a product on it).

chc• 14 years ago

Canvas was around before HTML5 too (AFAIK, Apple invented it for Dashboard), but it's still generally classed as an HTML5 thing. Much of the role of HTML5 is standardizing all the disparate technologies that are already being used to make sites but which aren't really regulated by the HTML standard.

eragnew• 14 years ago

Wow, these are some great examples to work with. Thanks for this :)

wslh• 14 years ago

The last time I played with SVG (on January) it had a couple of ugly bugs like crashing Google Chrome with many nodesin a graph and leaving trails when moving an object (a Hello Kitty for my daughter!)

radarsat1• 14 years ago

Although in a lot of ways Canvas is easier to work with, SVG has some advantages for user interaction because it takes care of interaction logic for you. For instance, you can register a callback for clicking or hovering on complex shapes, whereas with Canvas you'd have to calculate the hit detection geometry yourself.

kodisha• 14 years ago

SVG is SLOW in Firefox. I mean really slow. I did some complex charts for genomic data, and while chrome was rendering it really smooth, in FF it was like slideshow.

According to link below [1], NYT ported d3 to be 90% canvas because of speed issues in FF.

[1] http://www.quora.com/D3-JavaScript-library/Why-is-D3-so-slow...

gvalkov• 14 years ago

I believe this site [1] is a great example of what you are saying (it was featured on hn earlier this week [2]). Firefox 14.1 performs really badly in comparison to Chromium 20.0 in this case.

[1] http://www.jasondavies.com/primos/

[2] http://news.ycombinator.com/item?id=4255738

raganesh2• 14 years ago

As long as CSS opacity is not explicitly specified for any SVG element, I have found FF is not very slower than Chrome/Safari. But the moment opacity attribute is added even for a single element (even if the value is specified as 1), FF really slows down.

So I tend not to use opacity in my JS rendered SVG especially if there are any animations.

BasDirks• 14 years ago

For those in the know: can you tell me/us how this is superior to working with just Raphael.js?

tagawa• 14 years ago

Personally, I don't think it is. For most use cases, Raphael is a better choice for its browser compatibility (namely IE up to 8) and approachable syntax.

Having said that, there are times when pure SVG is preferred, such as when JavaScript is not available (although SVG files can contain JS) or when you don't want the processing overhead of a library. For example, SVG is often used to render the UI graphics for navigation menus in TVs which until recently were very low powered.

Of course, it's also beneficial (IMO) to have a grasp of how the underlying language works even if you use it through a layer of abstraction. Overall, though, I'd use Raphael unless you have a reason not to.

EDIT: I forgot to add that knowledge of SVG is useful for editing images in a text editor, such as when you want fine-grained control or you want to manually remove some of the cruft that graphics software tends to add to files.

andrewcooke• 14 years ago

you can get cross-platform compatability with svg using google's svgweb - http://code.google.com/p/svgweb/

jarek-foksa• 14 years ago

"SVG Primer for Today's Browsers" has more detailed introduction: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html, you can skip SMIL section as it's probably going to be deprecated.

lambda• 14 years ago

Interesting that they decided to use JPEGs instead of SVG for the illustrations.

How to work with Scalable Vector Graphics (SVG) in HTML 5

Related Stories