SVG essentials. SVG auxiliary elements and style application

We have seen basic shapes in previous articles and now it's time to move to more complicated ones.

Table of contents

1. "g" element
2. "defs" element
3. "use" element
4. "symbol" element
5. Presentation attributes
6. Inline styles
7. Internal style sheet
8. External style sheet

"g" element

The g element stands for "group" and contains graphics elements.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <g fill="none" stroke="darkgray" stroke-width="5">
  <circle r="25" cx="30" cy="30" />
  <rect x="40" y="40" width="55" height="55" />
 </g>
</svg>

We defined fill and stroke for g element, and these attributes were applied to the contained elements.

Sidenote
If you use Adobe Illustrator, each layer of the illustration is g element in SVG output.

"defs" element

The defs stands for "definitions" and defines graphical objects (elements and effects) that can be referenced later by their id values. If we have multiple identical shapes or effects, it makes sense to define them once in defs element and then refer to it.

The descendant elements are not rendered unless they are reference by use element.

The graphical objects must have ids so we can clone them using URL reference:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <circle fill="lightblue" cx="0" cy="0" r="10" id="smallCircle" />
 </defs>
 <use x="20" y="20" href="#smallCircle" />
 <use x="40" y="40" href="#smallCircle" />
 <use x="60" y="60" href="#smallCircle" />
 <use x="80" y="80" href="#smallCircle" />
</svg>

We can omit defs element and define graphical objects just inside SVG, however, it's good for code readability to place the reusable objects inside defs element.

"use" element

As the example shows, use element refers to circle, which was defined inside defs element, and makes a copy of it.

We can define x and y (coordinates of the position of the element). Attributes width and height can be applied only if the referenced element is either svg or symbol.

"symbol" element

With this element we can set different sizes of the displayed copies. Also, we can group elements by wrapping symbol around it. However, it doesn't display anything unless we refer to it using use element.
Since, we define symbol for later use, it should go inside defs:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <defs>
  <symbol id="smallGroup" viewBox="0 0 10 10">
    <polygon fill="seagreen" points="0,10 10,10 5,0" />
    <circle fill="plum" cx="9" cy="9" r="1" />
    <circle fill="sandybrown" cx="1" cy="7" r="1" />
    <circle fill="slateblue" cx="5" cy="8" r="1" />
  </symbol>
 </defs>
 <use width="50" height="50"  x="25" y="40" href="#smallGroup" />
 <use width="40" height="40"  x="30" y="20" href="#smallGroup" />
 <use width="30" height="30"  x="35" y="0" href="#smallGroup" />
</svg>

Here, symbol set its own nested coordinate system for the graphics it contains.

Presentation attributes

In the previous article, we encountered some presentation attributes like fill, stroke and stroke-width. However, there are many more:

• fill;
• stroke;
• stroke-width;
• stroke-dasharray
• opacity specifies how opaque the whole graphical object is;
• fill-opacity applies to the background of the object;
• stroke-opacity applies to the border of the object;
• paint-order controls the order of fill, stroke and markers. Possible values:
  • normal: 1) fill 2) stroke 3) markers
  • order of fill, stroke and markers:

if some values are omitted in the sequence, they are placed according to normal.

• stroke-dasharray="dash gap..." makes a stroke dashed with specified dash lengths and gap lengths (pixels or percentage of the SVG viewport).

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <g fill="none" stroke-width="10">
  <circle
   stroke="orange"
   r="20"
   cx="25"
   cy="25"
   stroke-dasharray="1"
  />
  <circle
   stroke="green"
   r="20"
   cx="65"
   cy="65"
   stroke-dasharray="1 2 4 8"
 />
 </g>
</svg>

The orange circle has only one value 1 for stroke-dasharray. That means 1px for dash and gap. The green circle has four values: 1px for the first dash, 2px for the first gap, 4px for the second dash, 8px for the second gap and repeat until the path ends.

• stroke-dashoffset moves dashed stroke at a specified value

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <path 
    fill="none"
    stroke="violet" 
    stroke-width="10" 
    d="M10,50 Q30,10 50,50 T90,50"
    stroke-dasharray="5"
    stroke-dashoffset="5"
 />
 <path 
    fill="none"
    stroke="black" 
    stroke-width="1" 
    d="M10,50 Q30,10 50,50 T90,50"
 />
</svg>

We have the stroke with equal sizes for dashes and gaps 5px. Since we moved the dashed stroke by 5px using dashoffset, it starts with a gap now.

• stroke-linecap sets the shape of the ends of the open path and takes the following values:

butt

round

square

• stroke-linejoin sets the shape for corners and takes the following values:

miter

round

bevel

Important: Presentation attributes are always overridden by styles applied with CSS rules!

Inline styles

We can also use the inline style attribute like in HTML elements:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <polyline
  style="
   fill: none; 
   stroke: lightsalmon; 
   stroke-width: 20; 
   stroke-dasharray: 1;
  "
  points="20,20 50,70 80,20"
 />
</svg>

Internal style sheet

The style element contains all styles used in the SVG element and its structure is the same as in HTML document. We can include style element inside defs element or at the top of the svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <style>
  ellipse, rect {
   fill: lightseagreen;
  }
  rect {
   stroke: teal;
  }
  .ribbon {
   fill: teal;
  }
 </style>
 <ellipse
  cx="50"
  cy="50"
  rx="45"
  ry="20"
 />
 <rect 
  class="ribbon"
  width="50"
  height="36"
  x="25"
  y="20"
  rx="25"
  ry="10"
 />
 <rect 
  width="50"
  height="30"
  x="25"
  y="20"
  rx="25"
  ry="10"
 />
</svg>

External style sheet

For inline SVGs, the style sheet linked to the HTML document applies styles for SVG elements:

index.html

<head>
 ...
 <link href="style.css" rel="stylesheet" type="text/css"></head>
<body>
 <svg>
  ... 
 </svg>
</body>

@import rule

We can also create an external CSS file and import it inside SVG:

<svg>
 <style type="text/css">
  @import "style.css";
 </style>
</svg>

However, such method won't work for SVGs embedded with the img element.