Scalable Vector Graphics

Scalable vector graphics (SVG) are 'illustrations' created by code (plain text) instead of the traditional method of using an authoring tool to create JPEG, PNG, or similar bitmap images.

You are encouraged to view the source code of these web pages to see the actual code. For example, the gray coordinate box is created using SVG commands.

As well, view the pages with the 'zoom in' feature of your browser to see the increased size of the images, without blurring or pixelation.

In Safari, the 'Cmd +' and 'Cmd -' key combinations do this (⌘ + / ⌘ -).

I program on an iMac - those are the keys I use. Sorry, you'll have to figure out your own on something else.

The menu leads to several examples of using SVG imagery in web pages. To do this we will be using a plane like the one above.

This shows x and y coordinates of important points in the SVG system.

Note that the 'origin' of the SVG grid is at top-left as opposed to Cartesian grids, where the origin is bottom-left.

Objects are drawn in a 500x500 square.

W3C Tutorials

(250,250) (500,250) (0,250) (250,0) (250,500) (500,0) (0,0) (0,500) (500,500)