Develop Reference

manipulate .svg file using javascript

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.

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

Scripting Adobe Illustrator. How to apply an effect?

My script should select some items and apply Effect->3D->Extrude&bevel to them.
Which objects and methods should be used?
I use JavaScript in AI CS6.
Thanks.
--
Update: I need to set the values for effect parameters (angles, depth etc.) in script.
--
Update 2: Probably it's possible to patch an AI file with needed values for the GraphicStyle, and then open it and apply the style where needed. But I'd like to know if there is less dirty solution.

Using documents[0].selection[0].reflect.properties in ExtendScript toolkit to find out what properties basic paths have, I don’t see any way to set this effect directly.
When I search the JavaScript Reference for Illustrator, the only mention I see of appearance is when it talks about graphic styles.
So what I tried was drawing two rectangles, applying the 3D effect to one of them, and saving it as a new graphic style:
Then in the script, you can select the other rectangle and then apply the graphic style with
documents[0].graphicStyles[6].applyTo(documents[0].selection[0])
Unfortunately, the documentation does say
Scripts cannot create new graphic styles.
One thing that might be work would be to distribute a document with the script that has all the graphic styles you might want to apply, and then apply them to objects in the target document…

How to make svg scrollable

Hello all I am working on javascript jquery and svg.I want to ask a question that is it possible to make my svg:g element scrollable.
Like I have one div containing an svg element and that svg intern contains many svg:g elements
I want to make one of my g scrollable.
I have read about
scroll.js but i can not use it so is there any other library in jqquery or javascript which provides scrolling support in svg
or any other wany to do it like make a dive inside svg etc
Any help will be appreciated
thanks

Try this: http://polymaps.org/
or this: http://wayfarerweb.com/jquery/plugins/mapbox/

Using HTML instead of SVG within d3.js

I'm building a graph in d3.js and appending almost 30-60 circles along with 2 lines with each refresh. I find that this is slowing down in the browser, causing significant performance issues.
Would it be better to append html and use images within my css instead of drawing circles?
Also, how would I go about doing this?

I have a few examples of using D3.js with pure HTML here:
http://phrogz.net/js/d3-playground/#StockPrice_HTML
http://phrogz.net/js/d3-playground/#BoxMullerDistribution_HTML
http://phrogz.net/js/d3-playground/#MultiBars_HTML
As you can see from the code, you do this by just…doing it. Create the HTML elements you want by name and set either the attributes or CSS properties on them.
For example, to create an image of a circle you might do:
var imgs = d3.select("body").selectAll("img").data(myData);
imgs.enter().append("img").attr("src", "circle.png");
imgs.exit().remove();
As for whether or not this will be faster than SVG…probably a little faster, but not by much. I suspect that either your computer/browser is slow, or you may be doing something wrong in your code (e.g. accidentally destroying and re-creating certain elements). Without seeing an example of your problem, however, we can only guess.

update SVG dynamically

I have some objects inside of svg that can be clicked by user.
Is there any way to:
- send information about object (id) that was clicked by user to the 'main html document'?
- draw from outside document in the svg file.
Probably, my description is unclear,... I want to implement something like this:
user click on any object inside of svg-image;
main document will receive id of the clicked object and:
display some information about that object;
draw additional object inside of the svg-image.
Questions: how to communication from svg to document and from document to svg?
Thanks a lot, any thoughts are welcome!
P.S. Probably SVG is not the best way do that? What is better then?
EDIT: I saw recommendation regarding use of Raphael,.. but I would like to see 'native' options. (For now I'm analyzing Raphaels implementation to see that, but don't think it is doing exactly what I need).

See this example for how to get the DOM of a referenced svg from the parent document.
And here's an example of how you can call from an svg file to the parent document.
SVG is very well suited for doing what you describe.

I'd suggest using a library like Raphaël to support your SVG building. You can attach events to DOM objects that you can get through the node property of an image component.

Raphaël.js is indeed a good solution if you want to stick to SVG / VML. Now you can use canvas (new HTML 5 functionality) as well. Canvas is a new html tag (that can have id, events, ...) that allows you to draw free shapes a bit like SVG does. IE doesn't support canvas natively, of course, and you will need "excanvas.js" (this one or another, but this one works pretty well...) to make it IE compatible.
Only one restriction I know of regarding canvas: using background images makes IE be very slow. I would use Raphaël.js if it was something you'd consider doing.
Good luck

Nobody suggested, but accidentally I've found that svg is already supported by jQuery!
http://plugins.jquery.com/project/svg
Probably that is not the best approach, but I will try to work with svg using jquery. And actually, that seems like reasonable