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

HTML Animated Sequences WITHOUT canvas

I'm currently planning a web project that has a few animated sequences that need to run on the site.
I need the site to be as cross browser compatible as possible (duh!) and wanted to get fellow developers thoughts on different options.
Canvas is not an option mainly because of IE. IE9+ only support isn't good enough, even though the 'progression' of browser stats for IE is near on laughable
http://www.w3schools.com/browsers/browsers_stats.asp (13% for IE in March 2013 (AND IT COMES AS DEFAULT WITH ALL WINDOWS MACHINES) going slightly off topic...
I was planning on preloading a series of animated gifs for different stages of animations for example 'run', 'walk', 'fly' and then swap the src of an img tag as and when required. I haven't tested anything like this yet, but i invisage delays even with preloaded images (though javascript http://www.preloadjs.com )
although im not too keen on the quality of animated GIFS. taking this idea a little further, using the same method but with each from as a seperate PNG? is that feasible?
Or could a DOM element with a spritesheet attached as the background image work, changing the background position on each step?
Any thoughts or examples ;) would be very helpful! :)
Cheers,
Rory!
---EDIT
im also open to different javascript libraries.. although currently included in my project are jQuery and Rapheal

jQuery animate is going to be your best bet. Buf you have time to generate a sprite sheet to show different animation stages, then you may have enough time to look into a good jquery plugin like gameQuery, which allows you animate sprite sheet items.

Cross-browser solution to work with SVG files?

What cross-browser JavaScript SVG library will allow me to display and interact with pre-made SVG images.
I know of these libraries:
Raphaël: I'm currently using this along with a SVG loading plugin. But that plugin does not support Inkscape or Adobe Illustrator SVGs (i.e. most SVGs).
cang: This library looks promising, but it requires <canvas> support, which IE doesn't have natively.
svgweb: Another more-promising library. It requires Flash, but most IE users have Flash.
jQuery SVG: It seems to be able to load SVG images, but development seems to have died. And it requires me to use a modified version of jQuery 1.3.
I'm basically trying to make chunks of arbitrary images "selectable".
Any help would be greatly appreciated.

Raphaël does support importing of Illustrator SVGs, through the use of this great plugin. All you have to do is save your ai file as an SVG, open it up using a text editor, copy out the code and import it with the plugin. Works great, except : only supports "path" objects, no text, no gradients, no shadows...

I'm using http://excanvas.sourceforge.net/ for Canvas support in IE and Cang for SVG suport using Canvas.

What you could do is use a combo of cang and svgweb, you could check to see if the browser allows canvases, and if so, load cang and use it. Otherwise check if they have flash, and if so, use svgweb. If they have neither, then tell them to upgrade their browser.
You could read http://ejohn.org/blog/future-proofing-javascript-libraries/ if you are unsure about javascript feature detection.

I'd be tempted to make use of Google Chrome Frame (an IE plug-in). This will save you maintaining two sets of code (one for IE users, another for regular browser users). Adding the following meta-tag to your page will enable SVG to render in IE (via GCF):
<meta http-equiv="X-UA-Compatible" content="chrome=1">
See here for instructions how to detect, and potentially prompt the user to install GCF.

The best solution I've found is to use Raphael along with this tool, which allows you to convert SVG files (generated by Illustrator, in my case) to Raphael code almost as-is. And since Raphael is IE6+ - you could easily be crossbrowsy with some effort on your part.
Here is my example of what can be achieved with a combination of these two things.

Misplaced SVG Path in raphael-svg-import

I'm trying to render these files http://registro.soveci.com/dom_izq.svg and http://registro.soveci.com/dom_der.svg with RaphaelJS and raphael-svg-import, but somehow a path appears misplaced on the screen. If you view it with a standard compliant browser, you can see the path being rendered right, so it must be a problem with raphael-svg-import.
Can you provide me some hints??? (I'm new to SVG)

I have been experimenting with SVG for a little bit now and it's a bit of a coincidence because I just finished playing with that plugin today.
The url to a demo I have there also contains zip files in the documentation so you could experiment with these in Inkscape or any SVG editor and see if you cannot configure them to something in your project.
For what ever reason this plugin "likes" some SVG's but not others so maybe you could adapt one of the SVGs in the zip and it will probably work.
The authors know the plugin does not always work but it is gradually improving and even now I think it's possible to write compatible SVG's if you tinker with them.
If you need a facility to convert certain SVG's just to javascript you could use this.

SVG drawing application with vector export

I want to create a drawing application where I can place text and images on a canvas. Those elements also need to be interactively manipulated. Eventually the resulting canvas has to be exported to a vector based PDF. An excellent contender for this functionality would be SVG.
However, this application also needs to be crossbrowser compatible. I've been browsing around for some time now and have seen a couple of solutions available. I found among others RaphaelJS and Google's SVGWeb for working with SVG.
Now for converting those SVG files to a PDF I'm not sure if for instance Batik will offer me what I am looking for.
Also, how would bitmap images be handled when converting the SVG to PDF?

Images within a PDF have to be part of the PDF. They can use any number of compression techniques (jpeg, fax, jbig2, zip, gif, a couple others), various bits per color, various colors per pixel, and so forth... but the pixels must be defined within that PDF.
I've used Batik myself. A little clunky in combination with iText (surprisingly large amount of code involved), but quite serviceable. The only thing that really bugged me was that it wouldn't draw text as text... Batik insists on drawing it as paths. They may have overcome this since I started using it a year or two ago. But that was kind of a deal breaker (HUGE pdf bloat) so we ended up rendering our text separately: PITA, potential z-order issues (that never came up for us), plus a couple subtle interal layout issues that didn't turn up till later.
Batik supports script, animation, and a variety of Other Things that don't really matter within the bounds of SVG->PDF conversion. There's at least one other Java SVG library out there that is much more compact(not as feature rich... half empty/half full), though I can't for the life of me remember the name at the moment. The name came up on the iText mailing list maybe a year ago? Don't recall exactly. Quite some time ago, and AFTER I got Batik working. Ah well.

Batik can convert svg to pdf, Inkscape or Adobe Illustrator can too AFAIK.

I think that Inkscape would be your best choice here, it mostly sticks to SVG 1.1 for the shapes it implements (using a few of its own properties, which you can get rid of if you save it as a plain SVG). For me, even when I save as an Inkscape SVG, it displays fine in browsers even with blurs, though it won't work in Internet Explorer. For that, there is no solution besides using an external tool such as (as you've already found) SVGWeb. Unfortunately, javascript support for SVG can differ between browsers, and there is no way to fix this.
As for PDF, I think that raster images are embedded if they are embedded within the SVG itself, or linked if the SVG's is linked. This is easy to do by going to Extensions > Images > select either Embed Images or Extract Images.

You can program a java applet with Processing. It's cross-browser, can export to pdf. Bitmap images would remain bitmap images embedded in the pdf.