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:
After pinching and zooming in on my tablet the map looked like a pixelated mess.
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):
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:
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.
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.
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
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.
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.
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.