Fremtidsrettet webgrafikk med SVG

BartJS - Februar 2013

Stian Veum Møllersen / @mollerse

open.bekk.no

Intro til SVG

Vektorgrafikk

Hvert element defineres som en vektor eller en geometrisk figur

Vektor vs Punktgrafikk

Raster vs Vektor

SVG på web

caniuse.com

(╯°□°)╯︵ ┻━┻

Legacy browsers

Good news

SVG og JavaScript

Dynamisk generert og programmatisk tilgjengelig grafikk

Demo

Kilder til SVG

  • Håndskrevet
  • Eksportert

Håndskrevet

<circle cx="25" cy="25" r="20" fill="green" />

var shape =
  svgDocument.createElementNS(svgns, "circle");

  shape.setAttributeNS(null, "cx", 25);
  shape.setAttributeNS(null, "cy", 25);
  shape.setAttributeNS(null, "r",  20);
  shape.setAttributeNS(null, "fill", "green");

Eksportert

Photoshop, Indesign, Inkscape — Designere

Inkludere SVG assets

<img src="some.svg" />

 

Inkludere SVG assets

<img src="some.svg" />

<object data="some.svg" type="image/svg+xml" />

Jobbe med SVG assets

var svgObject =
  document.getElementById("object").contentDocument;
var circle = svgObject.getElementById("circle");

circle.addEventListener("click", function() {
  console.log("clicked");
});

Inline SVG

  • Serverside
  • Clientside

Jobbe med inline SVG

Ikke ulikt vanlig DOM manipulasjon

Liberaries (⌐■_■)

Generelle bibliotek

Raphaël

raphael

Generelle bibliotek

Snap.svg

Spesialiserte bibliotek

  • D3.js
  • Graphael
  • m.fl.

SVG og JavaScript

med Snap.svg

Grunnleggende shapes

Endre egenskaper

Paths

Path syntax

W3 Spec

CommandName
Mmoveto
Zclosepath
Llineto
Hhorizontal lineto
Vvertical lineto
Ccurveto
Ssmooth curveto
Qquadratic Bézier curveto
Tsmooth quadratic Bézier curveto
Aelliptical arc

Paths.js

Source

var Path = require('paths/path');
var path = Path()
  .moveto(10, 20)
  .lineto(30, 50)
  .lineto(25, 28)
  .qcurveto(27, 30, 32, 27)
  .closepath();

Andre grafiske elementer

  • <ellipse>
  • <line>, <polyline> og <polygon>
  • <text>
  • <image>

Eksisterende elementer

Hentes inn med AJAX

Snap.load('some/url.svg', function(svg) {
  paper.add(svg);
});

Events

Animasjoner

Animerte paths #1

Source

Animerte paths #2

Source

NB: Ytelse

window.requestAnimationFrame() er din venn!

Wrap up

SVG vs Canvas/WebGL

Elementer vs Handlinger

Ressurser

Spørsmål, tilbakemeldinger, kjeft etc

@mollerse

stian.veum.mollersen@bekk.no

Takk for meg!