Skip to content

Lars Eighner's Homepage


calumus meretrix et gladio innocentis


What is SVG

SVG (Scalable Vector Graphics) is a scheme for expressing graphics in XML (Extensible Markup Language). SVG is viewable in HTML 5 enabled browsers, which includes recent versions of most popular browsers.

Most often SVG images are created in SVG paint or draw programs, some of which are in Javascript (so they can be used in browsers) and some of which are stand-alone programs. But SVG is a form of XML, so it is text that can also be created in any text editor. SVG can include pictures in other graphic formats and, if desired, can apply various effects to them. Actually expressing photo-realistic pictures in SVG is theoretically possible, but the files would be huge. But SVG is practical for line drawings, logos, cartoons. SVG has many more capabilities than will used or mentioned here.

The SVG Canvas

"Canvas" means the drawing area. ("Canvas" is also the name of a Javascript system for drawing that is not the same as SVG.)

In SGV, the origin (0,0) is in the upper left corner. The positive direction of the y-axis (vertical axis) is down. Angles are measured clockwise. Roots of this system go back to early days of computing. But this will almost certain be challenging to those familiar with the usual mathematical system.

It is relatively easy to make things somewhat easier for the user (person writing SGV markup). The origin can be moved to any convenient place by translation, and the the positive direction of y can be reversed by scaling it with -1. These changes can be set once and thereafter the user can write in the co-ordinates he likes. (Scaling can also make the units something other than pixels.) But I have not found a fix for angles.

SVG Native Co-ordinates O SVG Co-ordinates Translated O SVG Co-ordinates Translated and Scaled O SVG Co-ordinates fixed text O
Imperfect Solution

All three of these figures are created with the same markup (except for color name. The native axes are shown in silver. The axes translated by 40 pixels in both directions are shown in blue. The black axes are translated even farther down and left and the y-axis is scaled with -1. Unfortunately, the text 0 does not do as I would like under scaling. Red shows the text scaled again with the position adjusted. The moral of this story seems to be, learn to work with the SVG canvas as it is.

Number Line -5 -4 -3 -2 -1 0 1 2 3 4 5 Number Line

Grid Number Line X-Axis -5 -4 -3 -2 -1 1 2 3 4 5 Number Line Y-Axis -5 -4 -3 -2 -1 1 2 3 4 5 O x y1 Rectangular Co-ordinate Plane

L O 1 2 3 4 5 6 30° 60° 120° 150° 210° 240° 300° 330° 90° 270° 180°
Polar Co-Ordinate Plane



  1. Scalable Vector Graphics (SVG) 1.1 (Second Edition) W3C
  2. SVG Essentials O'Reilly Commons

Category: Math

About Math

Read or Post Comments

No comments yet.

This is a student's notebook. I am not responsible if you copy it for homework, and it turns out to be wrong.

Figures are often enhanced by hand editing; the same results may not be achieved with source sites and source apps.


This page is MathSVG

December 23, 2018

  • HomePage
  • WikiSandbox


Contact by Snail!

Lars Eighner
APT 1191
8800 N IH 35



The best way to look for anything in LarsWiki is to use the search bar.

Page List


Physics Pages

Math Pages

Math Exercises

Math Tools