scalable vector graphics svg

This mini tutorial is about Scalable Vector Graphics, also known as SVG. If you need to draw vector images in an XML format, this is probably all you would ever need. Well, Scalable Vector Graphics and knowing how to use it, of course. In any case, drawing two dimensional images is not that tricky, but we will try and limit the scope of this tutorial to basic components as well as showcase a couple of examples. Keep in mind, though, that the main prerequisite for this tutorial is the basic proficiency at XML, HTML and Javascript, otherwise it will not make much sense. So, in a nutshell, the target audience is a very select group of people, who are somewhere in-between complete laymen and experienced programmers.

Read: Best SVG Tools for Web & Graphic Designers

What Are Scalable Vector Graphics?

Well, if we need to get all technical about it, we are talking about a language which is based on XML and whose main purpose is to define and enable vector based graphics, which are to be displayed online. Images created using Scalable Vector Graphics are vastly different from most of the regular ones, because they can be safely resized without fear of any loss of quality whatsoever. This quality also makes them incredibly easy to animate or modify, making them fully compatible with HTML, DOM or XSLT.

What separates SVG images from the rest is that they can be created using almost any kind of text editor and can be modified in much the same way. Zooming in and out can often ruin an image completely, but if it was created using SVG, this is never an issue, and neither is searching for it. These images can be safely compressed and scripted, and the quality will remain the same. You can simply print them out in any resolution that you desire, and since this is an Open Standard, there should be no major issues in this regard either.

On the other hand, these images tend to be much bigger and more memory-consuming than other types of images. This is mostly due to the fact that their format size is a lot more demanding in comparison to formats on other images. This makes size an issue in some cases, especially for really small images, but for the most part, this is an acceptable tradeoff under normal circumstances.

How to Use Scalable Vector Graphics?

There is a whole number of different ways that SCV or Scalable Vector Graphics can be used. For one, you can use it to draw any number of shapes that can be improved with all sorts of effects. We do not have the time to go into every single detail, but the basics should more than suffice for now.

Recommended: Free SVG Business Icons

Drawings

First and foremost, the common shapes include circles, ellipses, rectangles, lines, paths and others. We are going to go through every single one of them, starting with circles.

Circle <circle>

The main element is the <circle> and its attributes are “cx” and “cy” as coordinates on the x and y axis respectively, and “r” is the length of the radius of the circle. Default values for cx and cy are 0.

Let’s say, you need a simple image, something like a green circle with a red edge. In most other formats, the actual dimensions would matter as they would impact the size of the file, but with SVG images, the actual size of the image does not play such an important role. You could potentially “draw” this circle using SVG and it would look like this.

For example, the coding for a circle without opacity would look something like this:

<html>
<title>Simple SVG Circle element</title>
<body>
<svg width="1000" height="1000">
<g>
<circle cx="200" cy="200" r="100" stroke="green" stroke-width="2" fill="rgb(133,22,133)"></circle>
</g>
</svg>
</body>
</html>

svg circle

The end result could be seen in a suitable web browser. However, if the goal was a circle with opacity, that same circle would be programmed in a slightly different manner:

<html>
<title>Simple SVG Circle element</title>
<body>
<svg width="1000" height="1000">
<g>
<circle cx="200" cy="200" r="10"
style="fill:rgb(133,22,133);stroke-width:2;
stroke:rgb(0,128,0);stroke-opacity:0.2;opacity:0.2"> </circle>
</g>
</svg>
</body>
</html>

There are a number of things that could have been instead of that “circle” element. You can use SVG to draw almost any basic figure and even create stuff on your own. For one, you could have chosen a rectangle, and in this case the command would have been “rect”. Aside from that, there is “ellipse” if the image you had in mind was, well, elliptic. You could also draw lines, open and closed shapes and even polygons and paths. We will cover more about all of these in the second part of this tutorial. For now, suffice it to say that other forms are available but are increasingly more complex and demanding to pull off.

Since SVG is a text-based system, of course textual elements can be combined and with great efficiency to boot. This does not just cover regular text, but also a couple of features that you can pull off as well, such as rotation, multi-lines and even hyperlinks. It gets a bit trickier to pull off some of these just the way you want them to, but it absolutely can be done.

If you like to experiment with outlines for your figures, you will be glad to hear that strokes can be modified as well, and in a number of different ways. For one, who says the outline has to be a single, continuous line? Why not a series of dots, or several lines or something like that? Well, now it can be, provided you know how to pull it off.

