Post on 14-Dec-2014
description
SCALABLE VECTOR GRAPHICS FTW!
En introduksjon til bruk av SVG på web i dag!
TDC 2013Stian Møllersen & Jonas Follesø31/01/2013
OM OSS
Scientist & Manager BEKK Trondheim
@follesoe
Jonas Follesø
Konsulent BEKK Trondheim
@mollerse
Stian Møllersen
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
SVG
SVGHello World
<!doctype html><html><body> <svg width="640" height="480"> <ellipse 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 Hello World
EirDemo
1999
SVG HISTORIE
1999
April: Adobedemonstrerer rendring
Feb: W3C med første utkast
2001
Sep: W3C SVG 1.0 Recommendation
2003
Okt: W3C med første utkast til SVG 1.1 med profileneSVG Tiny & SVG Mobile
Jan: W3C SVG 1.1 Recommendation
2004
Feb: Siemens CX64med SVG Tiny
April: Sony EriccsonK700 med SVG Tiny
SVG HISTORIE
2003
Jan: W3C SVG 1.1 Recommendation
2004
Feb: Siemens CX64med SVG Tiny
April: Sony EriccsonK700 med SVG Tiny
2008
Des: W3C SVG 1.1 Recommendation
2010
Mai: Inline SVGdel av HTML5
2011
Aug: W3C SVG 1.1Second Edition
2014
Aug: W3CSVG 2.0Recommendation
NETTLESERSTØTTE SVG 1.1
Siden 2004 Siden 2005(Gecko)
Siden 2006(WebKit)
Siden 2011 (!)
FINN.NO SOMMER 2013
IE8 & IE7 utgjør 6%
Eksempel:Logo som
SVG
<!doctype html><html><body> <img src="logo.svg" /></body></html>
SVG sombilde
<!doctype html><html><head> <script src="modernizr.js"></script> <script src="jquery.js"></script></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>
Bytte ut SVG med
PNG
<!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> <!--[if lte IE 8]><img src="logo.png" /><![endif]--> <!--[if gt IE 8]><img src="logo.svg" /><![endif]--> <!--[if !IE]> --><img src="logo.svg" /><!-- <![endif]--></body></html>
Bruke IE-conditional
s
Størrelse?
$ npm install -g svgo
$ 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
Komprimering
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:InteraktivSVG figur
Eksempel:ResponsiveSVG 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>
Eksempel:Animasjon
ANIMASJON
CSS3 Transitions
CSS3Animations
JS setTimeout
SVGAnimations
CSS3 TRANSITION<svg width="100" height="100"> <style> .csstransition { fill: black; } .csstransition:hover { fill: teal; transition-property: fill; transition-duration: 1s; } </style> <rect class="csstransition" width="100" height="100" /></svg>
CSS3 Transitions
CSS3 ANIMATION<svg width="100" height="100"> <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>
CSS3Animations
SVG ANIMATION
<svg width="100" height="100"> <rect width="100" height="100"> <animate attributeName="fill" from="black" to="purple" dur="1s" begin="mouseover" /> </rect></svg>
SVGAnimations
JAVASCRIPT BASERT ANIMASJON<svg width="100" height="100"> <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 setTimeou
t
JavaScriptbiblioteker
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 tilgjengeligs.add(f);
var T = s.select('#letterT'), D = s.select('#letterD'), C = s.select('#letterC'), text = s.select('#text');
text.attr({ transform: "translate(-900, -350) scale(2.8)" });
setTimeout(shrinkAndTranslateText, 1500);setTimeout(fadeIn(T), 2000);
setTimeout(fadeIn(D), 2200); setTimeout(fadeIn(C), 2400);});
ManipulereEksisteren
deSVG
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));});
ManipulereEksisteren
deSVG
Demo
function renderC() {sirkel = s.circle(cx, cy, radius);sirkel.attr({
'stroke': '#333','fill': '#bada55','strokeWidth': 3
});mask = s.rect(maskX, maskY, maskWidth, maskHeight);mask.attr({
'fill': '#FFF'});sirkel.attr({
'mask': mask});
};
setTimeout(renderC, 2000);
DynamiskGenerere
SVG
setTimeout(renderTPole, 0);setTimeout(renderTBar, 300);setTimeout(renderDBar, 600);setTimeout(renderDBulge, 1000);setTimeout(renderC, 2000);setTimeout(render13Text, 2200);setTimeout(renderUnderline, 2200);
DynamiskGenerere
SVG
Demo
Oppsummering
2D vektorgrafikk for web i XML
Gammel standard, god
støtte, men kun IE9 og
nyere
Del av DOM og kan
manipuleres med CSS og
JS
SVG er klart og alle burde
bruke det!Begynn med noe enkelt –
f.eks. logo som SVG
TAKK FOR OSS!
Stian MøllersenJonas Follesø
http://github.com/follesoe/svgftw