You may have heard about SVG and thought, “Just What Are Scalable Vector Graphics Anyway?” Well friend, you’ve come to the right place to learn! Scalable Vector Graphics also goes by the common acronym, SVG, and it is a vector image format based on the XML format. SVG was developed like most other common Web Technologies by the W3C, or World Wide Web Consortium. You’re likely familiar with SVG even if you dont’ realize it, since many of the emoticons that have taken over our modern society are created in an SVG format. Knowing what are Scalable Vector Graphics is an important pre requisite for learning about the D3 JavaScript Library.

---

Why Should I Use SVG Graphics?

As web developers, we have an intimate knowledge of working with HTML. HTML in and of itself does have limitations however. After all, when HTML was first invented, it was never meant to be able to handle the advanced things that we ask of it today. In native HTML, you can’t really create complex shapes. SVG however is based on XML, which is not all that different from HTML. Since you are familiar with HTML, learning SVG is not a huge leap. In addition, SVG does have support for a full range of complex shapes, vectors, polylines, fills, and much much more.

SVG can be styled with Cascading Style Sheets

Another benefit of Scalable Vector Graphics is that it can be styled using standard CSS.

SVG is highly scriptable

SVG lives in the DOM or Document Object Model just like all other elements in your pages. As such, JavaScript can be used to reach into the DOM and dynamically affect and draw SVG. In fact the D3 JavaScript library is the premier way to do something like this.

Make use of third party drawing tools

Now you might be thinking, “Hey, isn’t is going to be hard to draw cool looking graphics by writing markup that looks like HTML?” You would have a point if that is what you are thinking. Thankfully, you can use a program like Adobe Illustrator to much more easily draw your Scalable Vector Graphics, and them simply import the result into your web pages.

Vector Based Graphics look great no matter what

Whether your looking at an SVG on your brand new Apple Watch with a screen the size of a couple of quarters, or you are projecting your laptop onto a 50 inch LCD display, your SVG graphics are going to look superb. This is because Vectors use math to calculate graphics based on many points that interconnect. By using things like proportion, curves, and various ratios, vectors always look good and have no pixlelization like you might see with other graphic formats.

---

Drawing Basic Shapes With Scalable Vector Graphics

The best way to learn about Scalable Vector Graphics is to draw something! First off, lets create an SVG area so we can start to draw some shapes. With this, we will not even need to use screenshots, we can simply embed the sample HTML in the page, and we’ll see the result.

<div class="someclass">
    <h2>Basic Shapes With SVG</h2>
    <svg width="720" height="500" style="background: #d9edf7">

    </svg>
</div>

Now we are ready to add some shapes. Let’s start by first creating a rectangle.

<div class="someclass">
    <h2>Drawing an SVG Rectangle</h2>
    <svg width="720" height="500" style="background: #d9edf7">
        <rect x="100" y="50" width="520" height="400" style="fill: #31708f"/>
    </svg>
</div>

Cool! As we can see, there is now a rectangle shape within our SVG defined area. One thing to note is how the x and y coordinates work. In this snippet, x is set to 100. This means the rectangle begins at 100 pixels in from the left. They y is set to 50. This means that from the top of the SVG defined area, we are moving 50 pixels down. In addition, notice the syntax of the <rect>tag. It has the format of an XML tag in that it has no closing tag, just a closing slash.

Our rectangle foo is good, let us know apply the technique of creating a circle with SVG.

<div class="someclass">
    <h2>Drawing an SVG Circle</h2>
    <svg width="720" height="500" style="background: #d9edf7">
        <circle cx="360" cy="250" r="220" style="fill: #bce8f1"/>
    </svg>
</div>

Once again, this is really cool. There are a few things to note as far as the attributes of the SVG circle are concerned. First up is the cx and cy attributes. What these are, are the center x and center y coordinates of the circle to draw. The r of course is the radius of the circle. Since our SVG area is 720 by 500, we decided to split the difference on the cx and cy coordinates and this places our circle perfectly in the center.

So we have a rectangle, and we have a circle – what about triangles? We can draw triangles as well with SVG, but not with a dedicated tag. We need to make use of something called a polyline, let’s see how.

<div class="someclass">
    <h2>Drawing A Triangle using SVG</h2>
    <svg width="720" height="500" style="background: #dff0d8">
        <polyline style="fill: #3c763d" points="110 450, 360 50, 610 450"/>
    </svg>
</div>

The Polyline is a little bit tricky, as we need to specify each point of the shape with both an x and y coordinate. The format of the points attribute is points="x y, x y, x y". Note that you can keep adding more coordinates, you just need to follow the format.

We can also make use of SVG to draw text in a really clean and scalable way.

<div class="someclass">
    <h2>Drawing Text With SVG</h2>
    <svg width="720" height="500" style="background: #fcf8e3">
        <text x="75" y="350" fill="#8a6d3b" font-size="300px">
            SVG
        </text>
    </svg>
</div>

This works really well. One thing to note is that unlike <rect> and <circle>, <text> does have an actual closing tag, and the text to display is written in between the two tags.

---

What Are Scalable Vector Graphics Summary

In this tutorial we had a good look at what are Scalable Vector Graphics, and how we can make use of it. Just like in most programming languages, the first thing you learn is how to output “Hello World” to the screen. By drawing some of the basic shape primitives such as a rectangle, circle, and triangle, we have completed the Hello World equivalent of SVG. Of course there is a lot more to know when dealing with SVG, but this introductory tutorial has given us enough knowledge to be dangerous.