Any efficient methods for transfering SVG's to Raphael/Javascript?

[Tgia]

I was wondering if anyone had any advice for automating the process of
transferring SVG data to Raphael-Javascript. A script that extracts
style and path data into the Raphael-Javascript format?

Tgia

[charles thomas]

I would be very interested in this. Certainly in the mean time it would be good if we had more information on how you could get stuff from Inkscape. The most recent thing I did was get an open source/freely available/no licence necessary standard world map dot SVG outline off the web. I loaded it in Inkscape and used the "simplify path" facility. In the saved SVG i put the simplified path into the Raphael "path" command.   At the moment I have heard nothing that handles the xml/svg output from Inkscape (I'm all ears!) --- On Mon, 5/11/09, Tgia <Tgia...@gmail.com> wrote:

The new Internet Explorer® 8 - Faster, safer, easier. Optimized for Yahoo! Get it Now for Free!

[Rik]

On May 12, 4:24 pm, charles thomas <charles...@yahoo.com> wrote:
> I would be very interested in this. Certainly in the mean time it would be good if we had more information on how you could get stuff from Inkscape.
> The most recent thing I did was get an open source/freely available/no licence necessary standard world map dot SVG outline off the web. I loaded it in Inkscape and used the "simplify path" facility. In the saved SVG i put the simplified path into the Raphael "path" command.
>  
> At the moment I have heard nothing that handles the xml/svg output from Inkscape (I'm all ears!)

Erm, I can load almost everything Inkscape outputs as SVG in Opera,
Konqueror and Firefox? Or do you mean converting it to code
understandable by javascript?

Converting an SVG to Raphael-code would be quite a considerable effort
I think, as it is it only provides a subset of functionality, and
tries very hard to make VML & SVG to do the same thing (which doesn't
always succeed, I'm working on a kind of user-editable canvas right
now, and flipping + rotating + positioning images wreaks havoc, I
think I'm gonna try to rewrite a portion of raphael to use matrix
transformations in VML for rotating & position-fixes rather then css
rotation, unless Dmitry has already tried and it fails for some reason
I'm only going to see further down the line?).

For the current limited subset only it could be doable, but probably
as a run-once-before putting it online I'd think. Not something one
would attempt with client-sided javascript. In such a case, I'd
probably rather create static SVG & VML, and load either the one or
the other based on some feature-check with javascript, bypassing
Raphael altogether for better performance in the browser itself
(possibly adding events to nodes / actions later). Something like
http://vectorconverter.sourceforge.net/ seems to do that, although I
haven't tried it yet.
--
Grtz,

Rik

[Tobia Giachetti]

Wonderful, this is great feedback. 

One thing I've been messing around with is with a jquery request. Writing a script that finds all paths and styles from the SVG (XML) and drops them in the Raphael path-drawing format...

Thanks again for the feedback. Will report back

Tgia

2009/5/12 Rik <r...@strongdesign.nl>

[Tobia Giachetti]

@Charles Thomas. Inkscape has a "edit xml" option under the "edit" tab. This shows you all of the path data in a tree. So you can cut and paste the path data. 

My problem is automating the transfer between SVG syntax to Raphael-Javascipt syntax.

Tgia

[charles thomas]

Tgia thanks, I have not used that. I would be interested in hearing more details. I deal with PHP on the server these days and am not 100% certain about the setup of the tool you are aiming to deliver. Would you be aiming at something where you upload an SVG file to the server and then it delivers the syntax which is readily available to the user to paste where they want it? --- On Tue, 5/12/09, Tobia Giachetti <tgia...@gmail.com> wrote:

Yahoo! Canada Toolbar : Search from anywhere on the web and bookmark your favourite sites. Download it now!

[etluhcSS]

I have been experimenting with illustrator SVG files and I have found
that if you strip off the XML header and document type data leaving
only the SVG node and child path nodes you can programmatically import
SVG files. Below is some code I have been working with the style
information doesn't translate yet because raphael is expecting an
object type, but it does pull in SVG1.1 path data correctly.



var loadSVGFile = function(uri)
{
var svgItems=new Array();

try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e)
{
alert(e.message);
return;
}
xmlDoc.async=false;
xmlDoc.preserveWhiteSpace=true;
xmlDoc.load(uri);

if (window.ActiveXObject)
{
strPath = '/svg/path';
paths = xmlDoc.selectNodes(strPath);
}
else
{
paths = xmlDoc.getElementsByTagName("path");
}

vars=new Array();
for (var i=0;i < paths.length; i++)
{
vars['path']=paths[i].getAttribute("d");
if(paths[i].getAttribute("style"))
{
vars['style'] =paths[i].getAttribute("style")
}
else
{
vars['style'] = "";
}

TsvgItem=new svgItem(vars);
svgItems.push(TsvgItem);

};


function svgItem(vars)
{
this.style=vars['style'];
this.path=vars['path'];
}
svgItem.prototype.style;
svgItem.prototype.path;


function renderSVG(svgItems)
{
paper = Raphael("canvas", 640, 480);
paper.path({stroke: "#fff"},svgItems[0].path);
for (var i=1;i < svgItems.length ; i++)
{
paper.path({stroke: "#000"},svgItems[i].path);
}
}