SVG – Introduction

<rect width="100" height="100"/>
<circle cx="70" r="50"/>
<ellipse cx="70" rx="50"/>
<path d="M41.28,31.27C68.68,21.7,72.02,3.22,84.16,8.81"/>

So what is new with SVG authoring?

• Fidelity
• Structure
• File Size

Fidelity For The Web

Blend Modes

• normal
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference

Hover on the blend modes to see different effects
Use the slider to change the t-shirt color

Structure

Document Structure

<svg id="Layer_1" data-name="Layer 1"
	xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792">
	<defs>
	  <linearGradient id="Orange_Yellow" data-name="Orange, Yellow"
				x1="5" y1="82" x2="189" y2="82"
				gradientUnits="userSpaceOnUse">
	    <stop offset="0" stop-color="#fff33b"/>
	    <stop offset="0.04" stop-color="red"/>
	  </linearGradient>
	</defs>
	<rect class="cls-4" x="5" y="5" width="184" height="154"/>
</svg>

Semantics

<rect class="cls-1" x="165" y="182" width="224" height="150"
	rx="39.19" ry="39.19"
	transform="translate(9.27 -253.95) rotate(30)"/>

Symbols

<symbol id="Coin" data-name="Coin" viewBox="0 0 11.18 11.18">
	<circle class="cls-1" cx="5.59" cy="5.59" r="5.48"/>
	<path class="cls-2" d="M5.59,1.46A4.13,4.13,0,1,0,9.72,5.59,..."/>
</symbol>
<use width="11.18" height="11.18" xlink:href="#Coin"/>

<use class="coin" ... xlink:href="#Coin"/>

<use class="coin" ... xlink:href="#Coin"/>
<use class="coin" ... xlink:href="#Coin"/>
...

.coin {
	transition: transform 0.2s;
}
.coin:hover {
	transform: scale(1.2);
}
.coin:active {
	filter: url(#hue-false);
	transform: scale(-1.2, 1.2);
}
.winner:active {
	filter: url(#hue-true);
}

Click and hold on coins until you find the green one!

Customizable

Small file size – Path Optimization

About 20% size improvement by generating smarter path data

Small file size v.s. semantics

Bringing SVG to life

snapsvg.io

Snap.svg

Demo by Snap SVG’s author Dmitry Baranovskiy
click on red background to start animation

The SVG code

<svg id="demo" xmlns="http://www.w3.org/2000/svg" ...>
	<path class="cls-1" d="M520.833,-0.000 ..."/>
	<path class="cls-2" d="M742.708,239.375 ..."/>
	<path class="cls-3" d="M813.958,765.833 ..."/>
	<path class="cls-4" d="M611.042,741.458 ..."/>
	<path class="cls-5" d="M644.583,202.292 ..."/>
<svg>

Setup Snap.svg

var bubble = Snap(".cls-5"),
		svg = Snap("#demo"),
		people = Snap(".cls-3"),
		shadow = svg.selectAll(".cls-2 .cls-4");

The animation

people.animate({
		strokeDashoffset: 0
	}, 1000, function () {
		people.animate({
				fillOpacity: 1,
				strokeWidth: 0
			}, 1000, function () {...});
		});
});