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
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>
Basic Shapes With SVG
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>
Drawing an SVG Rectangle
Cool! As we can see, there is now a rectangle shape within our SVG defined area. One thing to note is how the
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>
Drawing an SVG Circle
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
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
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>
Drawing A Triangle using SVG
The Polyline is a little bit tricky, as we need to specify each point of the shape with both an
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>
Drawing Text With SVG
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.