Demystifying Adobe Illustrator's Advanced Options for SVG Work

"What are css properties!?" you exclaim as your sleep-filled eyes glimpse the Advanced Options just as you hit the ok button to save your glorious .svg illustration. (If you have some glorious SVGs to show off, share them with me on twitter.)

img

The descriptions Adobe provides aren't the most helpful. To better understand what is going on I'm going to take a look under the hood.

The 4 Ways Adobe Illustrator Structures SVG CSS Properties

Download the SVGs here from github.

The descriptions in Illustrator don't do the best job at communicating what makes them different. At least not for me. Let's try to figure this out by comparing the exported SVG code side by side for all 4 versions.

img

Presentation Attributes

According to Adobe, Presentation Attributes "applies properties at the highest point in the SVG hierarchy, which allows for the most flexibility for specific edits and transformations."

So what does that mean exactly? Code hierarchy is the structure of the code. The highest point in this SVG's hiearchial structure is <circle>, the one that is the most indented:

<xml...>
<!DOCTYPE...>
<svg...>
    <circle 
    id="spinner-path" 
    fill="none"                 // PROPERTIES APPLIED HERE
    stroke="#333333"            // PROPERTIES APPLIED HERE
    stroke-miterlimit="10"      // PROPERTIES APPLIED HERE
    cx="50" 
    cy="50" 
    r="40"
/>

It might be easier to work with different elements of an SVG at their highest point since you are working directly inside of the element you are changing. The next CSS property we will look at (style attributes) works in much the same way.

The presentation attributes CSS property type has another small difference. The enable-background attribute on line 21, though I don't understand how that makes any difference. If you know the answer let me know

enable-background="new 0 0 100 100"            // PRESENTATION ATTRIBUTES
vs
style="enable-background:new 0 0 100 100;"     // EVERYTHING ELSE

Style Attributes

Adobe says that Style Attributes "creates the most readable files, but may increase file size. Use this for code used in transformations, such as Extensible Stylesheet Language Transformation (XSLT)."

The main difference between Presentation Attribures and Style Attributes is in how the styles are written.

// Presentation Attributes: //
<circle 
    id="spinner-path" 
    fill="none" 
    stroke="#333333" 
    stroke-miterlimit="10" 
    cx="50" 
    cy="50" 
    r="40"
/>

// Style Attributes: //
<circle 
    id="spinner-path" 
    style="fill:none;
    stroke:#333333;
    stroke-miterlimit:10;" 
    cx="50" 
    cy="50" 
    r="40"
/>

Style Attributes (Entity References)

Adobe states: Style Attributes (Entity References) "results in faster rendering times and reduced file size."

I couldn't find out why this renders faster. If anyone knows the answer please tell me.

In this example, the style declarations are made inside the <!DOCTYPE> and reference style="&st0;" inside the circle element.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" 
[
    <!ENTITY st0 
        "fill:none;
        stroke:#333333;
        stroke-miterlimit:10;"
    >
]>
<svg...>
    <circle 
    id="spinner-path" 
    style="&st0;" 


    cx="50" 
    cy="50" 
    r="40"
/>

Note that this method doesn't seem to render correctly in some browsers.

Style Elements

Adobe informs us that Style Elements are "the best option when creating a single style sheet that formats both HTML and SVG documents. This may result in slower rendering speeds."

All the styles are in <style type="text/css"> ... </style> after the opening <svg> element.

Which Way is Best?

Like many of the more interesting questions in life, there isn't one best answer. If you are going to be working directly in the code choose whichever version looks most similar to the way you are comfortable working. In my current project I went with presentation attributes since I'm working with my svg code inline which lets me use css to style the svgs via magic.


Read way more in the w3c spec

Contact me on twitter with your comments, corrections and links to your amazing svg work. Amazing work like this interactive SVG from Water Resources Data Scientist, @jordansread