It definitely does seem like the problem is due to a "transform" attribute being present on a path, container, or other object tag. I began digging into the SVG file structure, comparing the ones giving me trouble with the ones that are working.
I have also reviewed the code itself on GitHub, but cannot seem to pin point what exactly I would need to change to fix this though, I am not really sure where the point of failure is - fabric, my settings, or my SVG file. So perhaps this can help with another step forward. Kangax has pointed out that Inkscape SVGs are more troublesome for FabricJS, but he goes on to say they are getting better. I really need to be able to use Inkscape for these. Perhaps this is better logged as a bug, but with all the related chatter, I am somewhat hoping that it is resolved and I just have not found the right combination of settings or processes to follow. I did try a hexagon made in Illustrator and it seemed to work, but I do not have Illustrator at my disposal and to say that is a "solution" is somewhat undesirable. All the settings I check seem like they are set correctly. It almost feels like the transform point is somewhere way above the bounding box. It appeared very far above the editor panel. To attempt fixing it from that point of view, I set flipY on the object, but that didn't work at all. I noticed that Inkscape's x,y of 0,0 is the bottom left corner which I thought was a little odd and thought maybe that had something to do with the scaling at least. I have read many bugs and the related discussions on GitHub with Kangax involved and tried things like the centeredRotation property and origin points on the objects. I also tried Simplifying the Path prior to exporting in all of these formats - again, no difference (though for some shapes, this did seem to work). I have saved the SVG out of Inkscape in various formats: Inkscape SVG, plain SVG, and Optimized SVG - none made any difference. That tool is also reference in this existing question: 10470508 (issue-with-svg-display-rendering-in-fabric-js) In fact, regardless of the optimization options I chose, the tool altered the octagon so much, it wasn't really usable as an octogon. It seemed to work, but not for every image, this one included. One very close solution was using an optimization tool to remove some transformation data that is apparently not liked much by fabric (that tool being found here ). I've read several posted questions here and on newsgroup discussions, but nothing got me a solid solution. I have tried programmatically changing these settings and it behaves the same way. Then, when I scale, it moves vertically the opposite direction. I rotated to the right and downward and the image moved to the left and upward. After loading my octogon.svg to the canvas, it looks right. On that image, don't worry about the "sliced" edges, that's just the editor's boundaries. The problem is when I load some (seems to be most) of these SVGs to the canvas then try to use the handles to scale and rotate the image, the rendered result is not appearing as expected: Octagon SVG Image and Action Results. I use the loadSVGFromURL functionality in FabricJS to handle loading the file onto my canvas. I populate the possible "shapes" and, for maximum flexibility in the shape's complexity, I am using SVG files that I have created with Inkscape. A user can add layers, select a shape for that layer, then set a number of options such as coloring and stroke width. I've been working on an icon builder for my website. I am having some trouble with scaling and rotation of SVG images with FabricJS.