When I import DWG files which contain simple objects, mostly rectangles, circles, lines or polygones and save the result in SVG sometimes i get shapes with matrix transformation. I know what is matrix transformation and I know there is no way for most shapes to do rotations or transformations without it. I don't deny this. Especially when they are combined. Matrices are nice and tidy way to do the job.

But the problem is the outcome SVG files are intended to be use in other program (no matter what the other app is) and that program doesn't support matrices. So the outcome for me are objects placed in wrong angle and wrong place in drawing. Compound path solves the issue because they are saved as ordinary paths in SVG and doesn't need matrix for their current shape. But I don't need to exchange all shapes to compound paths, only the ones with matrix. And I don't know how to find them using javascript properly. Narrowing problem - i only need to find rotated rectangles - other shapes contain 5 or more anchors are saved as polygons and AI doesn't add matrix to them.

Inside of AI all basic shapes are displayed as ordinary paths (not like in saved SVG) and i didn't find easy way to tell that pathitem is rectangle or not. There is also no matrix array related to shape which I can read from pathitem nor way to tell it is rotated or not. I did it fastly with very childish code but I am not content with it and it is probably not complete solution for any rectangle like cases:

if ((item.typename == "PathItem") && (item.closed) && (item.pathPoints.length == 4)) {
        var point = item.pathPoints;
        var bounds = item.geometricBounds;
        x1 = point[0].anchor[0]; y1 = point[0].anchor[1];
        x2 = point[1].anchor[0]; y2 = point[1].anchor[1];
        x3 = point[2].anchor[0]; y3 = point[2].anchor[1];
        x4 = point[3].anchor[0]; y4 = point[3].anchor[1];
        if ( (Math.pow(x1-x2,2)+Math.pow(y1-y2,2)) == (Math.pow(x3-x4,2)+Math.pow(y3-y4,2)) ) {
            x1 = bounds[0]; y1 = bounds[1]; x3 = bounds[2]; y3 = bounds[3];
            LT = (x1+y1) - (point[0].anchor[0] + point[0].anchor[1]);
            RB = (x3+y3) - (point[2].anchor[0] + point[2].anchor[1]);
            if ((LT != 0) || (RB != 0)) {
                //its rectangle, do what you want to do.

Are there any simple ways to do the checkup? I am pretty sure anchors can be placed in different order so the procedure won't work on any rectangle.

  • Hi. Welcome to GDSE. I'm not sure if Illustrator can do this TBH, or if there's a plugin, but Inkscape (which is free) has an Apply Transform extension that can do it. Once the extension is installed, you first need to convert the rectangle to paths (if not already a path) using Path > Object to Path, then do Extensions > Modify Path > Apply Transform
    – Billy Kerr
    Dec 29, 2021 at 11:45
  • Inkscape doesn't fit at all for the job. It uses matrices to full extent - it's not a bug, it's just the other software that is cripple. At least illustrator add matrices only on rotation, inkscape do it even for simple translation. And this addon, well, doesn't work the way it should. It mostly works only with polygons which AI totally deal without matrices. I checked the addon in 2019 year, and after all the hardships i wandered i don't want to try Inkscape or this plugin once more. App which support SVG without matrices is like car without tires - You have but won't ride anywhere.
    – KrzysztofJ
    Dec 29, 2021 at 12:59
  • Unfortunatelly, i can't force author of the app to change this. Like I can't force inkscape team to prepare special code to choose i want or not want use matrices. Matrices can be replaced with bunch of simple transformations but it will increase the SVG size and no one do this that way anymore.
    – KrzysztofJ
    Dec 29, 2021 at 13:05
  • Not sure you understood what I said. The extension I mentioned for Inkscape removes the transform matrix entirely. Also the extension works for all shapes which are paths. There's no limitation to just polygons.
    – Billy Kerr
    Dec 29, 2021 at 17:36
  • Here's an example SVG - which began as a transformed rectangle, converted to paths, then the transform applied using the extension I linked to. Check the code, there's no transform.
    – Billy Kerr
    Dec 29, 2021 at 17:49


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.