SVG

Scalable Vector Graphics

What is it?

  • SVG is to images as HTML is to text
  • Markup, for images
  • XML (dialect)

Image from MDN

Vector graphics

  • Specify lines and shapes
  • Modify raster image
  • Both of the above

Vector graphics

  • Transform
  • Composite
  • Filter

Pros/Cons

  • All major browsers 👍
  • DOM interface 👍
  • Slow loading 👎

Basic ingredients

  • Root element, group element 
    • <svg> <g>
  • Elements for shapes and curves
  • Infinite complexity

Tools

  • Inkscape
  • Adobe Illustrator
  • Code!

!

caniuse.com/svg

NB:

  • Case sensitive
  • Attributes in quotes
<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="mistyrose" />

  <circle cx="150" cy="100" r="80" fill="seagreen" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="whitesmoke">SVG</text>

</svg>

Rendering

  • top→bottom == back→front
  • later elements are rendered atop previous elements

Embedding

  • Directly embedded in source
  • <object data="image.svg" type="image/svg+xml" />
  • <iframe src="image.svg"></iframe>

  • Create dynamically with JS

Wait... "pixels"?

  • Output device pixels
  • Absolute units e.g. "pt" "cm"
  • User units

Zoom in e.g.

<svg width="200" height="200" viewBox="0 0 100 100">

Shapes

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

Paths

  • d
  • Commands
    • M move (abs.)
    • m move (rel.)
  • Unitless values

Curves

What else?

  • Other curves
  • Fill and stroke
  • Gradients
  • Patterns
  • Text and textPath
  • Transformations
  • Clipping, masking
  • Filter effects

Resources

SVG for UXE

By Elise Allen

Made with Slides.com

SVG for UXE

  • 66

More from Elise Allen