SVG Tutorial 3: elements and attributes

svg elementen

The <svg> element

<svg xmlns="http://www.w3.org/2000/svg"  width="900px" height="600px" >
...
</svg>

As we found out in the tutorial SVG: the basics, a <svg> element can be a part (embedded) of a HTML page or of a SVG document. The width and height attributes of the svg element define the dimensions of the svg element. The viewport, which is defined by the viewbox attribute, or in other words the area in which the SVG is rendered, provides for the scaling.

Example 1: <svg> elements with identical content but different viewports

Schaal 1:2

<svg  width = "400px" height = "200px"  viewBox = "0 0 800 400" >
 <rect x = "10" y = "10" width = "200" height = "100" 
 fill = "#fff" stroke = "red" stroke-width = "7"/>
</svg>
Viewbox 1
Image 1. Scale 1:2

Scale 1:1

<svg  width = "400px" height = "200px"  viewBox = "0 0 400 200" >
 <rect x = "10" y = "10" width = "200" height = "100" 
 fill = "#fff" stroke = "red" stroke-width = "7"/>
</svg>
Viewbox 2
Image 2. Scale 1:1

Scale 2:1

<svg  width = "400px" height = "200px"  viewBox = "0 0 200 100" >
 <rect x = "10" y = "10" width = "200" height = "100" 
 fill = "#fff" stroke = "red" stroke-width = "7"/>
</svg>
Viewbox 3
Image 3. Scale 2:1

Check this example in your browser

The <g> element

<g>
...
</g>

The purpose of the <g> element is grouping SVG elements, like for example grouping the shape elements (see tutorial SVG basic shapes). But the <g> element can also contain <desc> and <title> elements which are supposed to give meta information about the <g> element. Grouping elements results in clearer and shorter code, like in the example below:

Example 2: <g> in action.

Without grouping


<svg width="400px" height="300px">
 <rect x="10px" y="20px" width="100px" height="50px"
 style="fill:none;stroke:red; stroke-width:4px"/>
 <rect x="10px" y="120px" width="100px" height="50px"
   style="fill:none;stroke:red; stroke-width:4px"/>
 <rect x="10px" y="220px" width="100px" height="50px"
 style="fill:none;stroke:red; stroke-width:4px"/>
</svg>

With grouping using the <g> element


<svg width="400px" height="300px">
<g style="fill:none; stroke:red; stroke-width:4px" >
<rect x="10px" y="20px" width="100px" height="50px" />
<rect x="10px" y="120px" width="100px" height="50px" />
<rect x="10px" y="220px" width="100px" height="50px" />
</g>
</svg>


The <g> can also be used for transformations on a group of elements as a whole, instead of separately, like in the example below (we will discuss SVG transforms in a following tutorial):

Example 3: transformation of a <g> element.


<svg width="500px" height="400px">
 <g transform="translate(100px,100px)">
 <rect x="0px" y="0px" width="50px" height="50px" style="fill:red"/>
 <rect x="0px" y="100px" width="50px" height="50px"
 style="fill:red; opacity:0.4;"/>
 </g>
</svg>

The <title> and <defs> element

The <title> and <defs> elements we see mostly at the begining of a <svg> element

<title>
...
</title>

The <title> element provides us with information about the <svg> element in which it is placed.

<defs>
...
</defs>

The <defs> element contains definitions which can be reused by referring to it. An example we'll find in the discussion of the <use> element further on in this tutorial.

The <symbol> element

<symbol>
...
</symbol>

The <symbol> element defines graphical elements, like for example a logo, which can be used elsewhere in the page by means of the <use> element. <symbols> elements are usually placed inside the <defs> element. A <symbol> joins one or several SVG shapes and therefore provides us with structure to the code and extra semantic significance

Example 3: <symbol> in action.

<svg width="800px" height="500px" viewBox="0 0 800 500">
<defs>
<symbol id="logo" viewBox="0 0 800 500">
<text x="5" y="15" >Tricol.com</text>
<rect x="5" y="20" width="15" height="15"
 style="fill:red"/>
<rect x="25" y="20" width="15" height="15"
 style="fill:yellow"/>
 <rect x="45" y="20" width="15" height="15"
 style="fill:blue"/>
</symbol>
</defs>
<use xlink:href="#logo" />
</svg>

