With all the different screen sizes and resolutions that are out there now, using SVG graphics instead of images is a great option. But there’s a couple of problems, at least that I’ve come across. First, for something that’s been around since 2001, there’s not really a lot of information for beginners about SVG and using it on a web page. And secondly, it’s not supported in Internet Explorer 8 and earlier. I’m not going to explain SVG, other than to say it’s an XML document you use to create graphics. You can learn more about it on Mozilla’s Developer Network.
I’m just going to show you how to make a simple HTML page with an SVG graphic for the banner image, which you can view here. The easiest way to make an SVG graphic is to use Adobe Illustrator or Inkscape, which is free. I used Illustrator and just saved as SVG. Then all you have to do is used the embed tag and set the SVG file as the source. Here’s the HTML:
1 2 3 4 5 6 7 8 9 | <div class="wrapper"> <header> <embed id="robot" src="svg-robot.svg"> </header> <h1>How cool are robots?</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> |
And some CSS to make it look nice:
1 2 3 4 5 6 7 8 9 10 11 12 | .wrapper { margin: 0 auto; width: 600px; } h1 { font-family: 'Anton', sans-serif; text-align: center; color: #848484; } p { font-family: Arial, Helvetica, sans-serif; } |
That’s it, we just have to link to our SVG file using the embed tag and it will show up in all the major modern browsers. If you view the source of the svg-robot.svg file, you’ll see it’s just an XML file and it’s far smaller than it would be if our graphic was a jpeg which means quicker load times. But we still have one problem, if you view this in IE8 or earlier, you’ll just get a blank little square. But this can be easily fixed using Modernizr. We just check for SVG support and if it’s not supported then Modernizr will give the HTML tag a class of “no-svg”. And we can use this class to set some CSS:
1 2 3 4 5 6 7 8 | .no-svg header { width: 600px; height: 200px; background: url(robot-header.jpg) no-repeat; } .no-svg header embed { display: none; } |
Now, if the page is viewed in IE8, it looks the same as the SVG version. Now if you’re using something like media queries to change the size of elements on your page, you don’t have to load different images for each screen size, you can just resize the SVG graphic and not worry about anything happening to it when the size is changed.WIth SVG support in IE9 and the new iPad and it’s crazy resolution, I think it’s finally time for SVG to get regular use.
Hi, thanks for the info – you’re right, theres very little info out thereon how to simply show an svg file exported from illustrator (or inkscape) on a web page..
When I view your demo file in Safari (5.1.7) your header image is cropped and scroll bars appear – any idea how to fix this?
Cheers
Hey Matt,
The embed tag would just need a height and width added to it and will work properly in Safari.