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="http://www.w3.org/2000/svg"> <g> <rect height="75" width="75" fill="#cff" y="50" x="50" stroke-width="5" stroke="#000" /> </g> </svg>
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 :(
Some of the features are:
- Free-hand drawing
- Path tool
- Lines / Rects / Ellipses / Polygons
- Export to SVG / PNG
- Shape library
Convert a scribble to SVG
The following screencast describes how to use svg-edit to convert a hand drawn scribble into a 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
CSS - background-image: embedded
background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" 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
<div> <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"> <rect height="5" width="5" fill="#000" /> </svg> </div>
SVG is supported in almost every browser. But you can check out the specific versions on When can I use if you like!
There is more to come...
Based on some feedback for this article I'm going to extend it with this topics:
- Other free SVG editors
- jQuery SVG