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.

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

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>

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

It's DOM, Treat it Like DOM!

<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

I'm deathly afraid of mice!

Measure Path Length

CHarts with Chartist

Simple Responsive Charts

Go check it out!

Thank You!

 Gion Kunz

 Front End Developer

@GionKunz

gion.kunz@oddeven.ch

https://oddeven.ch