Category: SVG

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" />

Basic SVG Shapes

There are 7 elements that define basic shapes in SVG: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, and <path>.  Below we how examples of the first 6 and discuss the 7th element <path> in the next tutorial.

<rect x="20" y="20"
      width="100" height="50"
      stroke-width="4" stroke="red"
      fill="transparent" />
 
<rect x="20" y="20"
      width="100" height="50"
      stroke="red" stroke-width="4" 
      fill="transparent"
      rx="10" ry="10" />
 
<circle cx="74" cy="45"
        r="25"
        stroke="red" stroke-width="4"
        fill="transparent" />
 
<ellipse cx="70" cy="255"
         rx="50" ry="25"
         stroke="red" stroke-width="5"
         fill="transparent" />
 
<line x1="20" y1="20"
      x2="120" y2="20"
      stroke="red" stroke-width="5"/>
 
<polyline points="20 20 120 20 100 70 40 40"
         stroke="red" stroke-width="5"
         fill="transparent"/>
 
<polygon points="20 20 120 20 100 70 40 40"
         stroke="red" stroke-width="5"
         fill="transparent"/>

The Path Element

The <path> element can be used to create lines, polylines, polygons, arcs, circles, ellipses, and other more complex shapes.

The shape of a path is defined by the d attribute and includes a sequence of commands and parameters for those commands.

Line Commands

There are 5 line commands: M, L, H, V, and Z.

  • M x y – Move to position (x,y).  Each path begins with a M command.
  • L x y – Draw line from current position to (x,y).
  • H x – Draw a horizontal line from the current position to (x.y) where y is the y-coordinate of the current position.
  • V y – Draw a vertical line from the current position to (x.y) where x is the x-coordinate of the current position.
  • Z – Draw a line from the current position to the first point on the path.

Example


The example above was created using the following SVG code.

<path d="M 20 20 H 120 V 120 H 20 Z" stroke-width="4" stroke="blue" />
<path d="M 20 20 L 120 120" stroke-width="4" stroke="blue" />

The first path produces a rectangle as described by the following commands:

  1. M 20 20 – from (20,20)
  2. H 120 – to the point horizontally to the right of the first point at (120,20)
  3. V 120 – to the point vertically below the second point at (120,120)
  4. H 20 – to the point horizontally to the left of the first point at (20,120).
  5. Z – to the starting point at (20,20)

The second path creates a diagonal line using the following commands:

  1. M 20 20 – from (20,20)
  2. L 120 120 – to the point (120,120).

A closed path is filled black by default. We can change this using the fill attribute.  We can also use CSS to stylize the graphic.  In the example above, we use CSS to modify the graphic’s fill attributes when the cursor hovers over the graphic.  Give it a try.  The CSS code is shown below.

path:hover {
    fill:transparent;
}

Relative Line Commands

The line commands that draw lines have relative forms and are denoted by lowercase letters.  The arguments to the relative forms specify the distance (in pixels) between the current point and the new point.

  • l dx dy – Draw line from current position to (x + dx,y + dy).
  • h dx – Draw a horizontal line from the current position to (x + dx,y) where y is the y-coordinate of the current position.
  • v dy – Draw a vertical line from the current position to (x,y + dy) where x is the x-coordinate of the current position.

Example

The above graphic is the same as the first graphic but was created using relative line commands as shown below.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" 
 width="160" height="160" >
 
    <path d="M 20 20 h 100 v 100 h -100 Z" stroke-width="4" stroke="blue" />
    <path d="M 20 20 l 100 100" stroke-width="4" stroke="blue" />
</svg>

The first path produces a rectangle as described by the following commands:

  1. M 20 20 – from (20,20)
  2. h 100 – to the point horizontally to the right of the first point at (20+100,20)
  3. v 100 – to the point vertically below the second point at (120,20+100)
  4. h -100 – to the point horizontally to the left of the first point at (120-100,120).
  5. Z – to the starting point at (20,20)

The second path creates a diagonal line using the following commands:

  1. M 20 20 – from (20,20)
  2. l 100 100 – to the point (20+100,20+100).

Curve Commands

There are 4 different curve commands: C, Q, and A.  There are also shortcut commands for C and Q and relative commands for each of these.

  • C x1 y1, x2 y2, x y – draw a Cubic Bezier curve from the last point to (x,y) using (x1,y1) and (x2,y2) as control points.
  • Q x1 y1 x y – draw a quadratic curve from the last point to (x,y) using (x1,y1) as the control point.
  • A rx ry x-axis-rotation large-arc-flag sweep-flag x y – draw an arc from the last point to (x,y) using radii rx and ry to form the ellipse.

Please refer to the Mozilla Path tutorial for descriptions on the parameters for these commands.

You might find the SVG Path Builder tool useful for visualizing SVG curves and for producing the values for the C, Q, and A commands.

Below is the complete SVG code for each of the graphics shown above.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" 
 width="325" height="175" viewBox="25 25 325 175">

    <rect x="0" y="0" width="100%" height="100%" fill="red" />
    <path d="M 50 100 l 100 50" stroke="black" stroke-width="4" />
    <circle r="5" cx="150" cy="150" fill="white" />
    <path d="M 300 100 l -100 -50" stroke="black" stroke-width="4" />
    <circle r="5" cx="200" cy="50" fill="white" />
    <path d="M 50 100 C 150 150 200 50 300 100" stroke="blue" stroke-width="4" fill="transparent" />
    <circle r="5" cx="300" cy="100" fill="white" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" 
 width="325" height="175" viewBox="25 25 325 175">

    <rect x="0" y="0" width="100%" height="100%" fill="red" />
    <path d="M 50 150 L 175 50" stroke="black" stroke-width="4" />
    <path d="M 300 150 L 175 50" stroke="black" stroke-width="4" />
    <circle r="5" cx="175" cy="50" fill="white" />
    <path d="M 50 150 Q 175 50 300 150" stroke="blue" stroke-width="4" fill="transparent" />
    <circle r="5" cx="300" cy="150" fill="white" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" 
 width="175" height="175" viewBox="25 25 175 175">

    <rect x="0" y="0" width="100%" height="100%" fill="red" />
    <path d="M 50 100 A 50 50 0 1 1 100 150" stroke="blue" stroke-width="4" fill="transparent" />
    <circle r="5" cx="100" cy="150" fill="white" />
</svg>

Shortcut Commands for C and Q

  • S x2 y2, x y
  • T x t

Relative Commands for C,Q,S, and T

  • c dx1 dy1 dx2 dy2 dx dy
  • s dx2 dy2, dx dy
  • q dx1 dy1 x y
  • t dx dy