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
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:
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.
The difference between CANVAS and SVG
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:
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
The variables for the shapes
If you should feel like coding with SVG, the variables are:
The x axis positionen for the rectangle's upper left corner.
The y axis positionen for the rectangle's upper left corner.
The rectangle's width.
The rectangle's height.
The radius of rounded corners on the rectangle on the x axis.
The radius of rounded corners on the rectangle on the y axis.
The circle's radius.
Position of the circle's center on the x axis.
Position of the circle's center on the y axis.
The x radius of the ellipse.
The y radius of the ellipse.
Position of the ellipse's center on the x axis.
Position of the ellipse's center on the y axis.
The x coordinate for point 1.
The y coordinate for point 1.
The x coordinate for point 2.
The y coordinate for point 2.
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)
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)
A list of coordinates and other information regarding how to draw the line, e.g. as shown for the soccer ball above.