Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

SVG Basics – The Basics of SVG styling

The Basics of SVG styling

Up to this point, I’ve shown how to put shapes on the screen and not how to style them. SVG borrows from the CSS (Cascading Style Sheets) and XSL (Extensible Stylesheet Language) standards for most of it’s font and text styling. This is good news if you are familiar with creating web pages using CSS. The bad news is that the SVG standard only defines its own unique properties and you have to hunt through other standard documents for the complete (normative) definition of many commonly used properties. The complete list of shared and non-shared properties is in the SVG standard.

Inheritance and SVG styling

Regardless of how you style, SVG viewers paint objects to the screen by combining the presentation attributes from the object itself and its parents. Any missing attributes are drawn using defaults. If a parent and a child have the same attribute the child’s value is used.

Some elements allow you to link to another tag and inherit from a tag which is not a direct parent. This linked element (and any parents) are inherited before any direct parent.

Code (Inheritance using a group):
<g fill=”green” stroke=”black” >
  <rect x=”10″ y=”10″ rx=”5″ ry=”5″ width=”80″ height=”80″ />
  <g fill=”blue” rx=”10″ ry=”10″ stroke-width=”4″ >
    <rect x=”110″ y=”110″ width=”80″ height=”80″ />
  </g>
</g>

The second blue rectangle doesn’t have rounded corners because ‘rx’ and ‘ry’ are not presentation attributes. They are attributes of the ‘rect’ element.

Styling Choice 1 – Presentation Attributes

Presentation attributes are the basic way that you style in SVG. SVG viewers are required to support this way to style. To summarize the standard: It’s the easy way.

You just add the attributes to the object you wish to style using a presentation attribute. Which objects support which attributes is the tricky part.

<rect x=”20″ y=”20″ rx=”0″ ry=”0″ width=”160″ height=”160″
       fill=”blue” stroke=”black” stroke-width=”4″ stroke-dasharray=”10,5″ />
Code 1. Rectangle. ‘fill’, ‘stroke’, ‘stroke-width’ and ‘stroke-dasharray’ are presentation attributes.

Styling Choice 2 – CSS

CSS provides a way to simplify your document by separating styling and the content of the document. It also has the advantage of reuse across documents. The problem: it’s not required for SVG viewers to support CSS. Viewers which don’t support CSS will ignore the styling and use defaults instead. CSS will override any presentation attributes.

Every presentation attribute has an equivalent CSS style rule with the same name. A large number of CSS text styling properties are the shared between in SVG and HTML. Like HTML, SVG can have can be external, internal and inline CSS.

<rect x=”20″ y=”20″ rx=”0″ ry=”0″ width=”160″ height=”160″
         style=”fill:blue; stroke:black; stroke-width:4; stroke-dasharray:10,5;” />
Code 2. Rectangle. This is the equivalent of code 1 above. This uses inline CSS.

Using internal and external CSS is the preferred way to style with large and complex projects as changing a single line updates all objects with duplicate styling. As well, if an external style sheet is used then any file which uses it changes as well.

<defs>
<style type=”text/css”><![CDATA[
rect {
fill:blue;
stroke:black;
stroke-width:4;
stroke-dasharray:10,5;
}
]]></style>
</defs> <rect width=”100″ height=”100″ class=”rect” />
Code 3. An example internal CSS style sheet.

<?xml-stylesheet href=”style.css” type=”text/css”?>
Code 4. An example reference to an external CSS style sheet.

Styling Conclusions
That was one too many acronyms. I hope that helps you understand the choices you have when styling in SVG. Having a duplicate way to accomplish styling was very confusing to me at first.

Comments