Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/01"

From Publication Station
Line 72: Line 72:
   <polygon points="15,10  55, 10  45, 20  5, 20"
   <polygon points="15,10  55, 10  45, 20  5, 20"
     style="fill: red; stroke: black;"/>
     style="fill: red; stroke: black;"/>
== SVG in the browser ==


== SVG styled by CSS ==
== SVG styled by CSS ==

Revision as of 13:15, 11 November 2015

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.

Image from http://apogeesigns.com/faq/what-is-a-vector-graphic/

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

Squarecircle.svg

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 styled by CSS

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