"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.)
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
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.
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
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.
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
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.