Working with SVG in a RWD workflow usually involves a design phase and a development phase. The design phase is usually handled by designers who may or may not know how to code. And because of the nature of SVG as both an image format and a document format, every step taken in the graphics editor in the process of creating the SVG directly affects the resulting code and hence the work of the developer in charge of embedding, scripting or animating the SVG. In my day-to-day work, I am usually the developer whom designers hand the design assets over to, and SVG images are part of those assets.

Export Cricut Design Space Files
Export Svg From Cricut Design Space
Export Svg From Design Space
How To Export Svg File From Cricut

Most of the assets I’ve been handed in my past projects needed a do-over and/or a second round of editing in the graphics editor before I could script them, because the resulting SVG code was not optimized enough for the kind of work—especially animation—that I was hired to do. The reason for that is that many of the designers I’ve worked with knew very little—if anything—about SVG code. They create vector graphics and UI assets all the time, but, for them, SVG is no more than an image format and they don’t know much about the code generated when their assets are exported as SVG documents.

There are some steps that designers can take or avoid—a set of “dos and don’ts”—that can help make the generated code cleaner. In this article, I want to share some of these. If you know any more, please do share them in the comments at the end of the article.

If they are correct, click the 'Resize page to drawing or selection' button in the Custom Size area of the Document Properties, save your SVG, and upload it to Design Space again. (Note: If you do not see the 'Resize page to drawing or selection' button, it means you are using an. The Cricut Design Space is pretty robust but there are times when you need a little more in the design area. For example, create curved text and such for a project. I stumbled across a way to covert PDF sewing patterns into SVG files to use with my Cricut Maker. Don’t worry, I’ll have a tutorial for that soon. A straight-forward method is the following: Select the object (s) to export. 'Resize page to drawing or selection' (File → Document Properties) or Ctrl + Shift + R. 'Invert selection' (Edit → Invert selection) or!, and Del all other objects. 'Save As' with Ctrl + Shift + S. Select Optimized SVG as the format if you want to use it on.

The tips we’re going to go over are applicable in Adobe Illustrator (Ai)—my graphics editor of choice—as well as other graphics editors. But since I personally use Ai, it is what I will be focusing on throughout this article.

We’re also going to go over the current SVG export options available in Ai and which ones to choose and why. But note that these options will change in the future, and this article will then be updated to reflect those changes.

That this article is based on my talk “SVG For Web Designers (and Developers)”—a talk I gave at CSSDevConf 2015 last month.

So, let’s start.

If you’re using Sketch to create SVGs, there are some things you can do to export cleaner code as well. Sean Kesterson has shared some tips in this article.

1. Create Simple Shapes Using Simple Shape Elements, Not `<path>`s.

There is a reason we have different basic shapes in SVG for creating, well, basic shapes. One could create practically any shape using a <path> element, right?

Simple shape elements (<line>, <circle>, <rect>, <ellipse>, <polygon> and <polyline>) are there for many reasons, and one of these reasons is that they are more readable and more maintainable and editable by hand than their <path> alternatives.

Basic shapes come with a set of attributes that allow you to control the shape features, such as position (x, y, cx, cy) and dimensions (width & height), while paths don’t come with these attributes.

For example, the following snippet shows the difference between a circle created and exported as a simple shape, versus one created and exported as a path:

If you want to animate your shape by, say, moving the position of the circle or making it bigger, you can do that by animating the position of the center via the x and y coordinates (cx & cy) and the radius of the circle (r). Whereas if you are working with a circle generated as a path, you will have to resort to CSS/SVG transformations (translation and scaling) to do that. And then suppose you want to animate that path and the animation requires you to apply further transformations to it? It can easily become a transformation mess.

Another advantage to using simple shapes is that, in the majority of cases, the code required to create a shape using simple shape elements is less than that required to create the same shape using a <path> element (see above snippet for a comparison), so using simple shapes will also result in a smaller file size, which is always better.

2. Convert Text to Outlines.. Or Don’t.

To convert text to outlines:

Select the text you want to convert.
Choose Type → Create Outlines

Pros:

Text converted to outlines will preserve the font face used, without having to use a web font to display it. This means you save a few extra HTTP requests and don’t risk displaying your text with a fallback font that generally doesn't look good enough to substitute the beautiful font of your choice.
Outlining the text and preserving the font face used is good for preserving a brand’s identity when the latter is defined by the font face used, for example: in a logo. I almost always turn logo text to outlines. Outlining is also good for preserving the font face of certain scripts when used for headlines.

Cons:

Text converted to outlines is not real text: it is a set of paths that form the outline (shape) of the text. Consequently, the text becomes unreal and inaccessible, not searchable and not selectable.
In the case of a script headline or even a logo where the text is outlined, using an alt text (if the logo is embedded as an image) or SVG’s accessibility elements (<title> & &>) is a good idea for providing alternative text for screen readers.
I highly recommend reading all about making SVGs accessible in these two articles by Léonie Watson:
Converting text to outlines can significantly increase your SVG file size, depending on the complexity of the font face used. The image below shows the difference in the size (and readability) of an SVG with text converted to outlines (left) and text exported as SVG <text> (right).
Paths are not easily controlled and animated as <text> elements (including <tspan>s) are. The latter have a set of attributes that give you more control over your animations, while path data is limited in that sense.

3. Simplify Paths.

A path is defined by a set of points which in turn are defined by a couple of coordinates each.

The less the number of points, the less the path data (d attribute), and, consequently, the less the overall SVG file size. This is always a good step to take because a smaller file size is better for performance.

To simplify a path:

Select the path
Go to Object → Path → Simplify
Tweak the number of points. Make sure you have the Preview checked so can see how the path changes as you change the number of points. Tweak the number to get to the minimum number of points while preserving (or sacrificing) as much of the path’s visual appearance as you need.

There is a video tutorial created by Adobe to explain the process; so if you are more into videos, you can check it out here.

You can also simplify paths using the Warp Tool. I’m not a designer and I usually use Ai’s Simplify algorithm to simplify my paths, so, if you’

1. Create Simple Shapes Using Simple Shape Elements, Not <path>s.

2. Convert Text to Outlines.. Or Don’t.

3. Simplify Paths.

1. Create Simple Shapes Using Simple Shape Elements, Not `<path>`s.

Export Svg From Design Space