Scalable Vector Graphics FTW!

SCALABLE VECTOR GRAPHICS FTW!
En introduksjon til bruk av SVG på web i dag!

TDC 2013
Stian Møllersen & Jonas Follesø
31/01/2013

OM OSS

Jonas Follesø

Stian Møllersen

Scientist & Manager BEKK Trondheim

Konsulent BEKK Trondheim

@follesoe

@mollerse

AGENDA
Del 1 – Hva er SVG?
Del 2 – Historien til SVG
Del 3 – SVG bilder & Optimalisering
Del 4 – Interaktiv SVG
Del 5 – Animasjoner & Responsive SVG
Del 6 – JS biblioteker for SVG
Del 7 – Oppsummering

SVG

…a language for describing two-dimensional

vector graphics in XML, combined with raster
graphics and multimedia…

- W3C

<!doctype html>
<html>
SVG
<body>
Hello
<svg width="640" height="480">
<ellipse
World
ry="47" rx="47" cy="96" cx="95"
stroke-width="5" stroke="#000000" fill="#FF0000"/>
<rect
height="57" width="95" y="56" x="165"
stroke-width="5" stroke="#000000" fill="#00bf00"/>
<text
font-family="serif" font-size="24" y="182" x="108"
stroke-dasharray="null" fill="#000000">Hello World</text>
</svg>
</body>
</html>

SVG HISTORIE

1999

April: Adobe
demonstrerer rendring

Feb: W3C med første utkast

2003

Jan: W3C SVG 1.1 Recommendation

Sep: W3C SVG 1.0
Recommendation
2001

Okt: W3C med første
utkast til SVG 1.1 med profilene
SVG Tiny & SVG Mobile

Feb: Siemens CX64
med SVG Tiny
2004

April: Sony Ericcson
K700 med SVG Tiny

SVG HISTORIE

2008

2003

Jan: W3C SVG 1.1 Recommendation

2011

Mai: Inline SVG
del av HTML5

Feb: Siemens CX64
med SVG Tiny
2004

April: Sony Ericcson
K700 med SVG Tiny

Aug: W3C SVG 1.1
Second Edition

Des: W3C SVG 1.1
Recommendation

2010

Aug: W3C
SVG 2.0
2014 Recommendation

NETTLESERSTØTTE SVG 1.1

Siden 2004

Siden 2005
(Gecko)

Siden 2006
(WebKit)

Siden 2011 (!)

FINN.NO SOMMER 2013

IE8 & IE7
utgjør 6%

<!doctype html>
<html>
<body>
<img src="logo.svg" />
</body>
</html>

SVG som
bilde

<!doctype html>
<html>
<head>
Bytte ut
<script src="modernizr.js"></script>
SVG med
<script src="jquery.js"></script>
PNG
</head>
<body>
<img src="logo.svg" />
<script>
if(!Modernizr.svg) {
$('img[src*="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
}
</script>
</body>
</html>

<!doctype html>
<html>
<body>
<object type="image/svg+xml" data="logo.svg">
<img src="logo.png"/>
</object>
</body>
</html>

Bruke
object-tag

<!doctype html>
<html>
<body>


<img src="logo.svg" />
</body>
</html>

Bruke IEconditionals

$ npm install -g svgo
Komprimering

$ svgo logo.svg logo.min.svg

Done in 411 ms!
286.466 KiB - 59.5% = 115.973 KiB
$ svgo logo.svg -o - | gzip -cfq9 > logo.min.svgz
$ 18.975 KiB logo.min.svgz

https://github.com/svg/svgo

OPTIMALISERING OG KOMPRIMERING AV SVG

Filnavn

Metode

Størrelse

Av original

logo.svg

Original fil

293 KB

100%

logo.svgz

Gzip

35 KB

11.94%

logo.min.svg

SVGO

119 KB

40.61%

logo.min.svgz

SVGO + Gzip

19 KB

6.48%

Eksempel:
Interaktiv
SVG figur

Eksempel:
Responsive
SVG icons

RESPONSIVE ICONS

• Vektorgrafikk skalerer bra opp og ned

• .. til en viss grad
•

skalerer vi detaljert figur ned blir den til slutt utydelig

Endre
detaljnivå
når figuren
blir mindre

CSS MEDIA QUERIES

• Kan bruke CSS Media Queries til å endre SVG ved gitte størrelser
• SVG Viewport er img-elementet sin størrelse
<img src="octocat.svg" id="octocat" width="100%" />
<svg>
<style>
@media screen and (max-width: 64px) {
#catface {
display: none;
}
}
</style>
...
<svg>

