SVGs uploading to Cricut design space and objects are rearranging?

[RL2492]

So I don't know whether this is an issue with the SVGs created in Designer or whether this is a new issue with design space... but is anyone else having this happening and know a solution? Whenever I create a file in designer, and export it as an SVG then upload it to cricut design space, the shapes are being rearranged and not staying in the positions in relation to each other as they are in Designer. This is so strange to me, as in the past this is not how SVGs functioned once uploaded to Cricut design space. First image is how they appear in designer, second picture is how they appear in Cricut design space. Pic 3 and 4 illustrate why this is problematic a bit better.

Edited August 18, 2021 by RL2492
added more pics

[Hangman]

The issue seems to be very much a Cricut Design Space bug. I've tested it using version 6.12.227 and basically what seems to be happening is that for any SVG files created at 72 dpi in Affinity Designer, Cricut is doubling the X and Y co-ordinates for rectangles if the rectangle hasn't been transformed, i.e., repositioned in Affinity Designer.

Example

Rectangle created in AD - Size 10cm x 10cm, Position X: 2cm, Y: 2cm

When imported into Cricut Design Space, the same rectangle appears as Size 10cm x 10cm, Position X: 4cm, Y: 4cm

If however, the rectangle is transformed in AD after initially being drawn then when imported into Cricut the X and Y co-ordinates are doubled and then the tranform offset added.

 

Example

Rectangle created in AD - Size 10cm x 10cm, Position X: 2cm, Y: 2cm then transformed X: 1cm, Y: 1cm so it is now positioned at X: 3cm, Y: 3cm

When imported into Cricut Design Space, the same rectangle appears as Size 10cm x 10cm, Position X: 5cm, Y: 5cm, i.e., it has doubled the original X, Y co-ordinates and then added the transform value so it is now positioned at X: 5cm, Y: 5cm rather than doubling the new X, Y co-ordinate values which would have resulted in X: 6cm, Y: 6cm

The issue is exagerated the bigger the initial X and Y values are, e.g., if the initial rectangle is positoned a X: 2cm, Y: 15cm (with no transforms), once imported into Cricut it will appear at X: 4cm, Y: 30cm

The issue doesn't appear to affect circles, they maintain their position regardless of whether any transform has been applied before or after being drawn. I've not yet tested any other shapes.

 

The SVG code is correct coming out of AD so the issue isn't AD related. I tested it using SVGs created in Inkscape and the same issue applies once imported into Cricut though size and position are scaled up by a factor of 1.333333 because Inkscape uses 96dpi as it's default resolution.

 

With AD documents at double the resolution, i.e., 144dpi, the issue is quadrupled so a rectangle drawn at a Size 5cm x 5cm, Position X: 1cm, Y: 1cm appears in Cricut at a Size of 10cm x 10cm, Position X: 4cm, Y: 4cm if there are no transforms in AD post drawing.

Any post drawn transorms at 144 dpi are however then doubled...

Example

Rectangle created in AD - Size 5cm x 5cm, Position X: 1cm, Y: 7cm then transformed X: 1cm, Y: 1cm

Imports into Cricut at X: 6cm, Y: 30cm, i.e., original value of X and Y x 4 plus value of AD transform x 2.

[walt.farrell]

Perhaps this FAQ article will help:

 

[RL2492]

On 8/18/2021 at 2:26 AM, BofG said:

Have you tried turning on "flatten transforms" in the export options?

Yep! That feature helps if the actual size of the objects are the issue, but not apparently with the rearranging issue!

[RL2492]

9 hours ago, Hangman said:

The issue seems to be very much a Cricut Design Space bug. I've tested it using version 6.12.227 and basically what seems to be happening is that for any SVG files created at 72 dpi in Affinity Designer, Cricut is doubling the X and Y co-ordinates for rectangles if the rectangle hasn't been transformed, i.e., repositioned in Affinity Designer.

Example

Rectangle created in AD - Size 10cm x 10cm, Position X: 2cm, Y: 2cm

When imported into Cricut Design Space, the same rectangle appears as Size 10cm x 10cm, Position X: 4cm, Y: 4cm

If however, the rectangle is transformed in AD after initially being drawn then when imported into Cricut the X and Y co-ordinates are doubled and then the tranform offset added.

 

Example

Rectangle created in AD - Size 10cm x 10cm, Position X: 2cm, Y: 2cm then transformed X: 1cm, Y: 1cm so it is now positioned at X: 3cm, Y: 3cm

