Home/ Questions/Q 7790437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T21:35:14+00:00

We have an online designer that uses Raphael to manipulate SVGs. We’re preparing a

  • 0

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:
enter image description here

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0