Tutorial SVG 1: SVG basics

svg basics

Scalable Vector Graphics (SVG) with file extension .svg is a file format, based on XML, for describing two-dimensional vector images. They can be used for static images as well as for interactivities or in animations.

Example 1: a circle in SVG format. See image 1

De <svg>...</svg> tag has the following syntax:

<svg xmlns="http://www.w3.org/2000/svg">...</svg>
Cirkel in SVG formaat
Image 1. Circle in SVG format.

The HTML code

<!DOCTYPE html>
<html>
<head>
<title>Cirkel in SVG formaat</title>
<meta charset="utf-8" />
</head>
<body>
    <svg id="svg_cirkel" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle id="redcircle" cx="100" cy="100" r="50" fill="#b0392e" />
    </svg>
</body>
</html>

Check this example in your browser

1.1 Advantages and drawbacks of the SVG format

SVG images have the following advantages. As already stated: SVG is based on the XML format and therefore easy to interchange between software applications. Furthermore, SVG:

  • is easy to learn;
  • reacts on user input;
  • displays no loss of details when zooming in or out in contrast with bitmap images. therefore SVG images are suitable for technical applications with detailed drawings;
  • images have a small file size compared to bitmaps (like for example .jpg .gif, .png en HTML Canvas). When the SVG is compressed, the file size becomes even smaller. Compressed SVG's carry the extension .svgz;
  • are searchable (e.g. by search engine spiders) due to the (XML) text base;
  • images currently are insertable in HTML5 documents, while HTML5 is nowadays supported by all the latest versions of the standard browsers (except Internet Explorer 9 and lower) so SVG is too!.
As drawbacks can be mentioned:
  • the source code is hard to protect;
  • SVG is not yet the standard in providing interactive media. However, now that support for Flash disappears more and more on mobile devices, in the long run SVG might become the standard, perhaps in conjunction or together with HTML Canvas;

1.2 SVG versus Canvas

The main difference between the two formats is that SVG consists of vector images while Canvas elements consists of pixels.
Furthermore, SVG images are based on XML and can be dynamically generated on the server or using an application like Illustrator or Inkscape.
Canvas images are based on Javascript (Canvas API) and fail to show in browsers with Javascript disabled. Anno 2011 however this is quite exceptional.
So when to use SVG, and when to use Canvas?
SVG is a so called Retained mode graphic and therefore recommended for use in interactive applications in which click and other mouse events are part. (it binds the events directly to the DOM). It is therefore well applicable in maps. SVG is however not recommended for use in heavy animations (because of the slowness of the DOM) and neither for heavy data-driven charts (because of the large amount of DOM adjustments).
A wonderful aid when working with SVG is the Raphaƫl Javascript library.
For more details concerning the difference between SVG en Canvas I recommend the article 'Canvas vs SVG: How to Choose the Right Format'.

1.3 SVG versus Flash

At this moment Adobe is still a important player in the field of vector technology, known from the vector drawing application 'Illustrator' and vector animation application 'Flash'. But market leadership (especially Flash) starts to crumble with the increase of popularity of HTML5 Canvas ans SVG. But what is the use of SVG anyway when we already have Flash? In the first place the costs. Flash costs money while SVG (an open standard) is for free. Besides that Flash has (due to a comprehensive development environment) a steeper learning curve. Furthermore, Flash movies are compiled into a binary format (.swf) thereby foreclosing the source code for the user. Also because of this compilation the animations are faster than the SVG counterpart. Drawback in using Flash is the necessary viewer plug-in which has to be installed in the browser (with a large variety of versions and necessary upgrades). Besides that, when not properly updated, they cause security leaks in the browser. Last but not least: SVG is, in contrast with Flash, searchable by search engine spiders.

1.4 SVG in web pages

There are a few possibilities on which SVG content (with MIME type "image/svg+xml") can be placed in a web-page.

1.4.1 As a stand-alone web-page.

Example 2: stand-alone SVG page containing a rectangle. See image 2

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg view Box = "0 0 500 600"  version="1.1"
     xmlns="http://www.w3.org/2000/svg" >
   <rect x = "0" y = "50" width = "600" height = "400" fill = "#b0392e" stroke = "black" stroke-width = "3"/>
</svg>

Stand-alone SVG pagina
Image 2. Stand-alone SVG page

Check this example in your browser

1.4.2. Embedded by reference.

Example 3: embedded by reference SVG

<!DOCTYPE html>
<html>
  <head>
  <title>Inline embeded rechthoek in SVG formaat </title>
  <meta charset="utf-8" />
  </head>
  <body>
  <h4>Embedded by reference SVG in HTML5 pagina</h4>
  <img src="willekeurig.svg"  />
  </body>
</html>

Check this example in your browser

1.4.3. Inline embedded .

Example 4: Inline embedded rectangle in SVG format in aHTML5 document. See image 3

<!DOCTYPE html>
<html>
  <head>
  <title>Inline embeded rechthoek in SVG formaat </title>
  <meta charset="utf-8" />
  </head>
  <body>
  <h4>Embedde by reference SVG in HTML5 pagina</h4>
  <svg id="rechthoek" height="600" xmlns="http://www.w3.org/2000/svg">
  <rect x = "0" y = "50" width = "600" height = "400" fill = "#b0392e" stroke = "black" stroke-width = "3"/>
  </svg>
  </body>
</html>

Embedded SVG
image 3. Embedded SVG in HTML5 page

Check this example in your browser

1.4.5. External link using the HTML5 'a' element.

Example 5: linking to a SVG document

Open the SVG document by clicking this link.

This option is convenient if you'd like to use a SVG-viewer, instead of a regular browser.

1.4.5. Reference from a CSS or XSL property.

Example 6: SVG background image defined in a stylesheet.

<!DOCTYPE html>
<html>
	<head>
    <title>Div met SVG backgroundd </title>
    <meta charset="utf-8" />
    </head>
    <style>
        div.outer {
        height: 200px;
        width: 300px;
        background-image: url(images/html5_logo2.svg);
        background-position: center center;
        background-repeat: no-repeat;
        border: 1px solid #999;
        }
        
        div.inner{
        font-family: Verdana, Geneva, sans-serif;
        font-size: 58px;
        font-weight: bold;
        color: #000;
        padding:70px 75px 50px 40px
        }
    </style>
    <body>
        <div class="outer">
        <div class="inner">
        HTML5
        </div>
        </div>
    </body>
</html>

DIV met CSS background in SVG formaat
Image 4. DIV with a CSS background in SVG format

Check this example in your browser

1.5 Scaling SVG without quality loss

Finally, I give a somewhat more complicated example in order to demonstrate the possibilities of SVG. When you scale the browserwindow in which you open the page below, you will notice that the HTML5 logo also scales at the same amount without loosing quality.

Example 7: HTML5 logo in SVG format. See image 5.

HTML5 logo in SVG formaat
Image 5. HTML5 logo in SVG format.

The HTML code

<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 logo in SVG formaat</h2>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <title>HTML5 Logo</title>
      <polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 			"/>
      <polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894 			"/>
      <polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
      <polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
      <path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
      <path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
      <path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
      <path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
      <polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
      <polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
    </svg>

</html>

Check this example in your browser

Next tutorial

Leave a comment