oddEVEN
We provide marketing technology, front end and software development consulting to bring your digital marketing and ecommerce projects to the next level.
SVG IN THE Browser
Create Graphical Content in the Browser with SVG
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!
SVG in the Browser
By oddEVEN
SVG in the Browser
Create Graphical Content in the Browser with SVG
