Scalable Vector Graphics


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

I use SVG in some of my personal sites as well:

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.

All of the SVG examples and illustrations on these pages are created WITHOUT any 3rd party GUI editors or plug-ins. Hand-coding or 'roll your own' is all you will find here.

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 centered.

Objects are drawn in a 500x500 square.

This animation is available in the 'Circles' menu link.

W3C Tutorials