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: image and text

This SVG image is the representation of the following SVG code:

You can use the inspector, a text-editor, or a vector drawing program to change the image.

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="300"
   height="200"
   id="svg3910">
  <g
     transform="translate(0,-852.36218)"
     id="layer1">
    <rect
       width="200"
       height="140"
       x="92.85714"
       y="908.07648"
       id="rect3017"
       style="opacity:1;fill:#3964c8;stroke:none" />
    <path
       d="m 254.28571,269.50504 a 74.285713,71.428574 0 1 1 -148.57142,0 74.285713,71.428574 0 1 1 148.57142,0 z"
       transform="translate(-95.714287,658.57142)"
       id="path3015"
       style="opacity:1;fill:#ff64c8;stroke:none" />
  </g>
</svg>

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?)