manipulate .svg file using javascript

Question

This is my first time working with SVG files and I wasn't able to google the answer for this question. I have a .svg illustration created from Adobe Illustrator. I want to load this image into a web page and be able to manipulate it with javascript. Is there a javascript library that allows me to do this? The library has to work on current mobile devices. Fantasy code that illustrates what I'm trying to do:

<img src="pic.svg" id="pic"/>
$('#pic').rotate('90')
$('#pic').scale('200%')
$('#pic').move(x, y)

I know you can manipulate DOM elements like this using javascript, but will the svg image be scaled without distortion? Also, I think SVG has other fancy transformations that javascript doesn't normally support. Ideally, I'd want to use those too.

Transformations in SVG is an extremely challanging entry point for beginning SVG's introduction to its DOM...Yes, transformations are fully supported, with no distortion. — Francis Hemsher
– Francis Hemsher, Commented Feb 12, 2014 at 3:44
"Is there a javascript library that allows me to do this?" - raphaeljs.com — Phil
– Phil, Commented Feb 12, 2014 at 5:29
@Phil Rapahel is not suited for manipulation of existing SVG graphics, you'd have to generate the graphics with Raphael. I'd rather suggest Snap.svg, or Vanilla JS. — Thomas W
– Thomas W, Commented Feb 12, 2014 at 6:11

Community · Accepted Answer · 2017-05-23 12:01:34Z

3

If you incorporate your SVG graphics with <img>, you'll be able to do exactly the same stuff as with any other image format - no more and no less. (The only benefit might be that you can change width/height without losing crispness.)

If you want to transform or otherwise change any elements of the SVG itself, it's a good idea to make the SVG inline. Maybe this answer helps. If your SVG was generated by Illustrator, cleaning the SVG might drastically decrease the file size and make it more friendly for JavaScript manipulation.

If you stick with <img>, you can still use CSS3 transforms (see the specs for an exhaustive description).

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Feb 12, 2014 at 6:34

Thomas W

15.5k6 gold badges53 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

stackOverlord Over a year ago

I didn't know you could just paste svg into html like that. Thanks. I made a fiddle to try moving my svg with svg.js: jsfiddle.net/b58M5 but for some reason it won't work. Says "Unexpected token ILLEGAL". Any ideas?

Thomas W Over a year ago

What exactly are you trying to achieve? Do you want to move the entire image around? Than you can use the <img> element rather than inline SVG, make it position:absolute and position it with left and top CSS properties. No special SVG stuff required. Do you want the movement to be animated?

stackOverlord Over a year ago

I'm trying to make an animated game. The fiddle is merely a toy example to see if the svg library will work on mobile. I will be receiving illustrations from an artist who outputs svg, and I will be animating and filling the components myself.

stackOverlord Over a year ago

snap.svg does what I want: stackoverflow.com/questions/21404246/… . Thanks for the suggestion.

Thomas W Over a year ago

Very good! I have more sympathies for Snap.svg anyways. Its method names follow the standard SVG DOM API as well as standard event names etc. more closely, which to me personally feels more transparent as it tells me more about what the library actually does with with the SVG under the hood. And you can't really go wrong with the successor of good old Raphael. For learning how to manipulate existing SVG, I'd suggest looking at some examples like the Snap crocodile.

Collectives™ on Stack Overflow

manipulate .svg file using javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related