Scalable vector graphics (SVG) are 'images' 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 figure to the left 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 does this (⌘ + / ⌘ -).
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 to the left.
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.