Lightweight JS library for SVG manipulation?

Post about projects that use Inkscape for web design.
inkscapeforum
Posts: 8
Joined: Tue Nov 10, 2015 3:43 pm

Lightweight JS library for SVG manipulation?

Postby inkscapeforum » Tue Nov 10, 2015 3:46 pm

What is a good JS library for manipulating SVG?

I'm doing something very simple, along the lines of an SVG/JS version of this: https://www.eff.org/pages/tor-and-https

I wouldn't be drawing an SVG from scratch via JS. Rather, an SVG that's already been drawn would change when an user presses some buttons.

I asked this earlier today at inkscape freenode channel.

On the freenode channel, they mentioned d3 and raphael. They're good
but I think they're "too much" for what I'm doing at the moment.

On freenode, they also mentioned svgjs.com. It looks good :-)

Does anyone have more suggestions? :-)

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Lightweight JS library for SVG manipulation?

Postby brynn » Tue Nov 10, 2015 8:44 pm

How about Snap.svg? I think is supposed to be simpler. Here are some tutorials:

http://goinkscape.com/how-to-animate-ic ... -snap-svg/
http://goinkscape.com/animating-a-more- ... -snap-svg/
http://goinkscape.com/how-to-create-a-w ... -inkscape/
http://goinkscape.com/create-a-playable ... -inkscape/

There are some other simple ways to animate Inkscape drawings or SVG, besides using a JS library. If you're interested, overview here: https://inkscape.org/en/learn/animation/ I've used XIA briefly, and found it fairly easy. I'm not very tech oriented, and would find a JS library intimidating. But XIA is approachable for me (result is HTML5)

v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: Lightweight JS library for SVG manipulation?

Postby v1nce » Tue Nov 10, 2015 10:23 pm

Use no additional javascript library at all ?

http://www.petercollingridge.co.uk/data ... ontrol-svg

inkscapeforum
Posts: 8
Joined: Tue Nov 10, 2015 3:43 pm

Re: Lightweight JS library for SVG manipulation?

Postby inkscapeforum » Wed Nov 11, 2015 3:37 am

Thanks a lot brynn and v1nce for your suggestions :-)

stephenls
Posts: 2
Joined: Wed Nov 11, 2015 8:50 pm

Re: Lightweight JS library for SVG manipulation?

Postby stephenls » Wed Nov 11, 2015 9:10 pm

Note re:Snap.svg. It's an excellent library, and I've just started playing with it (you can morph with it!! :D ), but it's minimally documented (the API fully is documented, but it's very thin on examples). If you end up having trouble making things work, check out Raphael.js. This is another library written by the same author, and Snap.svg is largely based on it. A great deal can be learned from the examples provided for Raphael.

inkscapeforum
Posts: 8
Joined: Tue Nov 10, 2015 3:43 pm

Re: Lightweight JS library for SVG manipulation?

Postby inkscapeforum » Tue Dec 15, 2015 3:57 am

FWIW Blaze talk about "SVG support out of the box", cf this example from their docs... http://codepen.io/imslavko/pen/uwiDF?editors=100

Perhaps it could be another option?

Blaze = https://meteor.github.io/blaze/

aXiEd
Posts: 2
Joined: Mon Dec 28, 2015 7:09 am

Re: Lightweight JS library for SVG manipulation?

Postby aXiEd » Mon Dec 28, 2015 7:14 am

brynn wrote:How about Snap.svg? http://bigmall.ge - gancxadebebi I think is supposed to be simpler. Here are some tutorials:

http://goinkscape.com/how-to-animate-ic ... -snap-svg/
http://goinkscape.com/animating-a-more- ... -snap-svg/
http://goinkscape.com/how-to-create-a-w ... -inkscape/
http://goinkscape.com/create-a-playable ... -inkscape/

There are some other simple ways to animate Inkscape drawings or SVG, besides using a JS library. If you're interested, overview here: https://inkscape.org/en/learn/animation/ I've used XIA briefly, and found it fairly easy. I'm not very tech oriented, and would find a JS library intimidating. But XIA is approachable for me (result is HTML5)

Hello try do this. 4) http://goinkscape.com/create-a-playable ... -inkscape/
There are some other simple ways to animate Inkscape drawings or SVG, besides using a JS library. If you're interested, overview here: https://inkscape.org/en/learn/animation/

+1


Return to “Inkscape & the Web”