Intro to Scalar Vector Graphics

These notes are based on the notes in the Mozilla tutorial on SVG found here.

In the context of this tutorial, a graphic is defined as “a picture, map, or graph used for illustration“.  Scalar Vector Graphics (SVG) is a mark-up language (like HTML) that is used to defines graphics by defining the individual components of the graphic that when rendered together produce a visual representation of the graphic.

An example of a SVG graphic and the code to produce the graphic is shown below.

SVG 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" 
    width="300" height="200" >
  
    <rect width="100%" height="100%" fill="red" />
    <circle cx="40" cy="40" r="120" fill="green" />
    <circle cx="40" cy="40" r="40" fill="blue" />
    <text text-anchor="middle" x="150" y="200" font-size="50" fill="white">SVG</text>
</svg>

The <svg> tag defines the root element of the document, just as the <html> element defines the root element of a HTML document.

  • The xmlns, version and baseProfile attributes of the svg element define which SVG specification the browser should use.
  • The width and height attributes define the size of the graphic.
  • The opening <svg> tag must be closed with a closing </svg> tag.

Within the root element are <rect>, <circle>, and <text> elements.  Generally, an element is rendered on top of the elements that are declared before it.  Notice that these elements don’t have a closing tag.  Since they cannot contain other elements we close them with />.

  • The <rect> element renders a rectangle that is the full width and height of the graphic and colored red.
  • The first <circle> element renders a circle on top of the rectangle and colored green.  The circle has a radius of 120 pixels and is positioned with its center located 40 pixels to the right and 40 pixels down from the origin of the graphic which is in the upper left-hand corner of the graphic.
  • The second <circle> element renders a circle over the first circle and colored blue.  It has a radius of 40 pixels and is positioned with its center located 40 pixels to the right and 40 pixels down from the origin.
  • The <text> element renders the text SVG with the middle of the baseline of the text positioned at (150,200).

Notice that SVG contains attributes, like baseProfile, that include capital letters.  SVG is case sensitive, unlike HTML.  Note also that all of the values assigned to the attributes are specified between double-quotes.

Creating SVG Graphics

In order to create a graphic using SVG we can do any of the following:

  1. Use a drawing app like the professional vector graphics editor InkScape and save the graphic in SVG format as a .svg file.
  2. Create a .svg file from scratch using a file editor like WebStorm. WebStorm is nice for this as it renders the graphic in a panel as you are editing the file.
  3. Embed the SVG markup directly in a web page.

In this course we’ll use the last 2 techniques as we need to learn the SVG markup language so that we can manipulate the graphic elements dynamically using javascript.

Embedding a SVG File

If the SVG is in a .svg file we can embed the SVG graphic into a web page using an <image> tag.  For example, the graphic displayed below is embedded using the following HTML code.

<img src="http://www.n0code.net/work/teaching/courses/csci230/demo/images/svg_logo.svg" />

© 2018 – 2021, Eric. All rights reserved.