Introduction
This document provides practical guidance to help you code your own graphics using SVG.
Navigate
to specific sections using the nav menu, or scroll through section by section to complete
each module
from beginning to end. A brief summary of each module is provided below.
Basics
Draw
Bézier Curves
Animation
1. Basics
1.1 What is SVG?
SVG images are images that are described by a path (i.e. a vector). An SVG file doesn't
contain a bitmap of the
image itself. Instead, it contains a set of descriptions that instruct the computer on how
to
draw the image. This means that the image is generated and displayed by the same computer.
So long as the computer has access to the SVG file, it can render the
image at the optimal resolution for its display, and it can re-render the image an
infinite number of times, adjusting the resolution where necessary.
The set of instructions that describe an SVG are a type of Extensible Markup Language
(XML). Understanding the syntax and semantics of SVG markup will enable you to edit
and manipulate SVG images or draw your own images using only code.
1.2 Terms Defined
SVG = Scalable vector graphics.
Scalable – able to be increased or decreased in size while
retaining
optimal resolution.
Vector – a path, with a start point and an end point, which
may contain
curves
and angles along the way.
Graphics – visual images; although SVG also supports:
text, fonts,
linking,
animation, metadata and compositing.
Bitmap – a digital image comprised of a matrix of dots; when
viewed at 100% each dot corresponds to an individual pixel on the display.
Raster – a matrix of cells organised into a grid;
raster-based images is synonymous with bitmap images.
XML (Extensible Markup Language – a simple text-based format
used to represent structured information; it is one of the most widely-used formats for
sharing structured information today.
1.3 Brief History
1.4 Benefits of SVG
- Scalability
- One SVG file allows an image to be displayed on different screens with optimal
resolution. By contrast, raster-based images
- Reduced file size
- Dynamic styling and scripting
- Easily editable
- Keywords can be found by search engines
1.5 Limitations of SVG
1.6 Inline SVG
1.7 SVG Tag in HTML
2. Draw
2.1 Basic Shapes
There are 6 basic shapes in SVG markup: line, polyline, rect, polygon, circle, and ellipse.
Each of these elements is compiled into the Path element before being rendered for display.
These tags provide a syntactic sugar that generally reduces the number of inputs required to
draw a shape. In some cases, you may still prefer to use the Path tag, even where another
tag could have drawn the same shape.
2.2 <line>
The line tag draws a single straight line.
2.3 <polyline>
The polyline tag draws a shape consisting of only straight lines.
2.4 <rect>
2.5 <polygon>
2.6 <circle>
A circle is a special case of the ellipse shape where the two radius attributes are equal
i.e. rx = ry = r
Attributes
cx x coordinate of the center of the circle.
cy y coordinate of the center of the circle
r Radius of the circle. (r only; not 'cr'
2.7 <ellipse>
2.8 The Path Element: <path>
2.9 Path Commands
3. Bézier Curves
Bézier curves allow us to describe smooth curves using only a few control points – typically
3 or 4 points.
4. Positioning
4.1 The Coordinate System
Coming soon.
5. Animation
5.1 Overview
Coming soon.