Vector images

Vectors are images that are described using curves instead of pixels. You can zoom into them without losing resolution.

There are two main ways of including vector images in your page, using a font, or using SVG.

Exercise 1 - SVG

  1. In the exercise directory you'll find an SVG file, which is an image exported from Illustrator. Embed this image in the HTML file using an img tag, just like a regular image.
  2. Use CSS to enlarge the image to fit the page.
  3. If you have access to a copy of Illustrator, make your own SVG.

The street scene at the bottom of streetbank.com is an SVG.

Exercise 2 - Font Awesome

An icon font contains vector images as glyphs. Font Awesome is a great example.

  1. Download Font Awesome from here: http://fortawesome.github.io/Font-Awesome/
  2. Choose a glyph and embed it on your page.

Exercise - Font Embedding

  1. First we'll need a font. Grab a font kit from: http://www.google.com/webfonts/
  2. Set the page h1 to the font you chose.

Things to watch out for.

Header tags are by default bold. If you use a font on your header tags you may find it looking rather swollen. This is because your browser, finding no bold variant of the custom font is kindly making one for you by swelling the standard font.

Watch for this and only use a bold variant if you have it installed.

Where to get fonts

You can get free fonts from: http://www.google.com/webfonts/ or www.fontsquirrel.com

If you would like a premium font, my choice is: http://www.myfonts.com.

comments powered by Disqus