Courses/Design & Technique-Essential Web Design/Q2/01

SVG

What is SVG?

SVG (Scalable Vector Graphics) is a vector image format.

Contrary to raster graphics or bit maps (an image represented by a rectangular grid of pixels) a vector image is a description of its geometric shapes, or drawing instructions, which the viewing

program will draw on the screen.

SVG Characteristics

• scalable - zooms wont pixelate or degrade the image quality
• text-based image format - like a webpage you can view and change the source code of an SVG image
• editable in vector drawing software (Inkscape, Adobe Illustrator)
• easily included within an HTML document
• syntax similar to HTML

SVG with custom fonts

This is just the basics. We'll want to manipulate the SVG drawings further, not just style them with CSS, but:

• add drawing elements,
• remove them,
• turn elements into links,
• transform the image based on user interaction
• create a new image every time a user visits the site,
• etc.

To create those actions with need a scripting language for the browser.

(WHAT IS A SCRIPTING LANGUAGE?)