Illustrator
HOW TO USE SVG ON THE WEB
What do you do when you want a crisp logo or infographic, and have to worry about the plethora of screen resolutions and sizes? Apart from using hi-res images or make different versions of said images and then having to work out how to serve them up, SVG is a good way to go. It means that you just need one file, and no matter the resolution of the display screen or whether you zoom in a lot or not, it will always be as sharp as possible.
Below you can see an example of an SVG on the web, and if you zoom in you will see the image retains it’s quality and there is no pixelation.
SVG stands for Scalable Vector Graphics. This is an xml-based format for displaying 2D graphics, with support for interactivity and animation. It has been around since 1999, so it is not a new technology, but with recent mobile and tablet displays it has, I think, become particularly useful for web design in certain circumstances.
What browsers can read SVG? Well basically all of them (even Internet Explorer, although it has to be v9 or later). So it has a good and wide range of support. You can check the latest browser support for SVG at caniuse.com
So how can we produce SVGs? Well you can code SVGs manually, but it is far easier to use something like Illustrator to draw your vectors and then save them as an svg file. So, when creating your logo in Illustrator, you just go to File > Save As and Choose SVG. The default settings are fine, and then just save and name your file wherever you wish. You will also see an option here to copy the SVG code which is useful when working for the web.
So you how can you use your SVG in a normal web workflow? Well, using something like Brackets, which is free and has an svg preview plug-in, you can see the actual xml as well as an actual preview of the SVG to show you exactly what you are dealing with.
To put your SVG into the code, simply use the svg tag as you can see in the image above, or the code below.
<svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
viewBox=”0 0 100 100″ enable-background=”new 0 0 100 100″ xml:space=”preserve”>
<polygon fill=”#FFFFFF” stroke=”#000000″ stroke-miterlimit=”10″ points=”50.8,1.3 61.1,33.1 94.6,33.1 67.5,52.8 77.9,84.6
50.8,64.9 23.8,84.6 34.1,52.8 7,33.1 40.5,33.1 “/>
</svg>
In short, it is very easy to use and produce an image that will always be crisp and sharp.