In case you need to identify and tag some of your creations, Scalable Vector Graphics allows a filter function where you can insert unique ID elements to facilitate easier searches as well as make your creations distinct. Luckily for you, there is a whole variety of filters at your disposal, including feComposite, feFloor, feMorphology etc. The list goes on and on and we simply do not have the time to list every single item on it.

Ellipse <ellipse>

The main difference between the attribute of a circle and those of the ellipse is that the latter has an additional element. There are cx and cy same as with the circle, but instead of a single radius we have rx and ry, each standing for the radius but on the different axis. Otherwise, it works in much the same way. It too can have opacity if you so desire, and the pattern is pretty much the same as with the circle.

Rectangle <rect>

In order to draw a rectangle, you need the data for x and y axis respectively, along with height and width of the rectangle. Finally, there is the style and class that deal with the whole inline thing. Optionally, if you do not like sharp corners on your rectangles and want to round them up, you will need another two parameters, rx and ry for the corners.

The syntax for it would be something like this:

<rect>
x="x-axis co-ordinate"
y="y-axis co-ordinate"
width="length"
height="length"
rx="length"
ry="length"
style="style information"
class="style class"
</rect>

This is only the syntax, as an actual example would take up too much space while giving relatively few information in exchange, on top of the example with the circle. Only the attributes are different.

Line <line>

Now, when it comes to lines, these are a lot simpler, at least on their own. All you need are the coordinates for the beginning and the end, x1 and y1 for one and x2 and y2 for the other. The syntax should look something like this:

<line>
x1="x-axis co-ordinate"
y1="y-axis co-ordinate"
x2="x-axis co-ordinate"
y2="y-axis co-ordinate"
</line>

An actual example of a line that is not opaque would look like this:

<html>
<title>Simple SVG Line element</title>
<body>
<svg width="1000" height="1000">
<g>
<line x1="50" y1="50" x2="200" y2="200"
stroke="green" stroke-width="2" fill="rgb(233,22,233)"></line>
</g>
</svg>
</body>
</html>

svg line

On a browser, this would amount to a straight line from upper left corner to the bottom right. You can make it opaque by adding the suitable element just before the </line>.

Polyline <polyline>

Now, apart from the <polyline> element, if you want to draw a series of lines that do not form a closed figure, you are going to need coordinates for all the points that you need in order to make the figure. Essentially, you are connecting the dots and these points serve as coordinates. The line starts at “x” and “y” values respectively, and moves to each consecutive point that you have determined, in an order that you have typed them in. And yes, they can be opaque as well.

Polygon <polygon>

If you want to keep things neat and bring your series of lines to where they once began, you will have to use the <polygon> element. Essentially, it works in almost identical way as the polyline, except this time the main element is different and the line automatically goes back to the original coordinates after the last point that you have entered. Otherwise, it works just fine: you can enter as many points as you like, SVG will follow the order you set them in, and you can even add fill color and opacity.

Path <path>

This element is by far the trickiest one to pin down, mostly because it connects straight lines rather than individual points. You can also modify it in more ways than most, so there are more attributes to consider as well. The simplest paths only consist of “d” which stands for path data, but there could be all sorts of commands added in the mix. For example, “m (or M) – moveto” stands for a command that moves the path from one point to another. Another thing to remember about these commands is that there is a difference if they are capitalized or not. A capital M, for example, would mean to find an absolute path whereas lowercase m would order the computer to locate a relative path.

Other than that, there are commands that enable you to create lines to a certain point and even to specify whether you want them to be vertical or horizontal. If you prefer curves, there is an order for that as well. You can even specify that you want a smooth curve, or something called a quadratic Bezier curve. Other than that, there are commands to create an elliptical path or to close the existing one. And before you ask, yes, opacity can also be added for that extra kick. And that is not all!

Text

You can even add text, whether as a standalone or as a description to a figure that you drew. Text is treated like another image, so <text> element is not optional in this regard. Apart from the actual data about the text, the syntax should look something like this:

<text
x="x-cordinates"
y="y-cordinates"
dx="list of lengths"
dy="list of lengths"
rotate="list of numbers"
textlength="length"
lengthAdjust="spacing"
</text>

In short, “x” and “y” are the coordinates of the glyphs, for each axis respectively of course. “dx” and “dy” represent the shift along the respective axis and “textlength” is exactly what it says. Optionally, you can rotate the portion of the text – or the whole thing – as if it were a line and make adjustments to the text using “rotate” and “textAdjust” commands respectively.

