How to export SVG files

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

 

Video tutorial on the subject by graphicxtras.com (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 exporting SVG files from Illustrator to other applications and web. It also create a far leaner file though it is still not perfect by any means. There are a number of additional ways to export SVG from Illustrator

 

Buy Price :$6.49 US Dollars 16,000 AI brushes / Strokes from graphicxtras.com and all can be used with the features on this page AI gallery

 

Settings for the export of SVG files from Illustrator :

styling

fonts

images

object

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. You can tweak the settings for the export of SVG from Illustrator in countless ways

 

Use normal text editor : As the generated export Illustrator SVG 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 with the Illustrator SVG export 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 export of the SVG from Illustrator 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. 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. That is a quick way to export Illustrator SVG.

 

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 the SVG Illustrator export 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

 

 

Commercial use. Secure sales by shareit.com (c) 1995-2018 Andrew Buckle, Maidstone artist, tel: +44 1622 / 688 375 E-mail: support@ graphicxtras.com