I've edited an SVG with inkscape :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg2816" xmlns:rdf="" xmlns="" viewBox="0 0 48 48" version="1.1" xmlns:cc="" xmlns:dc=".1/">
 <defs id="defs2818"></defs>
 <metadata id="metadata2821">
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource=""/>
    <dc:title/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <g id="layer1" stroke-linejoin="miter" stroke="#ce3762" stroke-linecap="butt">
  <path id="path2828" style="stroke-dasharray:none;" d="M40,3,35,3,20,18,10,18s-5,5,0,10h10l15,15h5v-40z" transform="translate(-5,0)" stroke-miterlimit="4" stroke-width="0.5" fill="#42101e"/>
  <path id="path2830" d="m37,13s2,7.5359,0,15" transform="translate(0,2)" stroke-width="1px" fill="none"/>
  <path id="path2834" d="m40,11s3,10,0,19" transform="translate(0,2)" stroke-width="1px" fill="none"/>
  <path id="path2836" d="m43,6s6,14,0,29" transform="translate(0,2)" stroke-width="1px" fill="none"/>
 </g>
</svg>

It should look like this:

When I import it with fabricjs :

// volumeOnPrint is the string pasted before
fabric.loadSVGFromString(volumeOnPrint, function(objects, options) {
    var widget = new fabric.PathGroup(objects, options);
    // root is my fabricjs canvas
    root.add(widget);
});

It get that :

(The background is not the issue, it's the one of my canvas)

I've edited an SVG with inkscape :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg2816" xmlns:rdf="http://www.w3/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3/2000/svg" viewBox="0 0 48 48" version="1.1" xmlns:cc="http://creativemons/ns#" xmlns:dc="http://purl/dc/elements/1.1/">
 <defs id="defs2818"></defs>
 <metadata id="metadata2821">
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl/dc/dcmitype/StillImage"/>
    <dc:title/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <g id="layer1" stroke-linejoin="miter" stroke="#ce3762" stroke-linecap="butt">
  <path id="path2828" style="stroke-dasharray:none;" d="M40,3,35,3,20,18,10,18s-5,5,0,10h10l15,15h5v-40z" transform="translate(-5,0)" stroke-miterlimit="4" stroke-width="0.5" fill="#42101e"/>
  <path id="path2830" d="m37,13s2,7.5359,0,15" transform="translate(0,2)" stroke-width="1px" fill="none"/>
  <path id="path2834" d="m40,11s3,10,0,19" transform="translate(0,2)" stroke-width="1px" fill="none"/>
  <path id="path2836" d="m43,6s6,14,0,29" transform="translate(0,2)" stroke-width="1px" fill="none"/>
 </g>
</svg>

It should look like this:

When I import it with fabricjs :

// volumeOnPrint is the string pasted before
fabric.loadSVGFromString(volumeOnPrint, function(objects, options) {
    var widget = new fabric.PathGroup(objects, options);
    // root is my fabricjs canvas
    root.add(widget);
});

It get that :

(The background is not the issue, it's the one of my canvas)

• javascript
• html5-canvas
• fabricjs

Share Improve this question Follow edited Nov 2, 2012 at 13:17 dawi asked Nov 2, 2012 at 9:45 dawidawi 62866 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Turns out this was a bug in Fabric.

I just fixed it and pushed new version (0.9.21).

Generally, SVG files created with Inkscape are harder to parse than those created with Illustrator. But we're getting better and better :)

There's a growing visual test suite, to which I added your shape to avoid regressions in the future (let me know if that's OK). Careful as it might take a while to load/parse all the shapes.