SVG - How to create & use vector graphics on the web

3 min read / September 29, 2012

The web is full of images and most of them are raster graphics like jpeg, png or gif. Those formats are fixed in width / height and don’t look good when heavily resized. Not even think about high resolution displays…
And that’s why I’m going to show you how to handle SVG without Photoshop or Illustrator!

What is a SVG?

The Scalable Vector Graphics (SVG) is an XML-based file format for two-dimensional vector graphics, which has been under development since 1999 by the World Wide Web Consortium.

It is possible to embed vector graphics, raster graphics and text into SVG. You can even edit any SVG in every text-based editor, because it’s just some XML. Sounds nice? It is!


This is a simple red rectangle with a black stroke:

And this is the belonging XML code:

<svg width="150" height="150" xmlns="">

Even more information

If you want to know more about the syntax to code your own SVG, you should read A Beginner’s Guide to SVG (Part 1) by Johnny Simpson.

How to create/edit a SVG?

Child: Hey mom, I want to edit a SVG. What do I need?

Mom: I think you need money to buy Photoshop or Illustrator!

Child: But I want to use free software :(


svg-edit comes for the rescue. It’s an awesome vector graphics editor in the browser (JavaScript, HTML5) with native support for Internet Explorer 9+.

Some of the features are:

Convert a scribble to SVG

The following screencast describes how to use svg-edit to convert a hand drawn scribble into a SVG.


Scribble: SVG



Use the created SVG

You can use the SVG like any other image, except that SVG is not supported in every browser.

CSS - background-image: file

background-image: url(my_image.svg);

CSS - background-image: embedded

background-image: url(data:image/svg+xml;utf8,<svg xmlns="" width="10" height="10"><rect height="5" width="5" fill="#000" /></svg>);

HTML - img

<img src="my_image.svg" />


HTML - embed / object

<embed src="my_image.svg" type="image/svg+xml" />


HTML - inline

  <svg xmlns="" width="10" height="10">
    <rect height="5" width="5" fill="#000" />

Browser support

SVG is supported in almost every browser. But you can check out the specific versions on When can I use if you like!

IE hint: SVG is only supported from Internet Explorer 9+! But you can use the svgweb JavaScript library to enable SVG on older versions.

There is more to come…

Based on some feedback for this article I’m going to extend it with this topics:

 since 1985
CC BY 4.0 | Legal