When imported into Cricut Design Space, the same rectangle appears as Size 10cm x 10cm, Position X: 5cm, Y: 5cm, i.e., it has doubled the original X, Y co-ordinates and then added the transform value so it is now positioned at X: 5cm, Y: 5cm rather than doubling the new X, Y co-ordinate values which would have resulted in X: 6cm, Y: 6cm

The issue is exagerated the bigger the initial X and Y values are, e.g., if the initial rectangle is positoned a X: 2cm, Y: 15cm (with no transforms), once imported into Cricut it will appear at X: 4cm, Y: 30cm

The issue doesn't appear to affect circles, they maintain their position regardless of whether any transform has been applied before or after being drawn. I've not yet tested any other shapes.

 

The SVG code is correct coming out of AD so the issue isn't AD related. I tested it using SVGs created in Inkscape and the same issue applies once imported into Cricut though size and position are scaled up by a factor of 1.333333 because Inkscape uses 96dpi as it's default resolution.

 

With AD documents at double the resolution, i.e., 144dpi, the issue is quadrupled so a rectangle drawn at a Size 5cm x 5cm, Position X: 1cm, Y: 1cm appears in Cricut at a Size of 10cm x 10cm, Position X: 4cm, Y: 4cm if there are no transforms in AD post drawing.

Any post drawn transorms at 144 dpi are however then doubled...

Example

Rectangle created in AD - Size 5cm x 5cm, Position X: 1cm, Y: 7cm then transformed X: 1cm, Y: 1cm

Imports into Cricut at X: 6cm, Y: 30cm, i.e., original value of X and Y x 4 plus value of AD transform x 2.

Okay so this is very interesting, thank you for the detailed response! My thoughts were as well that it seems to be an issue with design space as this has not always worked this way (I went back and reuploaded old SVG files of mine that I know functioned properly at the time). So interestingly from a Facebook group, someone suggested adding a random node to each shape once converted to curves... and that seems to fix it! So based on what you are saying about transormed/non-transformed the workaround of adding a random node makes sense to why it's working. The other thing I discovered during my testing, is if you use the shape tool to make a couple shapes, then covert them to curves, then export to an SVG, when you open that SVG in designer, the shapes are BACK to saying shapes in the layer menu, not curves. However if you add a random node, it seems that "locks" the shapes as curves and doesn't revert them back to shapes in the SVG. I have no idea if that is part of what design space is misreading from the SVG files... but it might play a roll as well. My hope is this is something design space fixes/changes but the add a node workaround isn't that complicated and it does seem to work. Thanks for your thorough response!

[RL2492]

8 hours ago, walt.farrell said:

Perhaps this FAQ article will help:

 

Yes thank you for that, I had found that and tried those recommendations. It didn't however fix this particular issue, but someone from a Facebook suggested a workaround of adding a random node to shapes once they are converted to curves and it seems to be fixing the issue for now! Thank you!

[Hangman]

It seems the issue only affects squares/rectangles or shapes originating as such... even drawing a perfect square/rectangle manually using the pen tool results in the same problem as does drawing a square and then either rotating or shearing it, however drawing a random, non-square shape that only uses 4 nodes with the pen tool doesn't exhibit the issue and likewise if you draw a square using the Ellipse tool, convert it to a curve and then move any one of the four nodes in either the X or Y axis by one pixel then the problem also no longer exhibits itself.

13 hours ago, RL2492 said:

So interestingly from a Facebook group, someone suggested adding a random node to each shape once converted to curves...

You're right, adding an additional node to any square/rectangle does indeed fix the issue which is kind of odd.

13 hours ago, RL2492 said:

The other thing I discovered during my testing, is if you use the shape tool to make a couple shapes, then covert them to curves, then export to an SVG, when you open that SVG in designer, the shapes are BACK to saying shapes in the layer menu, not curves.

This only seems to be the case when shapes are created using either the Rectangle or Ellipse tools or when using the Pen tool to create a perfect square/rectangle, all other shapes created using any of the other shape tools remain as curves when the SVG is opened in AD which I guess is to be expected but equally unsure why this happens with the Rectangle and Ellipse?

14 hours ago, RL2492 said:

My hope is this is something design space fixes/changes but the add a node workaround isn't that complicated and it does seem to work.

Hopefully that will be the case, do you know whether the issue has been reported to Cricut?

[Hangman]

I guess my question then would be why does a Rectangle require the addition of the extra node but an Ellipse doesn't?