ANIMASJON

SVG
Animations

CSS3
Transitions

CSS3
Animations

JS
setTimeout

CSS3 TRANSITION

<style>
.csstransition {
fill: black;
}

CSS3
Transitions

.csstransition:hover {
fill: teal;
transition-property: fill;
transition-duration: 1s;
}
</style>
<rect class="csstransition" width="100" height="100" />
</svg>

CSS3 ANIMATION
<style>
@-webkit-keyframes fill {
from {
fill: black;
}
to {
fill: teal;
}
}
.cssanim:hover {
-webkit-animation-name: fill;
-webkit-animation-duration: 1s;
}
</style>
<rect class="cssanim" width="100" height="100" />
</svg>

CSS3
Animations

SVG ANIMATION

<rect width="100" height="100">
<animate
attributeName="fill"
from="black"
to="purple"
dur="1s"
begin="mouseover" />
</rect>
</svg>

SVG
Animations

JAVASCRIPT BASERT ANIMASJON

<rect id="jsRect" width="100" height="100" />
</svg>
<script src="jquery.svg.js"></script>
<script src="jquery.svganim.js"></script>
<script>
$("#jsRect").mouseover(function() {
$(this).animate({ "svgFill": "green" }, 1000);
});
$("#jsRect").mouseout(function() {
$(this).animate({ "svgFill": "black" }, 1000);
});
</script>

JS
setTimeout

JavaScript
biblioteker
for SVG

SVG MED JAVASCRIPT

• Generere og manipulere
• Lavt abstraksjonsnivå
• <rect /> blir rect();

RAPHAËL.JS

• Håndtere SVG med

JavaScript
• VML-fallback for IE<9
• raphaeljs.com

SNAP.SVG

• Bygger på Raphaël.js

• Moderne API
• Ingen IE<9 fallback
• snapsvg.io

var s = Snap(600,600);
Snap.load('tdc.svg', function(f) {
//Her er tdc.svg tilgjengelig
s.add(f);

var T = s.select('#letterT'),
D = s.select('#letterD'),
C = s.select('#letterC'),
text = s.select('#text');

Manipulere
Eksisterende
SVG

text.attr({ transform: "translate(-900, -350) scale(2.8)" });
setTimeout(shrinkAndTranslateText, 1500);
setTimeout(fadeIn(T), 2000);
setTimeout(fadeIn(D), 2200);
setTimeout(fadeIn(C), 2400);
});

var s = Snap(600,600);
Snap.load('tdc.svg', function(f) {
var T = s.select('#letterT'),
D = s.select('#letterD'),
C = s.select('#letterC'),
text = s.select('#text');
T.hover(zoomAndRotate(T, 25), reset(T));
D.hover(zoomAndRotate(D, -15), reset(D));
C.hover(zoomAndRotate(C, 15), reset(C));
});

Manipulere
Eksisterende
SVG

setTimeout(renderTPole, 0);
setTimeout(renderTBar, 300);
setTimeout(renderDBar, 600);
setTimeout(renderDBulge, 1000);
setTimeout(renderC, 2000);
setTimeout(render13Text, 2200);
setTimeout(renderUnderline, 2200);

Dynamisk
Generere
SVG

Begynn med noe
enkelt – f.eks.
logo som SVG

SVG er klart og
alle burde bruke
det!

Oppsummering

Del av DOM og
kan manipuleres
med CSS og JS
2D vektorgrafikk
for web i XML

Gammel
standard, god
støtte, men kun
IE9 og nyere

TAKK FOR OSS!
Stian Møllersen
Jonas Follesø

http://github.com/follesoe/svgftw

Scalable Vector Graphics FTW!

Recommended

Recommended

More Related Content

More from Jonas Follesø

More from Jonas Follesø (8)

Scalable Vector Graphics FTW!