spleenteo/svg_in_ai.md

## svg_in_ai.md

      
    Raw
  

              svg_in_ai.md
            
          
    Understanding SVG working with Adobe Illustrator

Here some simple notes of things I discover understanding svg world, created with adobe illustrator.
IDs

Every svg tag can have an ID, usefull to set CSS style or to work with javascript.
In AI, layers are basically groups of object. Every object can be named in the layer box and that name will be the id of the relative tag.
<g id=”nome-sub-layer”>
EXPORTING SVG: OPTIONS

CSS Properties

There are four different ways but only three are usefull imho:
Presentation Attributes

This will create an attribute for each style defined
<text fill="#3E4040" font-family="'BebasNeue'">Presentation Attributes</text>
Style Attributes

Styles are compressed in a single attribute named style
<text style=”color:#3E4040; font-family: 'BebasNeue' ”>Style Attribute</text>
Style Attributes (Entity references)

It creates a style tag into within your svg code using ids to set every single style:
  <text id=test>ciao</text>
  <style type="text/css">
    <![CDATA[
      #test{ font-size:72.6618; }
    ]]>
  </style>

SVG vs PNG

At the end, if you have complicated vector design, with lot of points (as a grung pattern for example) it will be easy that a .png file will be much not so heavy as a svg file. Proportion could be 10:1
(some exaple will be reported to better understand)