AD exports a Rectangle as a <rect> but equally exports an Ellipse as a <circle>, so neither are exported as a path, yet Cricut has no issues with the Ellipse, i.e., it positions it correctly on import, unlike the Rectangle...

AD Export with No Additional Node Added to the Rectangle

The Rectangle is incorrectly positioned but the Ellipse is correctly positioned on Cricut import

Quote

    <rect id="Pink-Square" serif:id="Pink Square" x="0" y="0" width="1267.01" height="1267.01" style="fill:#eb00eb;"/>
    <circle id="Yellow-Circle" serif:id="Yellow Circle" cx="1883.5" cy="1883.5" r="616.497" style="fill:#faff54;"/>

 

AD Export with Nodes Added to both the Rectangle and Ellipse to Create Paths

Both Rectangle and Ellipse are correctly positioned on Cricut import

Quote

    <path id="Pink-Square" serif:id="Pink Square" d="M1267.01,0l-1267.01,0l0,1267.01l1267.01,0l0,-1267.01Z" style="fill:#eb00eb;"/>
    
    <path id="Yellow-Circle" serif:id="Yellow Circle" d="M1883.5,1267.01c152.183,0 291.561,55.261 399.145,146.794c132.955,113.118 217.352,281.633 217.352,469.704c0,340.254 -276.243,616.497 -616.497,616.497c-340.255,0 -616.498,-276.243 -616.498,-616.497c0,-340.255 276.243,-616.498 616.498,-616.498Z" style="fill:#faff54;"/>

Or is this basically just the bug in Cricut we're talking about...

[walt.farrell]

20 minutes ago, Hangman said:

I guess my question then would be why does a Rectangle require the addition of the extra node but an Ellipse doesn't?

Because Cricut has a bug handling rectangles?

[Hangman]

@walt.farrell That was my assumption, at least there is a workaround for now...

[RL2492]

On 8/20/2021 at 6:53 AM, Hangman said:

It seems the issue only affects squares/rectangles or shapes originating as such... even drawing a perfect square/rectangle manually using the pen tool results in the same problem as does drawing a square and then either rotating or shearing it, however drawing a random, non-square shape that only uses 4 nodes with the pen tool doesn't exhibit the issue and likewise if you draw a square using the Ellipse tool, convert it to a curve and then move any one of the four nodes in either the X or Y axis by one pixel then the problem also no longer exhibits itself.

You're right, adding an additional node to any square/rectangle does indeed fix the issue which is kind of odd.

This only seems to be the case when shapes are created using either the Rectangle or Ellipse tools or when using the Pen tool to create a perfect square/rectangle, all other shapes created using any of the other shape tools remain as curves when the SVG is opened in AD which I guess is to be expected but equally unsure why this happens with the Rectangle and Ellipse?

Hopefully that will be the case, do you know whether the issue has been reported to Cricut?

From my testing I hadn’t caught that it only affected squares/rectangles so that’s a very interesting observation. The fix is definitely odd too, as I don’t get how a node changes things for Cricut! I do hope that Cricut potentially fixes this. I’m not sure if this has been reported to Cricut directly yet or not, I should probably do that!

[RL2492]

On 8/20/2021 at 7:37 AM, BofG said:

Affinity exports as rectangles where possible, the extra node forces it to remain a path.

Yes that definitely seems to be the case based on my testing and what others have said!

[RL2492]

So I thought I’d add one additional thing I’ve been recently made aware of. I think they MAIN problem here is that most design apps export quite messy SVGs (when viewing the html of the file they are overly complex). The real and best solution to this problem is actually to run your SVG through an SVG optimizer, like the one I’ll link here. Granted… design space should already use something like this automatically when you upload an SVG to prevent problems like this, but truly I think the real solution is using an optimizer and playing around with some of the settings they provide. https://jakearchibald.github.io/svgomg/ seems to be one of the best web optimized options, and taking the extra step of doing this is probably the best long term solution to anything new design space might do!

[Zaa]

Hi. I’m using AD2. Had the same issue. Turning on 'flatten transforms' sorted this out. And nothing moved out of place.

[JohannesMP]

I believe I've Identified the core bug causing this problem:

Cricut Design Space's SVG importer incorrectly parses transformation matrix attributes

 

TL;DR

• In an SVG basic shapes (rectangles, ellipses, etc) will often require an additional transformation, represented as a matrix.
• When importing an SVG file Cricut Design Space reads two of the elements of a matrix out of order.
• If these two elements are not equivalent, then the shape will appear incorrectly transformed in Cricut Design Space.

 

