The SVG (Scalable Vector Graphic) file-format is an XML-based vector in that can be used on the web right now. Not only are they crisp at any size they are scaled to, but they are supported by IE9+, Firefox, Chrome, and Safari. For IE8 and below, you can provide a fallback PNG. Simple icons and logos are good candidates for the format, as they are often the first noticeable elements of a design that will look blurry on a retina display.
You’ll probably want to use some SVGs if:
- You’re creating a responsive website, or
- You want to support iOS devices with a retina display
There are a number of ways to export graphics from Illustrator. Some of them aren't particulary useful (Save As), some of them don't support SVG (Export for Web), some of them produce good output but have limited options that don't allow preserving space around the art (Export As). The only way to output SVG preserving the space around the art is export the artboard itself, which is only an. Time needed: 10 minutes. Upload SVG Files to Cricut Design Space. Find.svg or.dxf File. Once you identify the location of the.svg or.dxf file you want to upload, Open File Selector. Go to the File Selector in Cricut Design Space and select Open. Drag and drop File. You can also drag and drop the file into the Design Space image upload window. You can export artboards, layers, layer groups, or entire documents as PNG, JPEG, SVG, or PDF assets from directly within the Design Space (Preview) interface. In the Export panel, click + to specify export settings for the selected layers from which you want to generate assets.
SVG Cropping
When exporting your SVG from Illustrator, it’s important to note that the “artboard” canvas around your vector should be cropped, so that there isn’t any extra white space. This is a common mistake that I’ve noticed in the last few SVGs provided to me from different designers. This is not typically something that matters when dealing with vector source files, but when SVGs are used on the web, they are linked to just like an image, and the extra white space will be displayed.
Besides changing the size of your artboard and manually scaling your vector elements, there is a quick way to crop the artboard in Illustrator CS6:
- Select everything that should be included in the SVG
- Select Objects -> Artboards -> Fit Artboard to Bounds
For those of you still on CS3, you’re in luck. There is a way.
- Activate the Artboard tool (Shift-O)
- Double click your vector, and it should adjust the artboard to fit
Dimensions of your Vector
Although it’s a vector, you may want to keep the size of the SVG at the initial default size it is displayed on the site. You can always change this by opening up the SVG file in a text editor and changing the width and height at the top.
Illustrator SVG Export Settings
Free Svg For Design Space
For the best compatibility, use the following settings
- Profile: SVG 1.1
- Type: Convert to outline – This makes sure that any text used is converted to shapes.
- Image location: Embed – If you are including bitmap images (probably not), they will be included in the file, rather than linked to separate files.
- Decimals: This is the level of precision. You may want to set to 2 or 1 decimals (default 3) to decrease the file size.
- Keep “Compressed” and “Optimized for Adobe SVG Viewer” unchecked (Visible in main “Save for Web” export menu in Adobe CS3).
For a full overview of all the settings in detail, check out this post on StackOverflow:
Example Scaled SVG Test
As a test, I tried exporting an SVG with the decimal option set to 1, 2, and 3.
Export Svg From Cricut
Avoid Filters and Effects in Your Vector
How To Export Svg File From Cricut
The last logo I attempted to save out as an SVG had some color variations. I could not find any info on this specific issue, but it may have had something to do with the radial gradient or a layer style used. In the process I discovered a few tips about what may be causing your SVG to look wrong.
Avoid any special filters and effects. Keep your shapes solid and as basic as you can. Don’t use Multiply Layers; Just like on PSDs for a web design where PNGs will be exported, avoid any layers set to multiply, because they will not work in the web browser.
Performance Issues and Downsides
When SVGs start getting too complicated, or you are using a lot of them, both the file size and rendering performance may become an issue. Since the browser is doing all the CPU processing to render all the lines and shapes dynamically, be careful that this isn’t too much for a mobile phone to handle. Others on the web have more to say about this:
- This article at Smashing Magazine has an interesting section about performance, with some additional links.
Export from Photoshop?
If you have a vector in a Photoshop layer, there is currently no way to export it without purchasing a 3rd-party plugin. So your best bet is to copy your vector path in Photoshop and paste it directly into a new document in Illustrator, or to export as EPS with the “export vectors” option checked, and then export your SVG from Illustrator.