An easy SVG 1.1 (Illustrator) to RaphaelJS conversion tool

[Quentin]

Hey, I'm new to RaphaelJS and started playing a bit with it until I
tried to export an Illustrator file...
I couldn't find anything to do so, so I write a little utility!

It might not be perfect yet but still, it's working pretty good with
the files I tested!
Here we go: http://toki-woki.net/p/SVG2RaphaelJS/

I noticed some SVGs downloaded straight out of the web don't work
perfectly, but opening them with Illustrator and re-exporting them to
SVG 1.1 fix them, so they can be digested by the tool...

Didn't try Inkscape, by the way.
If you find bugs and/or have suggestions, please drop'em!

[Lachlan Hardy]

Looks awesome, Quentin!

[Quentin]

I put up a demo page with (for the moment) a logo made in Illustrator,
exported to SVG 1.1 and digested by the tool...
Looking good. http://toki-woki.net/p/SVG2RaphaelJS/demo/

If someone finds a bug, please report it here!

On Sep 23, 1:27 am, Lachlan Hardy <lach...@lachstock.com.au> wrote:
> Looks awesome, Quentin!

[charles thomas]

Quentin I made a red circle SVG with Inkscape and dumped the SVG into your SVG2RaphaelJS tool. I cc'd you and included the SVG and the output for your inspection. The the way the output is derived is very efficient. I'm keeping the links together for the converter tools on one page. http://www.irunmywebsite.com/raphael/svgsource.php Would like to find a place on it for SVG2RaphaelJS Version 1.0 also. So, if your happy I would gladly add it. Regards Charles http://www.irunmywebsite.com --- On Wed, 9/22/10, Quentin <quen...@gmail.com> wrote:

-- You received this message because you are subscribed to the Google Groups "Raphaël" group. To post to this group, send an email to raph...@googlegroups.com. To unsubscribe from this group, send email to raphaeljs+unsub...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

[charles thomas]

Quentin Where you have Demo of Raphaël + SVG2RaphaelJS Maybe also put a link to the SVG it was generated from? Regards Charles http://www.irunmywebsite.com

--- On Thu, 9/23/10, Quentin <quen...@gmail.com> wrote:

From: Quentin <quen...@gmail.com> Subject: Re: An easy SVG 1.1 (Illustrator) to RaphaelJS conversion tool To: "Raphaël" <raph...@googlegroups.com>

[Quentin]

Yes!
I'll fix the tool thanks to your feedback and update the page...

Should be up today!
Thanks again.

On Sep 23, 3:14 pm, charles thomas <charles...@yahoo.com> wrote:
> Quentin
>
> Where you have
> Demo of Raphaël + SVG2RaphaelJS
>
> Maybe also put a link to the SVG it was generated from?
>

> Regards Charleshttp://www.irunmywebsite.com
>
> --- On Thu, 9/23/10, Quentin <quenti...@gmail.com> wrote:

>
> From: Quentin <quenti...@gmail.com>
> Subject: Re: An easy SVG 1.1 (Illustrator) to RaphaelJS conversion tool
> To: "Raphaël" <raph...@googlegroups.com>
> Received: Thursday, September 23, 2010, 12:35 AM
>
> I put up a demo page with (for the moment) a logo made in Illustrator,
> exported to SVG 1.1 and digested by the tool...

> Looking good.http://toki-woki.net/p/SVG2RaphaelJS/demo/

>
> If someone finds a bug, please report it here!
>
> On Sep 23, 1:27 am, Lachlan Hardy <lach...@lachstock.com.au> wrote:
>
> > Looks awesome, Quentin!
>
> --
> You received this message because you are subscribed to the Google Groups "Raphaël" group.
> To post to this group, send an email to raph...@googlegroups.com.

> To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.

[DOH]

Also works well for more complex Inkscape SVGs. I used Inkscape to
produce an SVG bitmap trace of an image (10 colour layers), simplified
it, recoloured part of the SVG using Inkscape and saved as an
Optimized SVG for conversion. Raphael version identical to the
originating SVG.