Specifically when 'uploading' an SVG file containing transform attributes of the format:

transform="matrix(A, B, C, D, E, F)"

Cricut Design Space will incorrectly parse the attribute as:

transform="matrix(A, C, B, D, E, F)"

Where the 2nd and 3rd element of the matrix are read in as swapped, resulting in incorrect transformation behavior when these values are not equivalent.

 

Example 1

 

Wonky.svg - Exported from Adobe Illustrator. Showing file below, and also included as attachment

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<polygon fill="#231F20" points="142.9,261.6 125.6,278.8 140.5,321 98.3,306.1 81.5,323 149.3,347.1 174.6,419.8 191.9,402.9 
	175.4,355.9 222.4,372.4 239.7,355.1 166.6,330.2 "/>
<rect x="204.6" y="216.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -137.6367 235.4805)" fill="#231F20" width="21.7" height="134.5"/>
<polygon fill="#231F20" points="244.5,160 305.1,221 209.6,194.9 194.7,209.8 289.9,304.9 304.7,289.7 240.5,225.4 341.3,253.5 
	354.5,240.3 259.4,145.1 "/>
<path fill="#231F20" d="M392.3,116.6l-4-4l-31.7,31.7l16.1,16.1l14.5-14.5c10,13.3,10.8,24.1,2.4,32.9c-6.8,6.4-14.5,8.4-24.1,5.2
	c-9.2-3.2-18.9-10-29.3-20.1s-16.9-19.7-20.1-29.3c-3.2-9.2-1.6-17.3,5.2-24.1c7.2-6.8,15.7-8.8,25.3-5.2l7.2-20.9
	c-17.7-6-33.3-2.4-47.4,11.2c-11.2,11.2-15.3,24.1-12.9,38.6c2.4,14.5,11.6,29.7,27.3,45.4s30.5,24.5,45.4,27.3
	c14.5,2.4,27.7-1.6,39.4-13.3c9.6-9.6,13.7-21.3,12-34.5C415.2,145.5,406.7,131.5,392.3,116.6z"/>
</svg>

• Adobe's SVG exporter will attempt to use the SVG tag best suited for each shape. I assume the same is likely true for Affinity.
  • The 'G' has curves and so is represented as a 'path'
  • The 'X' and 'N' shapes have no curves and so can be represented as 'polygon'
  • The 'I' can be represented as a 'rect', and that requires a transformation matrix to be rotated and positioned correctly (since transformations are applied relative to the parent of the current shape, which in this case is the origin in the top-left).
• When an SVG containing such a rect is uploaded into Cricut Design Space the rectangle will appear incorrectly positioned.
• Try it for yourself:
  • Download the attached Wonky.svg, open it in a text editor, locate the rect tag on line 7, and swap the 2nd and 3rd number of the matrix (basically just moving the negative sign in this case) and save the file.
  • The file will now open correctly in Design Space, and will appear broken everywhere else.

I believe that this bug is rarely encountered because this would generally only apply to basic shapes such as rect or circle—ones that require an additional transform to be positioned/rotated/skewed/etc. correctly—and even then only when the 2nd and 3rd element of their matrix are not equivalent.

 

Example 2

Matrix_Demo.svg - manually authored SVG based on this example, see attached file.

• This SVG contains two rows of grouped rectangles with matrix transforms applied.
• The bottom row is identical to the top, except that the 2nd and 3rd element of the transformation matrix of each rect have been swapped.
• Note how Cricut Design Space's preview appears to have the top and bottom row swapped when compared to how the SVG is rendered both in the browser as well as in Adobe Illustrator.
• This demonstrates how swapping the 2nd and 3rd elements of the matrices reproduces the behavior observed in Cricut Design Space.

 

To fix

If you open the SVG file in a text editor and CTRL+F for "matrix", you know you're fine if there are no matches.

If the file does contain a matrix:

• Either manually swap the 2nd and 3rd element of each matrix in the SVG file before opening it in Cricut Design Space
  • Note that once edited the SVG will appear correct in Cricut Design Space, but any other program will now display the transformation wrong.
     
• Or before saving the SVG you can perform any one of a number of operations that 'flattens' the simple shapes to more general paths/polygons that won't require a transformation matrix once saved as an SVG
  • This is why adding a node to the path, or 'flatten transforms' works.

 

I have reported this bug to Cricut through their suggestions/bug form. If anyone else wishes to help then poking them with a link to this post may help expedite a fix.

Matrix_Demo.svg Wonky.svg