Lars Eighner's Homepage

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.

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.

Sources:

Recommended:

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

Category: Math

About Math