Your SlideShare is downloading. ×
0
SCALABLE VECTOR GRAPHICS FTW!
En introduksjon til bruk av SVG på web i dag!

TDC 2013
Stian Møllersen & Jonas Follesø
31/0...
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 – An...
SVG

…a language for describing two-dimensional

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

- ...
SVG

SVG
Hello
World
<!doctype html>
<html>
SVG
<body>
Hello
<svg width="640" height="480">
<ellipse
World
ry="47" rx="47" cy="96" cx="95"
stro...
Eir
Demo
1999
SVG HISTORIE

1999

April: Adobe
demonstrerer rendring

Feb: W3C med første utkast

2003

Jan: W3C SVG 1.1 Recommendation
...
SVG HISTORIE

2008

2003

Jan: W3C SVG 1.1 Recommendation

2011

Mai: Inline SVG
del av HTML5

Feb: Siemens CX64
med SVG T...
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 som
bilde
<!doctype html>
<html>
<head>
Bytte ut
<script src="modernizr.js"></script>
SVG med
<script src="jquery.js"></script>
PNG
...
<!doctype html>
<html>
<body>
<object type="image/svg+xml" data="logo.svg">
<img src="logo.png"/>
</object>
</body>
</html...
<!doctype html>
<html>
<body>
<!--[if lte IE 8]><img src="logo.png" /><![endif]-->
<!--[if gt IE 8]><img src="logo.svg" />...
Størrelse?
$ npm install -g svgo
Komprimering

$ svgo logo.svg logo.min.svg

Done in 411 ms!
286.466 KiB - 59.5% = 115.973 KiB
$ svgo...
OPTIMALISERING OG KOMPRIMERING AV SVG

Filnavn

Metode

Størrelse

Av original

logo.svg

Original fil

293 KB

100%

logo...
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 d...
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 ...
Eksempel:
Animasjon
ANIMASJON

SVG
Animations

CSS3
Transitions

CSS3
Animations

JS
setTimeout
CSS3 TRANSITION

<svg width="100" height="100">
<style>
.csstransition {
fill: black;
}

CSS3
Transitions

.csstransition:...
CSS3 ANIMATION
<svg width="100" height="100">
<style>
@-webkit-keyframes fill {
from {
fill: black;
}
to {
fill: teal;
}
}...
SVG ANIMATION

<svg width="100" height="100">
<rect width="100" height="100">
<animate
attributeName="fill"
from="black"
t...
JAVASCRIPT BASERT ANIMASJON

