SVGs rendering strangely with Raphael? - vector

Question

We have an online designer that uses Raphael to manipulate SVGs. We're preparing a large library of clip art to use for this, but have run into a very strange problem.
Some of the SVGs are running into a problem where they render fine in a browser, but once we pull them into Raphael they become completely unrecognizable.
Here's an image showing the effect:
And here's the code for the svg (generated by an illustrator export from a .ai file):
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="83.641px" viewBox="0 0 100 83.641" enable-background="new 0 0 100 83.641" xml:space="preserve">
<polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0
58.263,0.056 "/>
</svg>

Answer 1

Appears that your process for importing files into a path might be flawed, or, some unaccounted-for transformations have been applied. For example, this code works fine:
var paper = Raphael("paper");
paper.path(
"M58.263,0.056 L100,41.85 L58.263,83.641 L30.662,83.641 " +
"L62.438,51.866 L0,51.866 L0,31.611 L62.213,31.611 30.605,0"
).attr( { 'fill': 'black' } );
See http://jsfiddle.net/sgMH6/
How do you "pull" these files into Raphael? What's your process/code for that?
Edit: more information; import plugin is https://github.com/wout/raphael-svg-import/blob/master/raphael-svg-import.js
It appears that the plugin you're using might have a faulty polygon implementation routine. This is a hunch, but, seems like 0 numbers are not being processed correctly. Your SVG graphic does contain some zero coordinates.
In function Raphael.fn.polygon, there is a section that goes like this:
var d = parseFloat(c[j]);
if (d)
poly.push(d);
If you change that to this, instead, it might work for you:
var d = parseFloat(c[j]);
if (!d) d = 0;
poly.push(d);
This is a very rudimentary fix and it might possibly break other things. At any rate, take a look at a working example with a modified plugin fix - http://jsfiddle.net/pkzGJ/ ; if this is indeed a bug, you should submit it to the plugin author.