Importing SVG into RaphaelJS

[xwisdom]

Hello,

Is it possible to import an SVG file into RaphaelJS? If not, are there
any plans to do this?

For example:

paper.importSVG('path/to/image.svg');
image = paper.getElementById('mysvg'); // get svg object by id
// code to animate image


PS I've noticed that SVG can be imported using BURSTEngine -
http://hyper-metrix.com/#Burst

[xwisdom]

[charles thomas]

Well the most it could extract, that would be immediately useful, would be the path defined in the SVG file being imported. Thats only been possible since a recent release of Raphael that supports SVG path syntax 100%. After that it would have to interpret attributes in the SVG file and convert them into the Raphael equivalent. It seems unlikely anyone would write the whole "import" capability except maybe a plugins for importing the path. --- On Sat, 10/17/09, xwisdom <xwi...@gmail.com> wrote:

Be smarter than spam. See how smart SpamGuard is at giving junk email the boot with the All-new Yahoo! Mail

[JesseFrye]

Use Illustrator to draw your file and then save as an SVG file.
At the Save As dialog box click Show code.
You can copy the coordinates and paste them into your JS code.
You will need to replace the "," (commas) with a space though.

On Oct 18, 4:33 pm, charles thomas <charles...@yahoo.com> wrote:
> Well the most it could extract, that would be immediately useful, would be the path defined in the SVG file being imported.
>
> Thats only been possible since a recent release of Raphael that supports SVG path syntax 100%.
>
> After that it would have to interpret attributes in the SVG file and convert them into the Raphael equivalent.
>
> It seems unlikely anyone would write the whole "import" capability except maybe a plugins for importing the path.
>

> --- On Sat, 10/17/09, xwisdom <xwis...@gmail.com> wrote:

>
> From: xwisdom <xwis...@gmail.com>
> Subject: Importing SVG into RaphaelJS
> To: "Raphaël" <raph...@googlegroups.com>
> Received: Saturday, October 17, 2009, 10:10 PM
>
> Hello,
>
> Is it possible to import an SVG file into RaphaelJS? If not, are there
> any plans to do this?
>
> For example:
>
> paper.importSVG('path/to/image.svg');
> image = paper.getElementById('mysvg'); // get svg object by id
> // code to animate image
>
> PS I've noticed that SVG can be imported using BURSTEngine -http://hyper-metrix.com/#Burst
>

>       __________________________________________________________________
> Looking for the perfect gift? Give the gift of Flickr!
>
> http://www.flickr.com/gift/

[Dmitry Baranovskiy]

> You will need to replace the "," (commas) with a space though.

Why?

[Wout.]

Soon I will have a full SCG to Raphaeljs available.
It is able to detect all object types and the polygon objects will
neatly converted to a raphael path.

I'm currently still working on the convertion of SVG groups to Raphael
sets.
I guess in a week or two I will release the code on Github.

[Josepssv]

Dojo Parser
http://aclindsay.com/svgparser/
Convert to Dojo 'dojox.gfx' format from SVG

[Josepssv]

SVG to dojox.gfx Convertor
http://sourceforge.net/projects/svgtodojoxgfx/
and forum
http://aclindsay.com/home/?p=18

[Josepssv]

Sencillo usando Mozilla Firefox, Chrome,.. pero no IExplorer, eso
parece complicado.
Implementé algo así
SVG to OPF (Onlypaths Format, JSON code format for SVG)
http://onlypaths.com/aaopblog/2009/2/26/index.htm
Es interesante tener un formato propio que use JSON como sugirió
Antimatter15, también para Raphaeljs

Wout puedo ayudar?

[Josepssv]

Wout, I collaborate
http://onlypaths.com/aaopblog/2009/2/26/index.htm
SVG to OPF (Onlypaths Format) JSON code
Onlypaths will Raphael

[Wout.]

@Josepssv

No pudo abrir el página de onlypaths.
Hablas inglés?