Incidentally, Josep's SVG to SVG Script tool also worked for this
image, and has a possible advantage when required to allow access for
manipulation of the individual clour layers. However the resultant
Raphael SVG did not appear as accurate as that obtained with
Quentin's, but OK nevertheless.

[Quentin]

Charles' bug should be fixed and the demo page is still wack but with
a few more links!
If you want to put it to the test with complex files, don"t hesitate.

[DOH]

OK have now noticed a limitation with the inkcape SVG. When I scale
the converted image in Raphael the SVG parts of the trace that I had
recoloured in Inkscape when rescaled stayed at their origins and so
became separated from the original trace SVG.

[Quentin]

Hey DOH, do you have a link to Josep's tool?
Can't find it!

[DOH]

Yes, Josep's tool at http://svg2raphael.sourceforge.net/

[park2]

I need a tool to export a raphael creation to a format that I can
import into illusrator or an eps so I can print. Does this achieve
this?

On Sep 23, 3:44 pm, DOH <phildejo...@gmail.com> wrote:
> Yes, Josep's tool athttp://svg2raphael.sourceforge.net/

[Quentin]

@DOH: Can you link to your SVG and what it looks like afterwards so I
can look?
@park2: It currently doesn't do that, although it might be feasible...
But I don't really understand why one would need that!

[park2]

