An Introduction to SVG

svg-logo

Scalable Vector Graphics, or SVG, is a standard for a type of XML used to describe an image. Of course, there is an infinite number of possibilities with this, allowing you to create just about any image with it.

SVG is a vector graphics format, which means that instead of images being created with individual pixels as in raster graphics (PNG, JPEG, etc.), the images are made up of individual shapes and lines, put together to make the complete image.

Why Use SVG?

Why is SVG so great? Here are a few of the advantages of using Scalable Vector Graphics.

  • SVG images can be resized infinitely without loss of quality.
  • SVG files can be read (and written) using many different tools, from advanced vector graphics editors to simple text editors.
  • SVG can be styled with CSS, allowing easy changes to an image.
  • You can use scripts to modify SVG images in the browser, to create dynamic and interactive applications.
  • SVG is an open standard. That means that you can create your own application using it, without having to pay any licensing fees.

The only disadvantage I see with SVG is the lack of support in Internet Explorer. But we won't worry about that for today, we'll just look at the great things that SVG can do!

How Can I Use SVG?

Probably the easiest way to create awesome SVG graphics is using a vector graphics editor. I personally like Inkscape.

Another way to get started with SVG is to try hand-coding it. The syntax is based on XML, so if you know HTML, it won't be that hard to figure it out. Let's take a look at a very simple example.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
    <rect width="300" height="250" x="20" y="20" fill="#FF0000" stroke-width="1" stroke="#000" />
 
</svg>

At the top, you'll see a document type declaration, like what you would find in an HTML file. This is to tell the browser that this is displaying SVG.

Next there's the svg opening tag. Just like the html tag in HTML files, the svg tag tells the browser where the SVG code starts and ends. You can see that this tag is closed at the end.

In the middle there, you can see an element called rect. This is the element used to draw a rectangle. You can see that it, like elements in HTML, can take various attributes.

  • width, height: The size of the rectangle
  • x, y: The position of the rectangle
  • fill: The colour of the rectangle.
  • stroke-width: The width of the rectangle's border, or stroke
  • stroke: The colour of the rectangle's border or stroke

The above code, viewed in a good web browser (I used Firefox), should display something like this:

I'm sure that you can image the many possibilities with SVG, and the way that even complex images can be created using only your keyboard. This has endless possibilities, such as using a server side language, such as PHP, to generate images on-the-fly, for viewing by your users!
9
Because SVG is a standard for XML set by the W3C, you can even validate your code to make sure that you did everything right. Just use the W3C Validator, and the SVG document type declaration will let them know how to validate your code.

So you can run the code in the example above in the W3C Validator, and as you can see, it validates with no errors! From that example, you can see, to code in valid SVG, because it is based on XML, you just need to follow similar guidelines for marking up XHTML files.

Conclusion

SVG is a truly fantastic XML standard for creating images. You can check out various SVG tutorials on the internet, and try out different techniques to see what you can come up with!

Do you ever use SVG for creating graphics? Or do you have any ideas of where or how SVG can be implemented? I'd love to hear, so be sure to leave a comment on this post.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

Comments are closed.