Web Design: SVG - Scalable Vector Graphics

By CRAIG KUNCE

This tutorial shows how I added a SVG (scalable vector graphics) logo image to my web site to replace my screen resolution PNG logo.

Whenever a smartphone, tablet, high-res laptop, or other device displays a lower-res PNG or GIF or JPEG logo it can look pixelated and grainy. Unprofessional too. This is increasingly evident when the viewer zooms in on your logo and it blurs.

In order to remedy this, I created a SVG version of the main logo on each of my web pages. This basically allows you to see a vector drawing of your logo on your web pages (an Adobe Illustrator quality vector drawing of your logo). When it is viewed, zoomed, or enlarged for mobile devices, it is crisp and clean—at any size. Sound too good to be true? Here's how I did it for my web site.

  1. I opened my original logo in Adobe Illustrator. This is the same logo file I use for print design.

    My Illustrator file looked like this:
    svg graphics
    (outline and preview mode are shown)

    Note: SVG graphics only work with drawn vector logos (Adobe Illustrator, COREL Draw!, etc.) It won't work with raster logos (Photoshop, GIMP, Pixelmater, etc.)
  2. I made my page size the exact pixel dimensions as the header div on my web page. In this case it was 570w x 120h pixels. I made sure to align everything perfectly to the single pixel so it would align with my html and css setup.
  3. Click Save As in Illustrator
  4. Choose SVG (svg) from the drop down menu
  5. Now you will see a button at the bottom that reads, "SVG Code..." Like this:
    svg graphics
  6. Click that button and a window like this will pop up:
    svg graphics
    It looks intimidating, but it's really not that complex. What you're seeing here is about 250 lines of xml code, css, and coordinates to draw a vector version of my logo on my web page. Pretty cool, huh!?
  7. Now all we have to do is put it into our web site. Stick with me, there are a few intricate steps, but it will work.
  8. I selected all that code, copied it, and pasted it into a new window in Dreamweaver. Any code editor will do.
  9. Next I saved the file with a .php extension.
  10. I changed some of the code in the top area. Here's the before and after:
    Before
    svg logo

    After
    svg logo

    • Notice in line five that I added a link. This makes my svg logo link back to my home page.
  11. Lastly, I load this file into my html code with a php include. It looks like this:
    <?php include ("your_file_name_here.php"); ?>
  12. My php include is placed in my header div, but it could go anywhere.
  13. If you're not familiar with php includes, you'll have to be sure to create a .htaccess file so your server knows how to read the .php file.
    (Click here to review my php includes tutorial)
  14. Upload everything to your server and you're all set. Now load your web site on a tablet or smartphone and zoom in. Now you have a super crisp logo, at any size.