0

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.

stackOverlord
  • 5,342
  • 6
  • 28
  • 29
  • 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 Feb 12 '14 at 03:44
  • *"Is there a javascript library that allows me to do this?"* - http://raphaeljs.com/ – Phil Feb 12 '14 at 05:29
  • 1
    @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](http://snapsvg.io/), or [Vanilla JS](http://vanilla-js.com/). – Thomas W Feb 12 '14 at 06:11
  • @ThomasW Ah, fair point. – Phil Feb 12 '14 at 22:59

1 Answers1

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

Community
  • 1
  • 1
Thomas W
  • 14,757
  • 6
  • 48
  • 67
  • 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: http://jsfiddle.net/b58M5/ but for some reason it won't work. Says "Unexpected token ILLEGAL". Any ideas? – stackOverlord Feb 12 '14 at 19:12
  • What exactly are you trying to achieve? Do you want to move the entire image around? Than you can use the `` 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? – Thomas W Feb 12 '14 at 20:47
  • 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 Feb 12 '14 at 20:57
  • snap.svg does what I want: http://stackoverflow.com/questions/21404246/snap-svg-moving-a-loaded-element-around . Thanks for the suggestion. – stackOverlord Feb 12 '14 at 22:22
  • 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](http://snapsvg.io/assets/demos/snap-mascot/crocodile-1.html). – Thomas W Feb 12 '14 at 22:35