On 23 Oct, 21:53, Josepssv <josep....@gmail.com> wrote:
> Wout, I collaboratehttp://onlypaths.com/aaopblog/2009/2/26/index.htm

[Josepssv]

Wout:
Prefiero contestar en español.
Hay opción de traducir

Usar Firefox.
Documento SVG prohibido en IExplorer.

[Wout.]

No, estaba Safari.
El documento SVG esta demasiado grande por Safari creo.

Pero en Firefox lo puedo abrir.
Me parece un mejor solución que tengo ahora.

[Dmitry Baranovskiy]

Guys, you are not alone on this list. Please speak English or send
each other direct messages.

2009/10/28 Wout. <in...@qimmiq.net>:

--
Best regards,
Dmitry Baranovskiy
http://dmitry.baranovskiy.com

[cartographer]

@Josepssv:

It is still not clear to me how I can load the OPF data generated with
your converter object in Raphael.

when I do

var opfData = [{id:"svg2", type:"doc", left:0, top:0,
etc:"[...]"}]; // data generated by OPF converter (abbreviated)
var c = paper.path(opfData);

on the Raphael playground page(http://raphaeljs.com/playground.html),
I get the alert error "S[0] is not defined".

Any hints?

Franz

[Josepssv]

No, Cartographer
I will convert OPF to Raphaeljs
I work

[JesseFrye]

You're right. I must have had a syntax issue when I first started
playing with it. Commas seem fine right now.

On Oct 22, 11:34 pm, Dmitry Baranovskiy <dmitry.baranovs...@gmail.com>
wrote:

[Josepssv]

Completad SVG to OPF to Raphaeljs
http://onlypaths.com/aaopblog/2009/11/7/

Only paths, jeje

> > > >SVGto OPF (Onlypaths Format) JSON code
> > > > Onlypaths will Raphael

[Brother Erryn]

I submitted a post to do this, but it hasn't made it through
moderation (yet? ever?). It doesn't cover everything, but does quite a
lot. It also uses jQuery to make parts simpler. If you aren't
supporting IE, you can remove the parseXML function/reference and
change the $.get type from 'text' to 'xml':


function parseXML( xml ) {
if( window.ActiveXObject && window.GetObject ) {
var dom = new ActiveXObject( 'Microsoft.XMLDOM' );
dom.loadXML( xml );
return dom;
}
if( window.DOMParser )
return new DOMParser().parseFromString( xml, 'text/xml' );
throw new Error( 'No XML parser available' );
}
$(function(){
$.get('demo.svg', null, function(doc){ // or 'demo.svg'
doc = parseXML(doc);
var root = $(doc).find('svg')[0],
vb = root.getAttribute('viewBox'), dims = vb ? vb.split(' ') :
[0,0,root.getAttribute('width'),root.getAttribute('height')];

var img = Raphael(parseFloat(dims[0]), parseFloat(dims[1]),
parseFloat(dims[2]), parseFloat(dims[3]));

$(root).find('path').each(function(){
var node = this, path = img.path($(this).attr('d'));
$(['stroke-linejoin','stroke','stroke-miterlimit','stroke-
width','fill','stroke-linecap']).each(function(){
if($(node).attr(this.toString()))
path.attr(this, $(node).attr(this.toString()));
});

if($(node).attr('style')) {
var atts = $(node).attr('style').split(';');
for(var i=0;i<atts.length;i++) {
var bits = atts[i].split(':');
path.attr(bits[0],bits[1]);
}
}
/*path.scale(0.5, 0.5);
var box = path.getBBox(), x=box.x+box.width/2.0, y = box.y
+box.height/2.0;
path.translate(x*0.5-x, y*0.5-y);*/
});

}, 'text');
});


On Nov 10, 10:22 pm, Josepssv <josep....@gmail.com> wrote:
> Completad SVG to OPF to Raphaeljshttp://onlypaths.com/aaopblog/2009/11/7/