How to export SVG files in Illustrator, saving vectors Tutorial

Exporting SVG Tutorial

Setup

The key thing is to have something to export and also you must have Illustrator CC 2017 / 2015.1 +. You could save SVG in previous versions but with the latest CC release you can now export the artwork. You can also just use the pasteboard to copy the artwork to Dreamweaver.

 

Save As

You can use the save as command to save as SVG and the file saved is OK but it does require a little bit of tidying up and the whole point of the save is that the format can be re-opened into AI at a later point.

 

export panel

 

Export

You can find the new export command in the file menu. The export formats include PNG etc and now include SVG and this SVG can be imported back into AI but it is not intended for that, it is for saving a really trimmed down and mean file format with the minimum of fuss. It works in the same way as the save but it does have a few additional options which make it very useful. It has the styling, font, images, object, decimal, minify etc and you have the usual show code and browser. The show code is the most useful as you can quickly see a text editor / code and you can then copy that and paste into Dreamweaver or whatever. The browser feature is also useful to see the end result especially if you change the decimal setting to 0. As the SVG code is just text, you can also cleanup the code with the removal of the title, xmlns etc but just leave the viewbox (that is useful) and add a class etc to the header. I would say leave the decimal to 1 in most cases, I have tried 0 and it works but for a lot of artwork the results can be pretty dire. I have found the results a massive improvement over the save with a lot leaner code. The biggest disappointment has to be type as quite often the exported code generates a lot of tspans and breaks the text into 'grap' 'hic' 'xtr' 'as' etc instead of 'graphicxtras' which is really not ideal. I hope that is fixed at some point as I can't believe they really think that is minimal code. The export can be saved to an actual SVG file as well as the text file. I generally use inline SVG in my web pages but if not then you can generate the SVG code and then use the <img> tags or <object> etc. With the export and the save as commands I still end up cleaning the code.

 

Export selection

Much the same as the export but it only adds the code for the items selected.

 

Pasteboard / clipboard

You can also just select the artwork, say the entire artboard (if you have a background path) and some objects such as circles, stars etc and then copy that as normal and then paste into Dreamweaver. To do this you must first go to the preferences and then the file handling section and then set the clipboard 'include SVG code' to ON. The code generated is not bad, actually it is quite decent and 90% of the time it is sufficient. The only area it really fails in, type. You have to expand the type before you can copy the code otherwise you just get the type only in DMW. See an example below of the generated code. It also tends to add <defs> (which may or may not be of use) and a comment and a lot of additional material in the header that has to be quickly deleted each and every time. I guess they never know the exact results required by each and every user of the tool, so this is a reasonable result that benefits the most users.

 

Video tutorials

Export SVG tutorial [Youtube]