<svg width="100" height="100">
<rect id="jsRect" width="100" height="100" />
</svg>
<script s...
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('#lett...
var s = Snap(600,600);
Snap.load('tdc.svg', function(f) {
var T = s.select('#letterT'),
D = s.select('#letterD'),
C = s.se...
Demo
function renderC() {
sirkel = s.circle(cx, cy, radius);
sirkel.attr({
'stroke': '#333',
'fill': '#bada55',
'strokeWidth': ...
setTimeout(renderTPole, 0);
setTimeout(renderTBar, 300);
setTimeout(renderDBar, 600);
setTimeout(renderDBulge, 1000);
setT...
Demo
Begynn med noe
enkelt – f.eks.
logo som SVG

SVG er klart og
alle burde bruke
det!

Oppsummering

Del av DOM og
kan manipu...
TAKK FOR OSS!
Stian Møllersen
Jonas Follesø

http://github.com/follesoe/svgftw
Scalable Vector Graphics FTW!
Scalable Vector Graphics FTW!
Scalable Vector Graphics FTW!
Scalable Vector Graphics FTW!
Scalable Vector Graphics FTW!
Upcoming SlideShare
Loading in...5
×

Scalable Vector Graphics FTW!

972

Published on

Example code: https://github.com/follesoe/svgftw

I gamle dager het det seg at man kun skal bruke table-elementet for tabeller, mens CSS skal brukes til layout. Er tiden inne for å kunne lage en ny regel som heter at raster-grafikk kun skal brukes for fotografier, mens alt annet burde være vektor-grafikk? SVG begynner å bli en moden og utbredt standard som er klar til å tas i bruk i dag. SVG muliggjør skalerbar vektorgrafikk, som gir deg illustrasjoner, ikoner og figurer som skalerer uavhengig av størrelse og skjermoppløsning. I denne presentasjonen får du en gjennomgang av SVG standarden. Vi vil se på historien til SVG og nettleserstøtte, før vi begynner med noen enkle brukstilfeller for SVG. Gradvis vil vi se på mer avanserte scenarioer, som bruk filtre og effekter, dynamisk generering av vektorgrafikk, animasjon, samt hvordan eksportere til SVG fra kjente designverktøy. Presentasjonen er i stor grad basert på erfaringer fra prosjekt hvor alt av grafikk er gjort ved hjelp av SVG.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
972
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Scalable Vector Graphics FTW!"

  1. 1. SCALABLE VECTOR GRAPHICS FTW! En introduksjon til bruk av SVG på web i dag! TDC 2013 Stian Møllersen & Jonas Follesø 31/01/2013
  2. 2. OM OSS Jonas Follesø Stian Møllersen Scientist & Manager BEKK Trondheim Konsulent BEKK Trondheim @follesoe @mollerse
  3. 3. 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
  4. 4. SVG …a language for describing two-dimensional vector graphics in XML, combined with raster graphics and multimedia… - W3C
  5. 5. SVG SVG Hello World
  6. 6. <!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>
  7. 7. Eir Demo
  8. 8. 1999
  9. 9. 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
  10. 10. 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
  11. 11. NETTLESERSTØTTE SVG 1.1 Siden 2004 Siden 2005 (Gecko) Siden 2006 (WebKit) Siden 2011 (!)
  12. 12. FINN.NO SOMMER 2013 IE8 & IE7 utgjør 6%
  13. 13. Eksempel: Logo som SVG
  14. 14. <!doctype html> <html> <body> <img src="logo.svg" /> </body> </html> SVG som bilde
  15. 15. <!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>
  16. 16. <!doctype html> <html> <body> <object type="image/svg+xml" data="logo.svg"> <img src="logo.png"/> </object> </body> </html> Bruke object-tag
  17. 17. <!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 IEconditionals
  18. 18. Størrelse?
  19. 19. $ 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
  20. 20. 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%
  21. 21. Eksempel: Interaktiv SVG figur
  22. 22. Eksempel: Responsive SVG icons
  23. 23. RESPONSIVE ICONS • Vektorgrafikk skalerer bra opp og ned • .. til en viss grad • skalerer vi detaljert figur ned blir den til slutt utydelig
  24. 24. Endre detaljnivå når figuren blir mindre
  25. 25. 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>
  26. 26. Eksempel: Animasjon
  27. 27. ANIMASJON SVG Animations CSS3 Transitions CSS3 Animations JS setTimeout
  28. 28. CSS3 TRANSITION <svg width="100" height="100"> <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>
  29. 29. 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> CSS3 Animations
  30. 30. 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> SVG Animations
  31. 31. 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 setTimeout
  32. 32. JavaScript biblioteker for SVG
  33. 33. SVG MED JAVASCRIPT • Generere og manipulere • Lavt abstraksjonsnivå • <rect /> blir rect();
  34. 34. RAPHAËL.JS • Håndtere SVG med JavaScript • VML-fallback for IE<9 • raphaeljs.com
  35. 35. SNAP.SVG • Bygger på Raphaël.js • Moderne API • Ingen IE<9 fallback • snapsvg.io
  36. 36. 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); });
  37. 37. 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
  38. 38. Demo
  39. 39. 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); Dynamisk Generere SVG
  40. 40. setTimeout(renderTPole, 0); setTimeout(renderTBar, 300); setTimeout(renderDBar, 600); setTimeout(renderDBulge, 1000); setTimeout(renderC, 2000); setTimeout(render13Text, 2200); setTimeout(renderUnderline, 2200); Dynamisk Generere SVG
  41. 41. Demo
  42. 42. 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
  43. 43. TAKK FOR OSS! Stian Møllersen Jonas Follesø http://github.com/follesoe/svgftw
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×