Scalable Vector Graphics (SVG)





What is it all about?

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:

<SVG STYLE="width:100px; height:100px">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="white" />
</SVG>

On screen, it looks like this:


The shapes you can do are:
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:

<SVG viewBox="-2500 -2500 5000 5000">
<g stroke="#000" stroke-width="24">
<circle fill="#fff" r="2376"/>
<path fill="none" d="m-1643-1716 155 158m-550 2364c231 231 538 195 826 202m-524-2040c-491 351-610 1064-592 1060m1216-1008c-51 373 84 783 364 1220m-107-2289c157-157 466-267 873-329m-528 4112c-50 132-37 315-8 510m62-3883c282 32 792 74 1196 303m-404 2644c310 173 649 247 1060 180m-340-2008c-242 334-534 645-872 936m1109-2119c-111-207-296-375-499-534m1146 1281c100 3 197 44 290 141m-438 495c158 297 181 718 204 1140"/>
</g>
<path fill="#000" d="m-1624-1700c243-153 498-303 856-424 141 117 253 307 372 492-288 275-562 544-724 756-274-25-410-2-740-60 3-244 84-499 236-764zm2904-40c271 248 537 498 724 788-55 262-105 553-180 704-234-35-536-125-820-200-138-357-231-625-340-924 210-156 417-296 616-368zm-3273 3033a2376 2376 0 0 1-378-1392l59-7c54 342 124 674 311 928-36 179-2 323 51 458zm1197-1125c365 60 717 120 1060 180 106 333 120 667 156 1000-263 218-625 287-944 420-372-240-523-508-736-768 122-281 257-561 464-832zm3013 678a2376 2376 0 0 1-925 1147l-116-5c84-127 114-297 118-488 232-111 464-463 696-772 86 30 159 72 227 118zm-2287 1527a2376 2376 0 0 1-993-251c199 74 367 143 542 83 53 75 176 134 451 168z"/>
</SVG>

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.


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:

CANVASSVG
  • 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:

rect (rectangles)

xThe x axis positionen for the rectangle's upper left corner.
yThe y axis positionen for the rectangle's upper left corner.
widthThe rectangle's width.
heightThe rectangle's height.
rxThe radius of rounded corners on the rectangle on the x axis.
ryThe radius of rounded corners on the rectangle on the y axis.


circle
rThe circle's radius.
cxPosition of the circle's center on the x axis.
cyPosition of the circle's center on the y axis.


ellipse
rxThe x radius of the ellipse.
ryThe y radius of the ellipse.
cxPosition of the ellipse's center on the x axis.
cyPosition of the ellipse's center on the y axis.


line
x1The x coordinate for point 1.
y1The y coordinate for point 1.
x2The x coordinate for point 2.
y2The y coordinate for point 2.


polygon
pointsA 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)
pointsA 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)
dA list of coordinates and other information regarding how to draw the line, e.g. as shown for the soccer ball above.