How to create SVG for Cricut

[CDxyz53]

I've tried multiple times on different designs to create an SVG that I can use for Cricut Design Space.  When I try to upload the SVG it doesn't read it.  I don't think I'm doing it right.  I tried grouping, creating different layers but no matter what I do my exported svg files are not readable in Cricut Design space.  What am I doing wrong?

[Alfred]

This FAQ article may help:

 

[CReggio]

I am having troubles as well. I have a very simple design consisting of a few shapes. When I save it as an svg and open it in a browser everything is fine. But when I upload the file to cricut design space items are missing, simple shapes. 

Smiley_Face.svg

[Alfred]

1 hour ago, CReggio said:

I am having troubles as well. I have a very simple design consisting of a few shapes. When I save it as an svg and open it in a browser everything is fine. But when I upload the file to cricut design space items are missing, simple shapes.

Welcome to the Serif Affinity Forums, @CReggio.

Not that it should matter, as far as I’m aware, but you really don’t need a container layer (‘Layer’) for each shape. That aside, I wonder whether Cricut Design Space might yield better results if you were to send it non-overlapping shapes.

 

Smiley_Face_New.afdesign

Smiley_Face_New.svg

[v_kyr]

It looks like that Cricut Design Space doesn't interpret here some of the followup SVG Ellipse group layer command to id="highlight" and "highlight1"...

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(0.998321,0,0,1,-101.654,-39.1469)">
        <circle cx="486.678" cy="354.769" r="205.86" style="fill:rgb(255,184,0);"/>
    </g>
    <g id="eye-white" serif:id="eye white" transform="matrix(-1.13489,0,0,1.13489,678.75,-17.0063)">
        <ellipse cx="323.24" cy="253.687" rx="51.126" ry="78.857" style="fill:white;"/>
    </g>
    <g id="iris" transform="matrix(-1.05562,0.00987796,0.00850606,0.909009,652.675,54.3254)">
        <ellipse cx="323.24" cy="253.687" rx="51.126" ry="78.857" style="fill:rgb(74,157,25);"/>
    </g>
    <g transform="matrix(-0.806055,0,0,0.676333,579.393,133.929)">
        <ellipse cx="323.24" cy="253.687" rx="51.126" ry="78.857"/>
    </g>
    <g id="highlight" transform="matrix(1.05876,0,0,1.08548,-42.1238,-26.7254)">
        <ellipse cx="321.519" cy="268.579" rx="12.8" ry="12.558" style="fill:white;"/>
    </g>
    <g id="eye-white1" serif:id="eye white" transform="matrix(-1.13489,0,0,1.13489,822.611,-14.7797)">
        <ellipse cx="323.24" cy="253.687" rx="51.126" ry="78.857" style="fill:white;"/>
    </g>
    <g id="iris1" serif:id="iris" transform="matrix(-1.05562,0.00987796,0.00850606,0.909009,796.536,56.552)">
        <ellipse cx="323.24" cy="253.687" rx="51.126" ry="78.857" style="fill:rgb(74,157,25);"/>
    </g>
    <g transform="matrix(-0.806055,0,0,0.676333,723.254,136.155)">
        <ellipse cx="323.24" cy="253.687" rx="51.126" ry="78.857"/>
    </g>
    <g id="highlight1" serif:id="highlight" transform="matrix(1.05876,0,0,1.08548,101.737,-24.4987)">
        <ellipse cx="321.519" cy="268.579" rx="12.8" ry="12.558" style="fill:white;"/>
    </g>
    <g transform="matrix(0.013426,-1.12617,0.887007,0.0143549,-56.6277,545.777)">
        <path d="M159.607,393.789C107.325,393.789 64.879,436.314 64.879,488.693C64.879,541.072 107.325,583.597 159.607,583.597C142.195,562.498 128.06,527.236 128.06,488.693C128.06,450.15 142.195,414.889 159.607,393.789Z"/>
    </g>
    <g id="tounge" transform="matrix(0.0171522,-1.43873,0.981819,0.0158893,-104.943,567.639)">
        <path d="M96.207,418.213C98.098,419.358 99.544,443.633 96.351,463.212C94.576,474.093 89.029,483.695 86.436,489.941C89.033,494.46 94.259,507.018 96.788,522.065C99.758,539.738 98.509,560.711 96.986,561.706C89.611,556.072 82.419,546.031 77.102,537.013C68.896,523.094 65.521,507.439 64.879,488.693C63.921,460.75 76.974,435.581 96.207,418.213Z" style="fill:rgb(255,0,48);"/>
    </g>
    <g id="teeth" transform="matrix(0.013426,-1.12617,0.887058,0.0143558,-56.6407,546.339)">
        <path d="M159.607,393.789C155.415,393.458 143.794,394.779 141.226,395.477C123.199,400.378 109.108,453.588 110.051,489.23C110.974,524.115 124.615,552.51 140.954,574.552C145.966,581.313 146.932,584.658 159.607,583.597C142.115,562.546 127.915,527.268 127.915,488.693C127.915,450.118 142.115,414.84 159.607,393.789Z" style="fill:white;"/>
    </g>
</svg>

... and the black ellipse group layers don't have a named "ID" at all!

Not sure why you layered (container grouped) every shape object here explicitely it's usually not needed, just name the ellipse layers if you want. If restructuring containers doesn't solve the problem, you can also try to convert the problematic ellipses (iris, eye white) to paths instead.