GraphicxtrasVideosE-Mail

SVG Export in Illustrator CC (Export Vectors) Tutorial | SVG For Web Pages

SVG Export in Illustrator CC (Export Vectors) Tutorial | SVG For Web Pages (youtube)

Basics

Two options : Select some paths to be exported as a file. Go to the file menu.export and then export as and select SVG for format. Select the styling, font, decimal places etc and click OK. To create a basic file, create a vector path (or many vector paths) and then go to the save as command and select the SVG format.

Streamlined

Illustrator also offers a new and more streamlined S vector export via the export menu command. The generated files are just text files. You can edit those text files and modify them using a text editor. You can also copy the generated data to the clipboard / pasteboard and copy the code into Dreamweaver.

How to use the "Save As" command for the file format

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 after the save by using the text editor. 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

Settings

The export formats include PNG etc and now include SVG and this format can be imported back into AI. You can use to create 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 code is just text, you can also cleanup the code with the removal of the title, etc but just leave the view box (that is useful) and add a class etc to the header.

Decimals

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.

Type issues

The biggest disappointment has to be type as quite often the exported code generates a lot of span commands and breaks the text into fragments of the text 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. It can be saved to an actual scalable vector graphic file as well as the text file.

cleanup the code

The code 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 use the selected items

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

Pasteboard / clipboard option and copying code to Dreamweaver for use in your web pages

You can also just select the artwork, say the entire art board (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 Dreamweaver. It also tends to add definition tags (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. You can still edit the code to remove some of the code