How to export SVG in Illustrator tutorial

How to export vector SVG in Illustrator CC 2018 2017 2015 etc. How to export SVG paths and how to save the vector data for use to create amazing web pages with all kinds of vector paths.

Export SVG in Illustrator

export for svg files in Illustrator
  1. Select some paths in Illustrator to be exported as a SVG file in Illustrator

  2. File menu

  3. Export menu

  4. Export as

  5. Select SVG for format

  6. Select the styling, font, decimal places etc

  7. Ok

To create a basic SVG file, create a vector path (or many vector paths) and then go to the save as command and select the SVG format.

AI format, download

 

Buy $9.95

16,000 Illustrator brushes / Strokes from graphicxtras.com, all royalty free for commercial use - work great with SVG export and for use in other apps AI Illustrator brushes collection

Illustrator also offers a new and more streamlined SVG vector export via the export menu command. The SVG files are just text files. You can edit the SVG files and modify them using a text editor. You can also copy the SVG data to the clipboard / pasteboard and copy the SVG into Dreamweaver. You can set a variety of vector SVG settings such as how to use fonts, how to preserve images, decimal points for accuracy of SVG data and more. This tutorial shows you how to save and export the SVG files and vector data. It shows the different settings for the SVG export. Also details about how you can cleanup the Illustrator SVG code.

Basics for SVG export - you need something to export and have Illustrator CC 2018 2017 / 2015.1

The key thing is to have something to export (such as paths for the SVG export) and also you must have Illustrator CC 2018 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.

How to use the "Save As" command to create an SVG file in Illustrator

save as svg illustratorYou 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 after the save. The key point of the "save" is that the format can be re-opened into AI, the export is really intended for use in other applications

  1. Create some art

  2. File menu

  3. Save as

  4. Select SVG from format list

  5. Select the SVG profile, type etc as well as more options

  6. Click OK

The settings for the export of the SVG such as styling, font, decimal places etc

export svg illustrator files
  1. File menu

  2. Export

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.

Editing the generated SVG in notepad etc - cleanup the code

The SVG is a pure text file. You can use any number of editors to go in and cleanup the generated code. In some cases, the edited code can be reduced by quite a bit but in many cases you may just be able to remove the odd comment or two

The "export selection" option if you only want to export a selected number of paths

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

Pasteboard / clipboard option and copying the SVG code into Dreamweaver for use in your web pages

export svg via pasteboard clipboard illustratorYou 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 SVG 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.

 

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449.45 371.1"><defs><style>.cls-1{fill:#fff;stroke:#000;stroke-miterlimit:10;}</style></defs><rect class="cls-1" x="0.5" y="0.5" width="448.45" height="370.1"/></svg>

 

The above is the code for a very basic SVG - you can still edit the code to remove some of the code

  1. Create art for SVG export

  2. Select paths

  3. Copy

  4. Go to dreamweaver

  5. Paste into code

Other resources

1. contour and offsets symbols

Other tutorials

1. how to open eps files in Affinity Designer

Sources and references

SVG on Wikipedia

 

Return to home page

 

Commercial use - Royalty free - No time limit, no credit - All by graphicxtras.com - Secure sales via shareit.com (c) 1995-2017 Andrew Buckle, Maidstone artist, tel: +44 1622 / 688 375 E-mail: support@ graphicxtras.com License and usage Privacy Facebook pinterest Twitter Youtube tutorials Instagram Linkedin

 

The graphicxtras.com graphic design products are priced in US dollars but they can also be bought in Euros, Yen, UK pounds, etc though please note that there may be additional taxes applicable which will be handled in the secure shareit.com checkout. If you have any questions or queries about the products, please let us know and I will try and help by e-mail or via youtube etc. You can also add additional products as well as download protection and also purchase a physical CD via the shareit.com. The brushes and patterns etc work in a variety of applications and there are many freebie / samplers available to test them on your system before any purchase but again, if you have any concerns that the brushes etc will work with your favourite application, please let us know. The quickest way is probably to leave a message on our facebook page. The designs can be used as brushes and patterns and shapes etc but they can also be used just as images or layers as well as displacement maps or overlays or masks etc so even if the product is listed as a brush or shape, you can often also use the artwork as a layer and use the layer multiple times in the same project to create all kinds of unique and wonderful designs. The products on this site are copyright of Andrew Buckle but any products and artworks you create with these items are your copyright.