Getting Started With SVG
Written by Ian Elliot   
Thursday, 06 September 2018
Article Index
Getting Started With SVG
Sophisticated SVG


Subroutine shapes

If you are going to draw anything complicated then it is worth grouping it together as a sort of graphics subroutine. Any list of tags between <g> and </g> can be referred to and reused by an id.

For example, after:

<g id= "redcircle">
  cx="20"  cy="50" r="20"

You can draw a red circle anywhere using:

<use xlink:href="#redcircle"

You can include other elements in the "transform" attribute such as scale, rotate and skew.

Notice that the circle in the group is also drawn. If you don't want the graphic drawn use the <def> tag in place of <g>.

As well as vector graphic primitives and groups of primitives you can also load entire SVG files and bitmap files. The image tag will read in and display an SVG file or a bitmap – PNG or JPEG.

For example, assuming that the file test.png is stored in the same directory as the .svg file we can write:

<image xlink:href="/test.png
   x="10" y="10"
   width="200" height="200"

The result is the bit map positioned at x,y and scaled to fit the height and width specified. Notice that the image tag goes between the svg tags just like an other SVG drawing operation i.e. it is not an HTML element.

Sophisticated SVG

At this point you might be just beginning to think that this is all a bit primitive. After all who needs another way to draw a circle?

You will have to take it on trust that SVG is a very powerful graphics language that includes some very advanced facilities including animation commands.

The path command (in which L is read as LineTo and M is short for Move) allows you to draw arbitrary Bezier or polyline path. For example this draws a triangle:

<path d="M 100 100 L 300 100 L 200 300 z"
      fill="red" stroke="blue"
      stroke-width="3" />

The following path draws a short Bezier curve:

<path  d="M100,200 C100,100 250,100 250,
                        200 S400,300 400,200" />

The commands available are:


  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath


Of course it would be drawn in the same place every time but you can also specify x,y, width and height to map the drawing to the specified rectangle. Only slightly more advanced is the use of the "transform" attribute to scale, translate and rotate the graphic.

You can also define your own fills. For example a simple linear gradient fill can be defined as:

 <linearGradient id="MyGradient">
  <stop offset="5%" stop-color="#F60" />
  <stop offset="95%" stop-color="#FF6" />

Using it is just a matter of giving its URL as in:

<ellipse cx="200" cy="70" 
         rx="59" ry="50" 
         fill="url(#MyGradient)" />



Linear gradient – no problem.


Radial gradients are just as easy and you can define pattern fills. There are also advanced filter effects, animation controls, clipping, masking and the ability for script languages to interact with graphical objects via events and properties.

These will be explained in future articles but for now let's leave the story here. 



Related Articles

Getting Started With Snap.svg       



Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas




  1. JavaScript Graphics
  2. Getting Started With Canvas
  3. Drawing Paths
      Extract: Basic Paths
      Extract: SVG Paths
      Extract: Bezier Curves
  4. Stroke and Fill
      Extract: Stroke Properties 
      Extract: Fill and Holes
      Extract: Gradient & Pattern Fills
  5. Transformations
      Extract: Transformations
      Extract: Custom Coordinates 
      Extract  Graphics State
  6. Text
      Extract: Text, Typography & SVG 
      Extract: Unicode
  7. Clipping, Compositing and Effects
      Extract: Clipping & Basic Compositing
  8. Generating Bitmaps
      Extract:  Introduction To Bitmaps
      Extract :  Animation 
  9. WebWorkers & OffscreenCanvas
      Extract: Web Workers
      Extract: OffscreenCanvas
  10. Bit Manipulation In JavaScript
      Extract: Bit Manipulation
  11. Typed Arrays
      Extract: Typed Arrays **NEW!
  12. Files, blobs, URLs & Fetch
      Extract: Blobs & Files
      Extract: Read/Writing Local Files
  13. Image Processing
      Extract: ImageData
      Extract:The Filter API
  14. 3D WebGL
      Extract: WebGL 3D
  15. 2D WebGL
    Extract: WebGL Convolutions







To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

raspberry pi books



or email your comment to:


Last Updated ( Tuesday, 11 September 2018 )