I am developing a web base app to enable a client to produce an
artwork using the raphael library once completed we then need to print
with our existing ripping software. To do this we have to open in AI
create a registration mark ( for plotting out ) then export as an eps
file for printing. Once in AI as a vector graphic we can scale up the
drawing without a loss of quality. The client may be drawing at 20%
scale so we need to scale up at printing. (this could be 4ft X 20ft.

Hope this makes sense.


Cheers


SteveW

[Quentin]

I see.
If I find some free time I'll have a look into that!

[Jerod Venema]

Awesome job Quentin.

2010/9/24 Quentin <quen...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

--
Jerod Venema
Frozen Mountain Software
http://www.frozenmountain.com/
919-300-5141 (W)
919-368-5105 (C)

[DOH]

Hi Quentin,
The svg files you requested can be found at the demo at
http://www.teachernow.co.uk/Pages/Teacher.html. For some reason the
image does not interactively resize in IE.....probably my programming!
As stated earlier a bit map was converted to paths in Inkscape, then
parts of the SVG were recoloured in SVG, which produces new layers.
All were then grouped and "paths simplifed" with the original and
saved as an optimized SVG before being converted. I don't think the
grouping in Inkscape of the subsequent coloured layers combines in the
same way that the original trace combined layers, so each has a
specific origin! I don't know whether Inkscape has a technique to
overcome this limitation.

On Sep 24, 2:11 pm, Jerod Venema <jven...@gmail.com> wrote:
> Awesome job Quentin.
>

> 2010/9/24 Quentin <quenti...@gmail.com>

>
>
>
> > I see.
> > If I find some free time I'll have a look into that!
>
> > On Sep 23, 9:29 pm, park2 <parkfo...@googlemail.com> wrote:
> > > I am developing a web base app to enable a client to produce an
> > > artwork using the raphael library once completed we then need to print
> > > with our existing ripping software. To do this we have to open in AI
> > > create a registration mark ( for plotting out ) then export as an eps
> > > file for printing. Once in AI as a vector graphic we can scale up the
> > > drawing without a loss of quality. The client may be drawing at 20%
> > > scale so we need to scale up at printing. (this could be 4ft X 20ft.
>
> > > Hope this makes sense.
>
> > > Cheers
>
> > > SteveW
>
> > > On Sep 23, 7:53 pm, Quentin <quenti...@gmail.com> wrote:
>
> > > > @DOH: Can you link to your SVG and what it looks like afterwards so I
> > > > can look?
> > > > @park2: It currently doesn't do that, although it might be feasible...
> > > > But I don't really understand why one would need that!
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Raphaël" group.
> > To post to this group, send an email to raph...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > raphaeljs+...@googlegroups.com<raphaeljs%2Bunsu...@googlegroups.com>
> > .

> > For more options, visit this group at
> >http://groups.google.com/group/raphaeljs?hl=en-GB.
>
> --
> Jerod Venema

> Frozen Mountain Softwarehttp://www.frozenmountain.com/
> 919-300-5141 (W)
> 919-368-5105 (C)

[Quentin]

Hey,
I'm afraid the bug is a Raphaël one; because what you describe happens
on all browsers (not only IE) and the "scale" method you use does
something but misses some transforms. All paths are resized but three
of them (colored #aa8800) get placed on a bad Y. And the JS object
looks good...

Did you try the same transformation on another SVG/RaphaelJS object?
Any feedback on that?

On Sep 24, 4:33 pm, DOH <phildejo...@gmail.com> wrote:
> Hi Quentin,

>  The svg files you requested can be found at the demo athttp://www.teachernow.co.uk/Pages/Teacher.html. For some reason the

> > > raphaeljs+...@googlegroups.com<raphaeljs%2Bunsubscribe@googlegroups .com>

[andyrew]

so how do you use this in raphael?

how do you add mouse events to the entire svg image?

thanks!

[charles thomas]

Andy You can use the output of http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE5plus.php The way to code output is here: http://www.irunmywebsite.com/raphael/interactivemap_live.php The above example is just to code up a map but it could be any translated SVG. Details of next release of tool (and other tool solutions), should you be interested is @ http://www.irunmywebsite.com/raphael/svgsource.php Charles http://www.irunmywebsite.com --- On Fri, 9/24/10, andyrew <andrew....@student.adelaide.edu.au> wrote:

From: andyrew <andrew....@student.adelaide.edu.au> Subject: Re: An easy SVG 1.1 (Illustrator) to RaphaelJS conversion tool To: "Raphaël" <raph...@googlegroups.com>

-- You received this message because you are subscribed to the Google Groups "Raphaël" group. To post to this group, send an email to raph...@googlegroups.com.

To unsubscribe from this group, send email to raphaeljs+unsub...@googlegroups.com.

[Quentin]

Just added support for the "polygon" tag!

[DOH]

H Quentin,

OOPs The error with rescaling was due to me not specifying the centre
for rescaling.....not a bug in Raphael.

[Arjen]

Hi Quentin,

The tool looks nice and is pretty fast in my opinon.

I would like to use it's compact output.

But, it does not use the 'id' attributes from SVG, making it it hard
for me to identify the obejcts in script..

Does you see oppurtunities to add that functionality?

For now I'll use Charles' tool which outputs var <id name> =
paper.path

Cheers,

Arjen

[Quentin]

Yes, good suggestion!
I'll try to add that when I get some free time.

Keeping you updated.

[DOH]

Looking forward to the modification, it will make your excellent tool
even more useful/

Thanks
DOH

[Quentin]

I just looked at it and don't really understand where the ID should
go...
Do you need something like this?

var mySVG=["holder",800,600,{"type":"circle","r":
200,"id":"myCircle","cx":400,"fill":"#000","cy":300,"stroke":"none"}];

Notice the id:myCircle.
Tell me what you think, because I can't find anything about IDs in
Raphaël's documentation...

[DOH]

I think what Arjen was referring to and certainly what I had in mind
was that when creating a drawing in Inkscape the scene is usually made
up of several paths or primitives which in the SVG have separate IDs.
At the moment your tool treats the entire scene as a single entity
with a single ' ID' or variable, the component parts as referenced in
Inkscape by e.g. path id's and these are not accessible in the output
as similarly named variables.

It would be nice to be to have the option for Raphael output of the
scene not only as a single scene variable but also as the individual
component variables as named in Inkscape ID's. If you look at the
original SVG on my page at
file:///C:/Documents%20and%20Settings/Philip/My%20Documents/My%20Webs/TeacherNow/Pages/Teacher.html
you can see the image is made up of 12 paths. OK I didn't name them
they just have the default pathnumber id, but if they had been named
and assigned to individual variable then it would have been easy to
have animated the image in Raphael ....perhaps have eyebrows that move
or eyes that blink.

Not sure how you would decide on the levels of id that would be used.
Obviously some parts of a drawing would be a combination of paths and
primitives. Maybe if the id was a user given name rather than default
name of the object followed by a number. Or perhaps if it is an SVG
group then it is assigned to a single variable, otherwise individually
assigned to a variables. Of course there is the problem that the
entire scen is a group anyway, or that parts may be manipulated as
groups when drawing. So again there is difficulty in identifying what
the user intends to be identified as a named group!

As you said Raphael does not make use of id's, so the output you
suggest would not be of much use. Hopefuly Arjen will also come back
with some comment too.

Many thanks for your tool.

[Quentin]

I see, that makes perfect sense.
Yes, I'd love to hear Arjen's thoughts on that...

[Arjen]

Hi again,

I'll try to explain with an example.

I am building http://redmagic.nl/addmissions/continent.shtml att he
moment. Hover over the map, it's drawn by raphael.

To have a relation between the countries and the links the should have
the same id.

In SVG: <path id="zimbabwe" fill="#F38A28" stroke="#FFFFFF" stroke-
width="0.5" stroke-miterlimit="1" d="M202.639....
In HTML: <li><a id="zimbabwe" href="#">Zimbabwe</a></li>

So it would be nice to be able to use the svg id's form raphael/
javascript.

I now edit the output of (the other) converter to this:

window.afrika = window.afrika || {};

window.afrika.mapdata = {
zimbabwe: {
path:"M202.639,294.489 c0.584,0.136,1.16,0.258,......
},

This mapdata is read and added to the map:
this.paper.path(zimbabwe.path)

Summarizing, it would be nice for the converter to output a format
where you can reach the data and then feed it to Raphael, instead of
having the converter create the objects instantaneously.

This would probably be another converter option altogether, like
output to JSON or something.

Thanks for thinking along with me.

[Quentin]

I see. I think I understand what you guys need and I agree this would
be pretty cool.
The only this is: it looks like a pain to implement.

A few thoughts:

- When saving from Illustrator to SVG some elements are created as
groups (<g>) even if they're not really in groups and those groups get
the IDs of the objects on the stage. But Raphaël (and SVG/VML) doesn't
support groups, all items are positioned on the paper. So we'd lose
the groups' IDs.

- Apart from changing the logic from a global "Raphael()" call to
multiple "var myObject=paper.<method>(...) calls there is no way to
individually access the created elements. I could do that but the
script might get flooded with unwanted variables and objects, and
therefore get heavier and slower.

- We could find a way to manually (or better) list the IDs we want to
keep in the generated JS code (and map them to variables) but this
would prevent us from using the global "Raphael()" call and therefore
we'd fall back to the previous point (heavier and slower code).

- What would be cool is a way to inject object IDs in the global
"Raphael()" call (see my message from Nov. 1st) and have a new Raphaël
method to access the objects (circles, paths and so on) that would
look like "paper.getElementById('myCircle')". This wouldn't fix the
"groups" issue (point 1) but could greatly improve re-usability of
objects created with a single call, without having to declare numerous
and superfluous variables.

What do you guys think?
Anyone in touch with the lead developer?
Feedback appreciated!

On 3 nov, 14:56, Arjen <arjen.gee...@gmail.com> wrote:
> Hi again,
>
> I'll try to explain with an example.
>

> I am buildinghttp://redmagic.nl/addmissions/continent.shtmlatt he

[Quentin]

Nothing new?
Anyone with an idea or suggestion?

Bumping this, sorry.

[DOH]

Sorry for not getting back previously.

I think that the option of merely having a list of the IDs that are to
be identified as objects would suffice, and leave it to the designer
to ensure that the structure of the image has been correctly thought
through. If it would be possible to identify layers and restrict the
listed ID's to those might be an option.