SVG Workshop

https://github.com/madsstoumann/fe-school

Download/Clone
Open `SVG`-folder in VS Code
Use "Go Live" or http-server or similar

SVG is essentially to graphics what HTML is to text

Understanding SVG

It's a coordinate system

The viewBox is key

It's XML

can contain script 😱

case-sensitive

not cartesian coordinates

viewBox="0 0 6 6"

The elements of SVG

<line>

<svg viewBox="0 0 100 100">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

<circle>

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50"/>
</svg>

<RECT>

x
y
width, height
rx, ry

<svg viewBox="0 0 220 100">
  <rect width="100" height="100" />
  <rect x="120" width="100" height="100" rx="15" />
</svg>

<polyLINE>

points

<svg viewBox="0 0 200 100">
  <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>

<polygon>

points

<svg viewBox="0 0 200 100">
  <polygon points="0,100 50,25 50,75 100,0" />
</svg>

Polygonia

<path>

M moves to a coordinate-position
L draws a line (from M) to the defined coordinate
H draws a horizontal line
V draws a vertical line
Z closes a path
... And there's A, C, Q, S, T
Lowercase versions of path-commands are relative
All the basic shapes can be created with a path element.

Multiple ways to do the same thing

Using <line>

<svg viewBox="0 0 100 100">
  <line x1="0" y1="0" x2="50" y2="50" />
  <line x1="0" y1="100" x2="50" y2="50" />
</svg>

Using <polyline>

<svg viewBox="0 0 100 100">
  <polyline points="0,0 50,50 0,100" />
</svg>

Using <path>

<svg viewBox="0 0 100 100">
  <path d="M0 0 L50 50 L0 100" />
</svg>

task 1: create these icons using standard svg elements

SKELETON

.icon {
  width: 3em;
  height: 3em;
  background: lightgrey;
  border-radius: 50%;
  padding: .75rem;

  circle, line, path, polyline {
    fill: transparent;
    stroke: black;
    stroke-width: 2px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
}

<svg viewBox="0 0 100 100" class="icon">
</svg>

SVG Elements on MDN

S mashing guide

Ways to include SVG

<img src="icon-close.svg" alt="Close" class="icon" />

Using SVG as an <img>

<svg viewBox="0 0 100 100" class="icon">
  <path d="M25,25 L75,75 M75,25 L25,75" />
</svg>

Using SVG INLINE

<svg aria-hidden="true"
  style="position: absolute; width: 0; height: 0; overflow: hidden"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>

    <symbol id="icon-close" viewBox="0 0 100 100">
      <title>Close</title>
      <path d="M25,25 L75,75 M75,25 L25,75" />
    </symbol>

    <symbol id="icon-search" viewBox="0 0 100 100">
     ... etc.
    </symbol>

  </defs>
</svg>

Using SVG SYMBOL

<svg class="icon">
  <use xlink:href="spritemap.svg#icon-close"></use>
</svg>

.icon {
  background-image: url('check.svg');
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: 2rem;
}

Using SVG AS CSS BACkground-image

.icon {
  background-color: tomato;
  mask-image: url('check.svg');
  mask-position: 100% 50%;
  mask-repeat: no-repeat;
  mask-size: 2rem;
}

Using SVG AS CSS MASK-image

task 2: using mask, make the checkmark change from green (valid) to red (invalid) to grey (default)

PERFORMANCE

Sketch-output sucks

SVG OMG!

task 3: MINIFY CLOSE.SVG

Try out SVG OMG

Then code it using <line>

Then code it with <path>

BUILD TOOLS

SvgSpritemapWebpackPlugin

plugins: [
  new SvgSpritemapWebpackPlugin('./src/sprites/*.svg', {
    output: {
    filename: 'spritemap.svg',
    svgo: true
  },
  sprite: {
    prefix: 'sprite-'
  },
  styles: {
    filename: '~sprites.scss'
  }
}) ...

@import '~svg-spritemap-webpack-plugin/sprites.scss';

.example {
  // Using the included .sprite() mixin
  .sprite(@sprite-phone);
  // Using the SVG variable directly
  background-image: url(@sprite-phone);
}

<svg>
  <use xlink:href="/path/to/spritemap.svg#sprite-phone"></use>
</svg>

SVG AND JAVASCRIPT

It's not HTML, so:

document.createElementNS("http://www.w3.org/2000/svg", 'svg');

SVG Workshop

SVG is essentially to graphics what HTML is to text

Understanding SVG

It's a coordinate system

The viewBox is key

It's XML

can contain script 😱

case-sensitive

not cartesian coordinates

The elements of SVG

<line>

<circle>

<RECT>

<polyLINE>

<polygon>

<path>

Multiple ways to do the same thing

Using <line>

Using <polyline>

Using <path>

task 1: create these icons using standard svg elements

SKELETON

Ways to include SVG

Using SVG as an <img>

Using SVG INLINE

Using SVG SYMBOL

Using SVG AS CSS BACkground-image

Using SVG AS CSS MASK-image

task 2: using mask, make the checkmark change from green (valid) to red (invalid) to grey (default)

PERFORMANCE

task 3: MINIFY CLOSE.SVG

BUILD TOOLS

SVG AND JAVASCRIPT

task 4: CREATE A BAR CHART from the same dataset as the polyline

That's it, folks!

SVG

SVG

Mads Stoumann

SVG Workshop

SVG is essentially to graphics what HTML is to text

Understanding SVG

It's a coordinate system

The viewBox is key

It's XML

can contain script 😱

case-sensitive

not cartesian coordinates

The elements of SVG

<line>

<circle>

<RECT>

<polyLINE>

<polygon>

<path>

Multiple ways to do the same thing

Using <line>

Using <polyline>

Using <path>

task 1: create these icons using standard svg elements

SKELETON

Ways to include SVG

Using SVG as an <img>

Using SVG INLINE

Using SVG SYMBOL

Using SVG AS CSS BACkground-image

Using SVG AS CSS MASK-image

task 2: using mask, make the checkmark change from green (valid) to red (invalid) to grey (default)

PERFORMANCE

task 3: MINIFY CLOSE.SVG

BUILD TOOLS

SVG AND JAVASCRIPT

task 4: CREATE A BAR CHART from the same dataset as the polyline

That's it, folks!

SVG

More from Mads Stoumann