Posted on

Adobe Illustrator CC to create SVG graphics

Using Illustrator to create the graphics

Showing how to create some vector graphics in Adobe Illustrator and save it as a proper SVG file to process it further.

1.1 Objects we want to create

Create the document in the best resolution you want. In this case it should be for icons up to 512px x 512px. So create a document of that size. This size will be the viewbox in the SVG afterwards.

Now a simple example using a circle, rectange and path. Just draw them with the proper tools.

Using Illustrator to assign a style

Now we create a graphic style in Illustrator:
1. Window > Graphic Styles (handling the graphic styles)
2. Window > Appearance (editing your graphic style)
3. In graphic styles click on the “New Graphic Style” icon at the bottom
4. Double click the new graphic style and assign a name (this name will be the style/class in SVG)
5. To modify the style, select it, go to the “Appearance” window, change what you want and select “Redefine graphic style” from the small appearance drop down.
6. Drag&drop the graphic style on your objects.

Using Illustrator to save SVG

Now we can save it as SVG:

! Make sure that all your objects are VISIBLE – if some of them are not visible they will not get the proper class assigned in SVG !

1. Go to “File > Save As”
2. Select “.svg” as file type
3. Set the SVG settings like in the screenshot below
4. “CSS Properties” are set to “Style Elements” in our case (so we get a style section in SVG)
5. We can reduce the “Decimal Places” to 1
6. Save it or check the result in “SVG Code …”

Layer name will be the group name in SVG.
Object name will be the id in SVG.
Graphic style will be the class in SVG.

This is the resulting SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
   .mystyle{fill:#FBB040;stroke:#BE1E2D;stroke-width:3;stroke-miterlimit:10;}
</style>
<g id="circle">
   <ellipse id="mycircle" class="mystyle" cx="148.5" cy="145.9" rx="90.2" ry="84.6"/>
</g>
<g id="rectangle">
   <rect id="myrectangle" x="294.9" y="299.8" class="mystyle" width="158" height="143.8"/>
</g>
<g id="path">
   <polygon id="mypath" class="mystyle" points="304.4,152.5 258.8,175.5 238.7,232.9 145.8,277.3 206.7,364.3 262.4,269 336.9,256 365.9,221.7 	"/>
</g>
</svg>

Here some screenshots to make it easier:

1.1 Orange objects

1.1 Objects we want to create

1.2 Created layers and objects

1.2 Objects we want to create

1.3 Appearance and graphic styles
1.3 Graphic styles can be edited at Appearance
1.4 Apply changed appearance to graphic style
1.4 Apply changed appearance to graphic style
1.5 Save vector objects as SVG
1.5 Save vector objects as SVG