START A COURSE

The HTML and CSS Blog:

SVG graphics

What You Will Learn in This Lesson

I’m really excited about using images in the SVG format because they solve a lot of problems with making your images look great on devices of any size and resolution.

The Problem: Pixels Pixels Pixels

Let me describe a recent experience trying to use an image in a pixel-based format. I was trying to find a good bus route and after googling “San Francisco muni bus routes” I found this nice map:

San Francisco Muni Bus Route Map

San Francisco Muni Bus Route Map: wouldn’t it be nice if you could read the map?

After pinching and zooming in on my tablet the map looked like a pixelated mess.

After zooming in closer on the map...it's still illegible.

After zooming in closer, the map is still illegible. This map is using pixels to display complex vector based data.

Nice, none of the street names or bus routes are legible at all. It’s just a bunch of big pixels.

The Solution: Vectors to the Rescue

The solution is to use SVG format for your vector-based images, such as maps, charts, logos, info-graphics, illustrations, and icons. If the bus map was in SVG format it would scale on any device and remain sharp at any size, even if I zoom in or use a high resolution device.

The magic behind the SVG image is that it is a vector-based format, meaning it is not created with pixels at all, and is completely resolution independent. Unlike JPG, GIF, and PNG, which are pixel-based formats, SVG graphics are entirely vector-based images, written with code in the SVG markup language. SVG graphics remember your image as a series of points and lines, with coordinates for each vector recorded in the code.

This Honey Bee logo is an SVG graphic (scaleable vector graphic):

Honey Bee Logo in SVG format

The SVG graphic can be displayed at any size and it looks sharp. The image look great on any size device, even high resolution devices, even if you zoom in.

This copy of the same Honey Bee logo is using pixels, and has been saved in GIF format. It isn’t as sharp and won’t scale very well:

Honey Bee Logo in gif format

Here’s an example of an image similar to the bus map. I created this image in Illustrator, and chose Save As, and selected SVG in the file type menu. Illustrator can save copies of your art in SVG format. It’s easy!

This map is an SVG graphic, and can scale to any size and still display crisp and sharp, using vectors.

This map is an SVG graphic, and can scale to any size and still display crisp and sharp, using vectors.

If I open the SVG file in a code editor, like Sublime, it looks like text. It is just text! It is all the vector data and information about line weights and colors, written in the SVG markup language.

SVG code in Sublime

Ooooo, scary code! No, it’s easy. Remember, you just save your illustrator art in this format. You don’t actually have to write any code at all!

OK, I feel better.

Using the SVG graphic in HTML

SVG graphics are scaleable vector graphics

How do you use the SVG graphic in your HTML code? Easy, it’s exactly the same as using any image, it doesn’t matter if the picture is JPG or SVG format. Just use the HTML image tag. Reference it like any web picture, using the <img> image tag, with the source attribute (src) indicating the path to the SVG image file.

<img src=”images/honey-bee.svg”>

Add an alternative text description, using the Alt attribute, and your image will be accessible and searchable.

<img src=”images/honey-bee.svg” alt=”honey bee” width=”100″>

You can scale the image to any display size using CSS, or by adding the HTML width attribute, as shown above.

The image tag can use the source attribute to reference the svg gaphic

So Easy! And now your image is scaleable. Try zooming in on it and it stays sharp. Change the width to any size and it still looks great. The SVG graphic is resolution independent! SVG graphics are becoming very popular. They are a great solution to today’s tricky problem of displaying images on many diverse device sizes.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.