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!
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>
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.
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:
The following screencast describes how to use svg-edit to convert a hand drawn scribble into a SVG.
You can use the SVG like any other image, except that SVG is not supported in every browser.
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>);
<img src="my_image.svg" />
<embed src="my_image.svg" type="image/svg+xml" />
<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!
Based on some feedback for this article I’m going to extend it with this topics: