How to export SVG in Illustrator tutorial

How to export vector SVG in Illustrator CC 2018 2017 2015 etc and use the design in tools such as Dreamweaver

Export SVG in Illustrator

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

  2. File menu

  3. Export menu

  4. Export as

  5. Select SVG for format

  6. Select the styling, font, decimal places etc

  7. OK


videoVideo tutorial on the subject by (youtube)


Save : You can use the save as command to save in the required format and the file saved is OK but it does require a little bit of tidying up after the save and the file size is often an issue. The save is mainly for use with the application, the new Illustrator export option is more for other applications and web. It also create a far leaner file though it is still not perfect by any means.


Buy $4.50 16,000 AI brushes / Strokes from and all can be used with the features on this page AI gallery


Settings :





decimal places,

minify etc and you have the usual show code and browser.


Show code / 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.


Use normal text editor : As the generated code is just text so you can also cleanup the code with any normal text editor. You can remove the comments (they definitely can go), title field, xmlns etc and just leave the viewbox (that is useful) and add a class etc to the header. I would also leave the decimal to 1 in most cases, I have tried 0 with the decimal setting but the results can be pretty dire. I have found the results a massive improvement over the save with a lot leaner code.


Excess code : The biggest disappointment has to be type as quite often the 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 artwork can be saved to a standard text file as well.


Inline : I generally use inline code in my web pages so I copy the result of the work from the file into the html web pages . If you prefer to use the file then you can reference it in the html file by using <img> tags or <object> etc and that is fine as well. The code is fairly lightweight so hardly adds that much code. I have never noticed much impact on my web pages for adding this but I guess there maybe issues with mobiles and memory.


Selected items : There is also an option in AI to generate code for the currently selected items and that can be useful in some cases. Say select a circle and then use the selected option and the code generated will only be for the circle and not any of the other paths in the artboards


Copy into Dreamweaver via pasteboard : An easier approach to all of the above is to just use the clipboard or pasteboard. You can also just select the artwork and copy that as normal and then paste that into Dreamweaver (if that is your favorite web application). 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 via the clipboard / pasteboard is not bad. Actually it is quite decent 90% of the time. The only area that the copy to pasteboard really fails is with type. You have to expand the type before you can copy the code otherwise you just get the type only in DMW. The copied text 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.


Keywords : How to export SVG in Illustrator tutorial


Return to home page


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


video video video video video video