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?

Incur

How does Flash allow to use SVG? The best you can do is to write an incomplete emulator of SVG using Flash. The best attempt so far is code.google.com/p/svgweb but it is not there yet too. – Disoperation

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

Lenticular

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.

Gluttony

Unfortunately it doesn't work in IE8(only version of IE I tested it on), but it definitely had the most impressive demo I have ever seen! – Couchman

Answer 3

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

Also check the Canvas element reference.

Krissie

Answer 4

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.

Disoperation

Answer 5

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.

Trotskyism

does it work on browsers that do not support svg? do you just say goog.createGraphics and it decides whether to use Canvas, Svg or VML? – Mart

@Evgeny, yes - it uses VML for IE with browser auto-detect. – Trotskyism

Answer 6

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

Expound

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

Guido