SVG Concepts > Styling SVG

Print this Page             Close Window

Styling SVG

SVG uses styling properties to define how the graphics elements in the SVG content are to be rendered. It makes SVG more flexible, faster to download and easier to maintain.

Styling properties can be assigned either using

  • SVG’s presentation attributes - the basic way of styling in SVG.

  • CSS (Cascading Style Sheets) - Using CSS to add style information to SVG elements. CSS rules can be neatly exploited in SVG document as external CSS style sheet, internal CSS style sheet or inline style.


Styling Method 1 - Using Presentation Attributes

For each style property defined in SVG, there is a corresponding presentation attribute (XML attribute). To change the styling result, we can simply alter the value of the relevant presentation attributes.

We use presentation attributes to apply style directly to objects. This example shows how the fill and stroke properties can be assigned to a rectangle. The rectangle is filled with red and outlined with blue.

  .......
<svg width="500" height="300">
      <rect x="200" y="100" width="100" height="80"
      fill="red" stroke="blue" stroke-width="3"/>
  </svg>

 

Styling Method 2 - Using CSS

1) Inline CSS property declarations

Similar to the style attribute in HTML, CSS inline style can be declared within a style attribute in SVG by specifying a semicolon-separated list of property declarations, where each property declaration has the form "name: value".

The following example shows how the fill and stroke properties can be assigned to a rectangle using the style attribute. Just like the previous example, the rectangle will be filled with red and outlined with blue:

  .......
<svg width="500" height="300">
      <rect x="200" y="100" width="100" height="80"
      style="fill:red; stroke:blue; stroke-width:3"/>
  </svg>


2) Internal CSS style sheet references

CSS style sheets can be embedded within SVG content inside of a <style> element. The following example uses an internal CSS style sheet to achieve the same result as the previous example:

  .......
 <svg width="500" height="300">
 <defs>
     <style type="text/css"><![CDATA[
       rect {
           fill: red;
           stroke: blue;
           stroke-width: 3
       }
     ]]></style>
  </defs>
      <rect x="200" y="100" width="100" height="80"
  </svg>

Note how the CSS style sheet is placed within a CDATA construct (i.e., <![CDATA[ ... ]]>). Placing internal CSS style sheets within CDATA blocks is sometimes necessary since CSS style sheets can include characters, such as ">", which conflict with XML parsers. Even if a given style sheet does not use characters that conflict with XML parsing, it is highly recommended that internal style sheets be placed inside CDATA blocks.

3) External CSS style sheet references

The following example shows the use of an external CSS style sheet to set the fill and stroke properties on all rectangles to red and blue, respectively:

 

mystyle.css
 

  rect {
     fill: red;
     stroke: blue;
     stroke-width: 3
  }

SVG file referencing mystyle.css

  <?xml version="1.0" standalone="no"?>
  <?xml-stylesheet href="mystyle.css" type="text/css"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN">
  <svg width="500" height="300">
        <rect x="200" y="100" width="100" height="80"
  </svg>