Vector graphics in Javascript?

Question

One of the advantages of Flash/Flex is that you can use vector graphics (SVG), which is nice. I did a bit of searching around and came across this Javascript vector graphics library. It's pretty simple stuff but it got me thinking: is there any possibility of using vector graphics files such as SVG with Javascript/HTML or it just can't be done or done reasonably?

Answer 1

I've used Raphaël Javascript Library and it worked quite well. Currently the library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

Answer 2

I know this is a pretty old question, but in case anyone comes across this question, the most impressive vector graphics I've seen in JavaScript is Paper.js.

Hope that helps.

Answer 3

Give a look to Cake, Processing.js and jQuery SVG Integration Plugin.

Also check the Canvas element reference.

Answer 4

Check out Google Closure. The vector graphics support is very well-done, IMO. If you've worked with Java2D before, this should seem very familiar.

Answer 5

Take a look at dojox.gfx. I posted more wordy answer in Recommend javascript graphics tutorials going over available graphics options in browsers including 2D and 3D cases.

Answer 6

Check out WebCode app from PixelCut. It generates JS, SVG, HTML from vector drawings. http://www.webcodeapp.com

Answer 7

Just to add an additional answer. the creator of one of the popular vector js (Raphaël) joined Adobe and worked on this (http://snapsvg.io/) for several years.

although the last release is from 2017 its much more maintained and newer than other libraries mentioned here. hope this helps someone looking for svg vector graphics library in js.

if you are looking for a meteorjs build for snap you can get it here (https://atmospherejs.com/mirageglobe/snapsvgcdn) with

$ meteor add mirageglobe:snapsvgcdn