

How to work with Scalable Vector Graphics (SVG) in HTML 5 - PatriciaLopes
http://mrbool.com/how-to-work-with-scalable-vector-graphics-svg-in-html-5/25183

======
raganesh
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
Yes. We had SVG back in '02-'03 (the company I was at built a product on it).

------
kodisha
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...](http://www.quora.com/D3-JavaScript-library/Why-is-D3-so-slow-running-
on-Firefox)

~~~
gvalkov
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>

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

------
radarsat1
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.

------
jarek-foksa
"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.

------
hsmyers
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.

------
wslh
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!)

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

~~~
tagawa
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
you can get cross-platform compatability with svg using google's svgweb -
<http://code.google.com/p/svgweb/>

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

