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');

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

That's it, folks!

SVG Tactical Elements