Cracking the SVG Code

CSSDevConf, October 26, 2015
@brendamarienyc
#CrackSVG

Me

You

What we'll cover...

The Grey Ghost

Source: Legends of America
Photo credit: James Vaughan

Why SVG?

Our Example Files

What is familiar from HTML?

Development History (abbreviated)

Source: Wikipedia

A Simple SVG & Her Attributes

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="209px" height="110px" x="0" y="0" viewBox="0 0 209 110">
  <title>A Simple Rectangle</title>
  <desc>
    A turquoise rectangle with a black border that is wider than it is tall.
  </desc>
  <a xlink:href="index.html">
    <rect x="20" y="20" height="100" width="200" rx="5" ry="5" style="fill: turquoise; stroke: #333333;"/>
  </a>
</svg>

Name Spacing

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>

Title & Description

<svg>
  <title>A Simple Rectangle</title>
  <desc>
    A turquoise rectangle with a black border that is wider than it is tall.
  </desc>
</svg>

Viewport

<svg width="209px" height="110px"></svg>

SVG Coordinate System

<svg viewBox="0 0 209 110"></svg>

Start with 0, 0 for less complexity

start x  start y  end x  end y

The rest of those attributes...

Everything else before the shapes is pretty much useless.

The Engine Room

Source: Legends of America
Photo: Robin Stevens

Shapes!

Stroke = Border
Fill = Background Color

Rectangle

<svg viewBox="0 0 202 102">
  <rect width="200" height="100" rx="10" x="1" y="1" fill="turquoise" stroke="#333333">
</svg>

Circle

<svg viewBox="0 0 102 102">
  <circle cx="51" cy="51" r="50" fill="turquoise" stroke="#333333">
</svg>

Ellipse

<svg viewBox="0 0 102 52" class="svg-example">
  <ellipse cx="51" cy="26" rx="50" ry="25" fill="turquoise" stroke="#333333">
</svg>

Line

<svg viewBox="0 0 60 30">
  <line x1="5" y1="5" x2="50" y2="25" stroke="#333333">
</svg>

Polyline

<svg viewBox="0 0 52 52">
  <polyline points="1,1 50,1 50,50"  fill="turquoise" stroke="#333333">
</svg>

Polygon

<svg viewBox="0 0 52 52">
  <polygon points="1,1 50,1 50,50"  fill="turquoise" stroke="#333333">
</svg>

The Virtual Pen

Path

<svg viewBox="0 0 111 111">
  <path d="M50,50
          L100,100
          M110,110
          L100,1
          A30,50 0 1,0 100,100
          Z"
        fill="none" stroke="#333333">
</svg>

Path

M or m = moveto (x,y)
L or l = lineto (x,y)
A or a = arc (rx,ry x-axis-rotation large-arc-flag,sweep-flag)
C or c = curveto (Cubic Bezier Curve)
S or s = curveto (Smooth or Shorthand Cubic Bezier Curve)
Z or z = closepath

Arc, An elliptical curve

A50,50 0 0,1 100,100
rx,ry x-axis-rotation large-arc-flag,sweep-flag x,y

Cubic Bezier Curve

C x1,y1 x2,y2 x,y
S x2,y2 x,y

What’s up with the decimals and dashes?

The Pools

Source: Legends of America
Photo: Trey Ratcliff

In Browser Action!

Browser Support for Inline?

Can I Use?

Transforms: CSS vs. Attributes

/* CSS doesn't work in IE */
rect {
  transform: rotate(45deg);
}

<!-- HTML works everywhere -->
<rect x="65" y="65" width="150" height="80" transform="rotate(45)" />
Transforms on SVG Elements by Ana Tudor

Stroke attributes

Animating Stroke Dash

D3 Example

FIDES: A data visualization of one person's PGP Web of Trust Force directed D3 graph

Resources

Haunts to look out for

Source: Legends of America
Photo: BBC News