The <use> element

<use>
...
</use>

An efficient way to organize SVG elements which are to be use more than once on the page, is by placing them inside a <defs> element. Subsequently we can refer to this more frequently occurring element by means of the <use> element as demonstrated in the example below:

Example 4. <use> element in action

<svg width="600px" height="400px">
  <title>Demo van  use element</title>
 <defs>
 <line id="horiz" x1="20px" y1="30px" x2="420px" y2="30px"
 style="stroke:red; stroke-width:5px; stroke-dasharray:3,3;
 fill:none;"/>
 <line id="vert" x1="20px" y1="30px" x2="20px" y2="330px"
 style="stroke:red; stroke-width:5px; stroke-dasharray:1,9,3;
 fill:none;"/>
 </defs>
<!-- Horizontal lines -->
 <use xlink:href="#horiz" />
 <g transform="translate(0,100)">
 <use xlink:href="#horiz" />
 </g>
 <g transform="translate(0,200)">
 <use xlink:href="#horiz"  />
 </g>
 <g transform="translate(0,300)">
 <use xlink:href="#horiz"  />
 </g>
<!-- Vertical lines -->
 <use xlink:href="#vert" />
 <g transform="translate(100,0)">
 <use xlink:href="#vert" />
 </g>
 <g transform="translate(200,0)">
 <use xlink:href="#vert" />
 </g>
 <g transform="translate(300,0)">
 <use xlink:href="#vert" />
 </g>
 <g transform="translate(400,0)">
 <use xlink:href="#vert" />
 </g>
</svg>


The <script > element

<script>
...
</script>

The <a> element

<a>
...
</a>

The SVG <a> element is similar in terms of the functions it fulfills, to the HTML/XHTML <a> element. Note that the typical blue color of the anchor text in the link in image 5 is applied by an external style rule in the code. In SVG 1.1 this doesn't happen by default like in HTML. Also pay attention to the type of cursor (hand) which appears after hovering the link.

Example 5: a text link in SVG


<svg width="500" height="100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.preludio.nl"  target="new">
<text x="30px" y="50px" style="stroke:blue;">
Klik hier om naar de homepage van de auteur te gaan
<tspan x="30px" dy="1.5em">
Deze code gebruikt de  xlink target attribute met de value "new".
</tspan>
</text>
</a>
</svg>

XLink
Image 5. A xlink in SVG for opening a page in a new window.

Check this example in your browser

The <pattern> element

<pattern>
...
</pattern>

A SVG pattern is defined using the <pattern> element. It defines repeated elements inside the (graphical) pattern and is therefore commonly placed inside the <defs> element. As with the <symbol> element, the <pattern> element provides us with structure to the code and extra semantic significance. Also take notice of the clipping or masking effect that occurs in the example below:

Example 6: <pattern> in action



<svg width="600px" height="500px" viewBox="0 0 960 800"
  xmlns="http://www.w3.org/2000/svg">
  <defs>
  <pattern id="star" patternUnits="userSpaceOnUse"
  x="0" y="0" width="100" height="100" viewBox="0 0 130 130" >
<line x1="30" y1="50" x2="70" y2="50" stroke="darkslategray" 
  stroke-width="40" stroke-opacity="0.7" 
  stroke-linecap="round" fill="none" />
  
  <line x1="50" y1="30" x2="50" y2="70" stroke="darkslategray" 
  stroke-width="40" stroke-opacity="0.7" 
  stroke-linecap="round" fill="none" />
  </pattern>
  </defs>
  <rect fill="url(#star)" x="20" y="20" width="450" height="270" rx="60" ry="50"
  stroke="red" stroke-width="10"/>
  </svg>

SVG patroon
Image 6. A pattern in SVG format using the <pattern> element.

Check this example in your browser

 

The <path > element

<path>
...
</path>

The <path> element will be discussed in a next tutorial

The SVG shape elements below were already discussed in the tutorial2 SVG basis shapes

The <rect > element

<rect>
...
</rect>

The <circle > element

<circle>
...
</circle>

The <ellipse > element

<ellipse>
...
</ellipse>

The <polyline > element

<polyline>
...
</polyline>

The <polygon > element

<polygon>
...
</polygon>

Next tutorial

Leave a comment