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 basic shapes

As you can see in the example an SVG is made up from basic shapes, that combined, transformed and grouped can form drawings.

The basic shapes are:

• line

 <line x1="40" y1="20" x2="80" y2="20" style="stroke-width: 10; stroke: black;"/>

• rectangle

<rect x="50" y="10" width="20" height="40" style="fill: none; stroke: black;"/>

• circle

 <circle cx="30" cy="30" r="20" style="stroke: black; fill: red;"/>

• ellipse

 <ellipse cx="80" cy="80" rx="20" ry="10" style="stroke: black; fill: none;"/>

• polygon - series of points that describe a geometric area to be filled and outlined

 <polygon points="15,10  55, 10  45, 20  5, 20"
   style="fill: red; stroke: black;"/>

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