StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The easiest vector image format to read is svg since svg is XML and XML is just plain text.</p> <p>Convert your vector image to svg using something like Illustrator or Inkscape and then open it in your text editor. You'll find that most of the shapes like <code><path /></code> and <code><rect /></code> have a direct equivalence in Raphael. For example, the <code><path /></code> object defines path coordinates in its <code>d</code> attribute and it has the same syntax as paths in Raphael:</p> <pre><code><path style="fill:none;stroke:#000000;stroke-width:12" d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244" /> </code></pre> <p>You can convert that to Raphael's:</p> <pre><code>var path = paper.path( "m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244" ); path.attr({fill:'none',stroke:'#000000';'stroke-width':12}); </code></pre> <p>Take note though of any transformations applied to objects and groups (the <code><g /></code> element), you'll have to repeat them in Raphael. Say for example you see the following:</p> <pre><code><path style="fill:none;stroke:#000000;stroke-width:12" d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244" transform="translate(-124,370)" /> </code></pre> <p>then after creating the path in Raphael you'll need to apply the <code>translate()</code>:</p> <pre><code>path.translate(-124,370); </code></pre> <p>You can probably write a script to convert svg files to Raphael syntax or load the svg file in the browser as text and use the browser's XML DOM parser to process it and draw it using Raphael.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload