CIS 119 - SVG (Scalable Vector Graphics)

Objectives

• find SVG documentation
• use SVG in a web page
• style SVG components
• animate SVG components

Resources

• w3schools.com SVG tutorial
• w3schools.com SVG reference
• W3C SVG Recommendation (documentation)
• CSSTricks - Using SVG
• Mozilla SVG reference

Overview

• SVG stands for Scalable Vector Graphics
• SVG is text in XML format
• Vector graphics retain the same quality when resized
• SVG can be styled using CSS
• SVG integrates into the DOM
• SVG can be animated using JavaScript and built-in SVG animation
• A vector graphics editor such as Inkscape can help create complex vector graphics

Some basic SVG elements

• <svg width="nnn" height="nnn"> ... SVG elements ... </svg>
• <g> ... SVG elements ... </g>
• <line x1="nnn" y1="nnn" x2="nnn" y2="nnn" />
• <circle cx="nnn" cy="nnn" r="nnn" />
• <text x="nnn" y="nnn"> ... text ... </text>
• <rect x="nnn" y="nnn" width="nnn" height="nnn" rx="nnn" ry="nnn">
  rx and ry specify radii for rounding the corners of the rectangle
• <ellipse cx="nnn" cy="nnn" rx="nnn" ry="nnn" />
• <polygon points="x1,y1 x2,y2 ..." />
• <polyline points="x1,y1 x2,y2 ..." />
• <path d="path directions" />
  where path directions consist of:
  Mxxx yyy = move to specified x, y coordinate (absolute positioning)
  Lxxx yyy = draw line to specified x, y coordinate (absolute positioning)
  Hxxx = draw horizontal line to specified x value (absolute positioning)
  Vyyy = draw vertical line to specified y value (absolute positioning)
  mxxx yyy = move to specified x, y coordinate (relative positioning)
  lxxx yyy = draw line to specified x, y coordinate (relative positioning)
  hxxx = draw horizontal line to specified x value (relative positioning)
  vyyy = draw vertical line to specified y value (relative positioning)
  Z = close path
  and other directions, such as curves, are also available

Some common SVG style attributes

• stroke: color
• stroke-width: size
• stroke-dasharray: list of sizes
• fill: color
• fill: none
• fill-opacity: 0.0 to 1.0
• stroke-opacity: 0.0 to 1.0

Beyond what was covered

• SVG has many, many more features
• SVG has built-in animation
• Filters, drop shadows, and blur effects can be specified
• Gradients, both linear and radial, can be specified
• There are many attributes and options that were skipped in this brief introduction.

Rotation

There are a number of transformations you can apply to SVG objects, such as scale, skewX, skewY, rotate, translate, and matrix. The example given below is for rotation.

    <line id="line1" x1="0" y1="-140" x2="0" y2="-125" transform="rotate(0)" />
JavaScript code later to rotate the line 90 degrees clockwise about the origin:
    document.getElementById('line1').setAttribute('transform', 'rotate(90)');
Or you could skip the rotation and change x1, y1, x2, y2:
    document.getElementById('line1').setAttribute('x1', '275');
    document.getElementById('line1').setAttribute('y1', '150');
    document.getElementById('line1').setAttribute('x2', '290');
    document.getElementById('line1').setAttribute('y2', '150');

Examples demonstrating some topics covered on this page

1. svg1.html: SVG element with two lines and a circle
2. svg2.html: svg1.html using inline CSS for styling
3. svg3.html: Simple animation using JavaScript and SVG
4. svg4.html: Text and rectangle elements, opacity
5. svg5.html: Ellipse and opacity
6. svg6.html: Drawing a cube using five polygons
7. svg7.html: Drawing a cube using four polylines
8. svg8.html: Drawing a cube using paths and a "g" element
9. svg9.html: Taking advantage of path to draw dashed hidden lines
10. svg10.html: Path version again, but using some H and V directions