For example, if you wanted to write a message or something like that, here is how you might do it.

<html>
<title>Simple SVG Text element</title>
<body>
<svg width="1000" height="1000">
<g>
<text x="50" y="21" >This is a text element! </text>
</g>
</svg>
</body>
</html>

Can you guess what the message would look like on a browser? We’ll save you the trouble. It says: “This is a text element!” Of course, the letters could be set to different size, rotated or you can change their color. Multiline text and different fonts are also available via controls such as “font-weight” or “font-family”. As for hyperlinks, all you need to do is add the desired webpage as another piece of text and it would serve as a hyperlink to whatever page you have selected.

In essence, the main difference between the two is a single line of text dealing with opacity, but if you take a look at the images displayed in your browser, the effects are vastly different. Even the fill looks different.

There are a few things to keep in mind while doing this. For one, <svg> marks the beginning of the picture and </svg> marks the end. This is how computers can tell it apart from other text. From then on, you can simply embed this into any type XML file and it should work, provided the locations as well as conditions are suitable. The first two parameters are width and height and these refer to the actual image. So, the bigger the numbers for these parameters, the wider or higher the image will be. Next, there is the “circle” element and it signifies that what we intended to draw is a circle. If it had been another figure, this element would reflect that. Next, there are the cx, cy and r elements. The first and the second one stand for the location of the center of the figure, in this case a circle, while the “r” is the radius.

The “stroke” and “stroke-width” elements are for the outline; one is the color of the outline while the other signifies the width of that line. The “fill” stands for the fill color of the figure. So, if you wanted a green circle with a black outline, the stroke would have to be black and the fill green. When you are done, a simple </svg> tag will signal this to the computer. While this does not seem like much, this procedure is the same for the circle of any size, color and outline, and leaves no parameters to be corrupted by zooming in and out or rescaling the image. On the other hand, even a smallest circle drawn in such manner would be relatively demanding in terms of memory space and the work required when drawing it.

If you want to gaze at your handiwork, all you need to do is to open the file using your Chrome or Firefox. You do not even need a plugin or anything like that. Then again, not every browser is the same in this regard. Sure, if you stick to the Google Chrome, Mozilla Firefox or Opera things should be sweet, but if you have a masochistic streak and prefer Internet Explorer or something like that, you are going to need activeX controls or something similar.

Why do I Need SVG for?

Granted, all of this may not seem like much at first, but this is because you are not looking at the bigger picture. SVG can be used to create just about anything from loading pages to demo games. The only real constraint is your imagination. You need to make a dialog box? It is basically a rectangle with some text and an interactive function. And some color. You need to create a brand new icon or a logo? You can do so by simply connecting the dots and then scaling the image to the size that you need. If you tried to design something tiny, you would have a problem finding the right means, as once it is scaled down, it is can be difficult to magnify it again without consequences to the quality of the image.

A chart is basically a dotted line connecting points along the x and y axis – sounds familiar? And you get to style it in any way you want! Even effects such as “gooey” or “scrolling” are now within your reach. From interactive games to online ads, there is almost nothing that you cannot make using SVG and a bit of creativity that is in you. All it takes is practice and a bit of tenacity. True, you can accomplish this through other means, but few match the versatility and availability of SVG.

The Bottom Line

There are other things such as patterns, gradients, links and interactivity, but all of them will receive their coverage in due time. So far, we have defined the general outline of Scalable Vector Graphics and provided an example to illustrate how easy it is to use and how easily it can be embedded into almost any kind of XML file, if the situation calls for it of course. Then again, this may or may not be the most efficient way of drawing images, as there are issues with file size.

However, Scalable Vector Graphics does not come without its fair share of useful features. And arguably the most important one is that any and all images created using this language are completely impervious to loss of quality, at least when it comes to the majority of the regular actions that people tend to do to this type of files. They get compressed, printed, scaled and rescaled, zoomed in and out… Most other formats tend to be far less robust when it comes to file integrity, but since this particular one is based on text, there are only so many things that could possibly go wrong.

Even so, this is not something that just anyone can simply pick up and start using from the get-go. Even people with experience in programming cannot simply start using tools and methods that are completely unfamiliar to them. With this in mind, Scalable Vector Graphics requires a bit of training and it takes some getting used to, but once this is out of the way, nothing can stop a budding programmer in drawing whatever figures, shapes and sizes they want. The sky is the limit here, so be careful what you do.

Leave a Comment

Your email address will not be published. Required fields are marked *