• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Scalable Vector Graphics FTW!
 

Scalable Vector Graphics FTW!

on

  • 1,045 views

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

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.

Statistics

Views

Total Views
1,045
Views on SlideShare
1,008
Embed Views
37

Actions

Likes
3
Downloads
1
Comments
0

1 Embed 37

https://twitter.com 37

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Scalable Vector Graphics FTW! Scalable Vector Graphics FTW! Presentation Transcript

    • 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
    • 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" 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>
    • Eir Demo
    • 1999
    • 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%
    • 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 </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> <!--[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
    • 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 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>
    • 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:hover { fill: teal; transition-property: fill; transition-duration: 1s; } </style> <rect class="csstransition" width="100" height="100" /> </svg>
    • 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
    • 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
    • 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
    • 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
    • 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); Dynamisk Generere 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
    • Demo
    • 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