Scalable Vector Graphics (SVG)

SVG is a way of doing graphics, using code. You specify a number of objects, i.e. lines and geometric shapes, and how they should look in terms of color, thickness, etc. This is contrary to bitmapped images like the jpeg format, where the graphics is a number of pixels with a specific color. The smart part about the objects is that they scale well, so the image looks nices no matter what size it is, where the bitmapped images can become a bit chopped and grainy when you zoom in and out on them. On the other hand, you are limited by having to have objects, so it isn't a solution for all types of graphics.

In principle you can code any image from scratch, but as we shall see shortly, this approach isn't applicable in practice. What you do instead is using a drawing program that can export images in the .svg format. It could be commercial programs like Adobe Illustrator and COREL Draw or free programs like Inkscape.

The SVG tag used for the graphics is for all intents and purposes just a container as we know them from frames, i.e. you can specify size, background color, borders, etc. What you draw, you specify using other tags in the container, e.g. a circle:


On screen, it looks like this:


The shapes you can do are:

• rect (i.e. rectangle)
• circle
• ellipse
• line (i.e. straight line between two oints)
• polygon
• polyline (i.e. open figure consisting of straight lines)
• path (i.e. all lines and shapes)

On occasion, references to other shapes can be encountered, but they are just "path" being used.

Whe you look at the example above, the code looks simple, and it is. But, when you need to have more complex images, the code quickly becomes more complex. This, for example, is a soccer ball:


On screen, it looks like this:


Trying to code this by hand makes no sense. Whatsoever! What you do in practice is to draw what you need in a drawing program, that can save files in the .svg format, and the software will do the code for you.

Simple geometric shapes e.g. for buttins and icons you can easily code in SVG, and the code allows using all sorts of effects like color gradients, shadows, ets. Also you can create animations using SVG, should you want to do that. For this you use an SVG animation generator, which is an animation program for this specific purpose. Like the drawing programs, these can be found in various versions on the net.

For graphics for websites, you have two options, SVG and CANVAS. We are looking at two different ways of working with graphics, with each their advantages and disadvantages. So, if you want to work with graphics, you should consider which type of graphics is the best for the project. The main differences are:

CANVAS	SVG
Dependent on resolution Does not support event handlers Poor rendering of text The generated image can be saved as .png or .jpg Well suited for graphic-intensive games	Independent of resolution Supporting event handlers Best suited for applications with large areas to be rendering (e.g. maps) Slow rendering of complex images (anything using the DOM (Document Object Model) a lot will be slow) Not suited for game applications

If you should feel like coding with SVG, the variables are:

rect (rectangles)

x	The x axis positionen for the rectangle's upper left corner.
y	The y axis positionen for the rectangle's upper left corner.
width	The rectangle's width.
height	The rectangle's height.
rx	The radius of rounded corners on the rectangle on the x axis.
ry	The radius of rounded corners on the rectangle on the y axis.

circle

r	The circle's radius.
cx	Position of the circle's center on the x axis.
cy	Position of the circle's center on the y axis.

ellipse

rx	The x radius of the ellipse.
ry	The y radius of the ellipse.
cx	Position of the ellipse's center on the x axis.
cy	Position of the ellipse's center on the y axis.

line

x1	The x coordinate for point 1.
y1	The y coordinate for point 1.
x2	The x coordinate for point 2.
y2	The y coordinate for point 2.

polygon

points

A list of points, separated by space, comma, EOL (end of line), or a line feed character. In practice, EOL and the line feed character means the use of " or ', as normally used for making the end of a list. A list consisting of the points (0,0), (1,1) and (2,2) is written like this: points="0 0, 1 1, 2 2" where the rendering is ended by drawing a line from the last point to the first point. A point has to have both x and y coordinates.

polyline (open figures consisting of straight lines)

points

A list of points, separated by space, comma, EOL (end of line), or a line feed character. In practice, EOL and the line feed character means the use of " or ', as normally used for making the end of a list. A list consisting of the points (0,0), (1,1) and (2,2) is written like this: points="0 0, 1 1, 2 2". A point has to have both x and y coordinates.

path (all lines and shapes)

d	A list of coordinates and other information regarding how to draw the line, e.g. as shown for the soccer ball above.