SVG IN THE Browser

Create Graphical Content in the Browser with SVG

Gion Kunz

Front End Developer

@GionKunz

gion.kunz@oddeven.ch

https://oddeven.ch

What is SVG

Scalable Vector Graphics

Rasterized

Vectors

Vectors are awesome!

image Sbyrnes321

Some SVG History

Common Goal

Declarative language to describe graphical content using XML

<circle cx="100" cy="100" r="60">

Basic Shapes

Very few basic graphical shapes to create larger compositions.

<circle> <ellipse> <image> 
<line> <path> <polygon> 
<polyline> <rect> <text>

Scene Graph

Using transformation matrices creates a scene hierarchy.

http://jsbin.com/cotote/edit?html,css

Make your browser a Painter

Many Other Cool Things

Accessibility
Filters
Fonts
Animations
More

SVG Support in Browsers

SVG as an Image

<!doctype html>
<img src="image.svg">

IE 9

Chrome 4

FF 4

Safari 3.2

http://jsbin.com/posehu/edit?html,output

Inline SVG in DOM

<!doctype html>
<svg>
  <circle cx="100" cy="100" r="60">
</svg>

IE 9

Chrome 7

FF 4

Safari 5.1

SVG is not complicated...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
                     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.1" baseProfile="full"
     width="800mm" height="600mm"
     viewBox="-400 -300 800 600">
</svg>

or is it?

No, in HTML5 it isn't

<svg width="100%" height="100%">
  <circle cx="50%" cy="50%" r="60"></circle>
</svg>

https://jsbin.com/jabufi/edit?html,output

SVG in the DOM

Separation of Concerns

Structure in SVG, style in CSS and add behaviour with JavaScript

Style Properties

fill	Fill colour of shapes
stroke	Colour of shape outlines
stroke-width	The width of shape outlines
stroke-dasharray	Specify a dash pattern for the strokes
stroke-dashoffset	An offset for the dash pattern
stroke-linecap	How line caps should be rendered
stroke-linejoin	How lines are joined together
shape-rendering	Useful if you need crispy edges

http://jsbin.com/nosuto/edit?html,output

http://jsbin.com/qexopa/edit?css,output

http://jsbin.com/bacove/edit?css,output

It's DOM, Treat it Like DOM!

http://jsbin.com/nosuto/1/edit?html,output

<circle class="dot" 
        cx="50%" cy="50%" r="60"></circle>

const dot = document.querySelector('.dot');
dot.addEventListener('click', () => {
  alert('I was clicked!');
});

Your Imagination is the limit

https://jsbin.com/devubad/edit?js,output

I'm deathly afraid of mice!

Measure Path Length

http://jsbin.com/noroheg/edit?js,output

CHarts with Chartist

Simple Responsive Charts

http://jsbin.com/wupuhu/edit?css,js

Go check it out!

http://gionkunz.github.io/chartist-js/

Thank You!

Gion Kunz

Front End Developer

@GionKunz

gion.kunz@oddeven.ch

https://oddeven.ch