Svg Files in Raphael, Can They Be Used

SVG files in Raphael, can they be used?

It's currently not possible to display existing SVG with Raphael, and there are apparently no plans for the implementation of SVG editing (see this forum post).
As for alternative JavaScript libraries, a newer alternative is Snap.svg, which can load external SVG files via its Snap.load() function.

Does Raphael js uses canvas or svg?

Raphael uses an SVG element, it doesn't use Canvas (at all, anywhere). It could use VML for older browser support.

Its just sometimes the variable names people use for the main Raphael element are things like paper or canvas (and Raphael calls its paper a canvas, which is confusing), as it describes it well.

If we look at what is underlying the Raphael object itself, we can take a peek (I assume on a very old IE it may look a bit different and be VML)..

var paper = new Raphael('mydiv', 100, 100);
console.log( paper.canvas );

displays

<svg height="100" version="1.1" width="100" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">

  <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.0</desc>  
  <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

  </defs>
</svg>

What are the possible ways to convert SVG file to Raphael

You could loop through the nodes of the SVG and write them to the Raphaël object one by one, but unless you are dealing with nonstandard element types/attributes you are better off using one of the Raphaël plugins that make importing SVGs a one-line command. Such as:

• https://github.com/crccheck/raphael-svg-import-classic
• https://github.com/wout/raphael-svg-import

Import SVG Path Data into Raphael.js

It's because you're looking at a polygon / polyline, not a path.

Convert the polyline points to a path d (definition) using something like in this. Then you'll get a path string that Raphael understands.

You can spot path definitions as opposed to polygon or polyline defintions because path strings always start with M.

---

For convenience, here's a JSBIN demo of the code on that above linked question where you can copy and paste in and convert any SVG polygons or polylines:

http://jsbin.com/avuzas/1/edit

raphael svg import size

There's two ideas I can offer you:

1) maybe the SVG import takes into account the original size and does scaling for you. However when editing in illustrator you might have a much bigger document around it, which confuses the svgImport?

2) Otherwise, you could import the paper as a set. And scale the set.

var set = paper.set();
paper.importSVG(svgdata, set);
set.scale( 2, 2, centerx, centery );

(I'm not sure without an example to play with, what centerx and centery should be).

[EDIT (after approval)]
It seems Raphael enables you to get a set's bounding box:

var bbox = set.getBBox();
// You'll now have bbox.x, bbox.y, bbox.width and bbox.height at your disposal. 
// For example:
paper.rect( bbox.x, bbox.y, bbox.width, bbox.height ).attr('border', 'red');

So I'd say you could:

1. Get bounding box of imported SVG set
2. Use set.translate to align the bounding box's center with the center of the paper (use something like ( paperwidth / 2 ) - ( bbox.x + bbox.width / 2 ) for example for the x translation).
3. Scale based on the bounding box size compared to the paper size. You probably want to scale while maintaining aspect ratio so you'll have to use the one that's closest to 1 (of
   paper.width/bbox.width and paper.height/bbox.height).
4. (Note: use center of paper now as center of scaling - since you translated your set this is actually the center of the svg set as well)

I did this from the top of my head so it might not be 100% accurate, but if you get the idea you'll probably be able to get rid of the glitches.

How to save an svg generated by raphael

As stef commented, the BlobBuilder API is deprecated. Instead, use the Blob API.

Building on Andreas' answer, here is how I quickly got it to work:

svgString = r.toSVG();
a = document.createElement('a');
a.download = 'mySvg.svg';
a.type = 'image/svg+xml';
blob = new Blob([svgString], {"type": "image/svg+xml"});
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();

---

Related Topics