CODEWITHSUNDEEP
javascriptsvghtml5-canvasvector-graphicsfile-conversion
Talbatz
Talbatz

Reputation: 235

Using Html5 / Javascript graphics in some graphic editor

I got some graphic design that was made using JavaScript / Html5 Canvas.

Take a look here: http://yeda.us/js/logos.js

now, i need to give this graphic element to a graphic designer in some format he can work with: in either photoshop or Illustrator friendly formats.

Now, of course i can take a screenshot and start working my way from there, but i do need this graphic in a vector format i could use later more robustly.

Is there a way to convert the above mentioned code into graphics? perhaps convert it to SVG somehow?

Upvotes: 4

Views: 1499

Answers (2)

Erik Dahlström
Erik Dahlström

Reputation: 60976

Check out SVGCanvas which defines an API compatible with HTML5 canvas that creates SVG output from the drawing commands. It probably doesn't handle everything, but your simple example should hopefully work just fine.

Just paste the relevant bits of your code into one of the left textareas and click "do it", then copy the svg output from the textarea on the right.

Upvotes: 5

Milimetric
Milimetric

Reputation: 13549

Like others commented, there's no tool that would help you make a Canvas -> SVG conversion. However, the code isn't too different. Since the sample you gave is rather small, you could use Raphael.js to generate SVG and convert the code you posted to Raphael.js:

http://raphaeljs.com/

UPDATE

A little more detail

  1. include Raphael.js
  2. go through your script line by line and try to find equivalents in Raphael.js. For example, the rgb color stuff you're doing would use this: http://raphaeljs.com/reference.html#Raphael.rgb
  3. run the resulting js
  4. save the generated SVG

Upvotes: 2

Related Questions