Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Whirlwind Tour of SVG

Whirlwind Tour of SVG

Introduction to SVG (Scalable Vector Graphics). In this session, we'll walk through the essential building blocks of SVG (Scalable Vector Graphics). Then we'll dive into transforms and matrices and how to manage the transform stack. We'll also learn how to script against SVG.

We'll cover these topics:
Introduction to SVG elements
Benefits of using SVG
The different ways to embed SVG
Scripting SVG
Using SVG links
SVG filters
Using CSS Animation with SVG
CSS Transforms and Transform Matrices
Other Cool SVG Stuff (Links and Demos)

Marc Grabanski

December 18, 2013
Tweet

More Decks by Marc Grabanski

Other Decks in Technology

Transcript

  1. by Marc Grabanski
    Whirlwind Tour of
    Scalable Vector Graphics

    View full-size slide

  2. 1. What is SVG? Why?
    2. Overview SVG Elements
    3. Embed SVG
    4. SVG Features
    5. DEMOs!
    6. Raphael
    7. Other Cool Tools
    Agenda

    View full-size slide

  3. !
    !
    jQuery UI Datepicker
    !
    MarcGrabanski.com
    !
    LOTS of UI Dev
    Who?
    Marc Grabanski

    View full-size slide

  4. !
    !
    !
    Publisher of:
    Currently...
    UI/UX Development Consultant
    http://FrontendMasters.com

    View full-size slide

  5. 1. What is SVG?

    View full-size slide

  6. HTML...
    for graphics!
    SVG

    View full-size slide

  7. One SVG For All
    Scaling bitmaps (jpeg/gif/png)
    have to add more pixel data
    !
    Scaling SVG...use that same file

    View full-size slide

  8. SVG
    Zoomed
    PNG
    Zoomed

    View full-size slide

  9. Modify Static

    View full-size slide

  10. Why Use SVG?

    View full-size slide

  11. • Scales and Retina-ready
    • HTML-like elements - DOM Structure
    • CSS3 and JavaScript
    • Printer friendly
    • Accessibility Features and SEO
    • Browser Coverage
    • Gzip-friendly
    • More! Filters, Paths, Viewbox, etc.
    SVG Advantages

    View full-size slide

  12. 2. SVG Elements

    View full-size slide








  13. Elements Walkthough

    View full-size slide


  14. Hello, out there

    Hello, out there

    View full-size slide


  15. center x, center y and radius

    View full-size slide

  16. fill=”#56a9f6” />

    View full-size slide


  17. radius x, radius y

    View full-size slide

  18. stroke=”#56a9f6”
    stroke-width="25" />

    View full-size slide

  19. points="350,75 379,161 469,161 397,215
    423,301 350,250 277,301 303,215
    231,161 321,161" />

    View full-size slide

  20. stroke="blue" stroke-width="10"
    points="50,375 150,375 150,325 250,325 250,375
    350,375 350,250 450,250 450,375
    550,375 550,175 650,175 650,375
    750,375 750,100 850,100 850,375
    950,375 950,25 1050,25 1050,375 1150,375" />

    View full-size slide


  21. Command Driven:
    Moveto, Line, Curveto, Bézier Curves,
    Quadratic Bézier Curves, Elliptical Arc...

    View full-size slide

  22. Path is Incredibly
    Powerful

    View full-size slide

  23. transform="rotate(-10)" stoke-width="5"
    stroke="black">



    Grouping

    View full-size slide

  24. 3. Embed SVG

    View full-size slide

  25. Embed Methods
    • Object Tag
    • Inline (HTML5)
    • As Image
    • CSS Background
    • Image Fallback

    View full-size slide

  26. data=”test.svg”>


    SVG Object
    For JS scripting you need to grab object:
    element.contentDocument

    View full-size slide

  27. Inline SVG Support
    http://caniuse.com/svg-html5

    View full-size slide

  28. Image SRC




    JS inside SVG is disabled.

    View full-size slide

  29. SVG as IMG SRC
    http://caniuse.com/#feat=svg-img

    View full-size slide

  30. CSS Background

    <br/>#foo { background: url(goat.svg); }<br/>

    View full-size slide

  31. SVG in CSS Background
    http://caniuse.com/#feat=svg-css

    View full-size slide

  32. http://www.svgeneration.com/

    View full-size slide


  33. xlink:href=“svg.svg” src="svg.png"
    width=“100%" height=“100%" />

    Image Fallback

    View full-size slide

  34. Image Fall Scripts

    View full-size slide

  35. Before IE9
    Raphael JS

    View full-size slide

  36. 4. SVG Features

    View full-size slide

  37. DOM Structure
    Inspectable Elements

    View full-size slide

  38. document.getElementById(‘star’).onclick = ...
    !
    points="350,75 379,161 469,161 397,215
    423,301 350,250 277,301 303,215
    231,161 321,161" />

    View full-size slide

  39. http://www.anthonycalzadilla.com/i-twitty-the-fool/
    CSS Animations

    View full-size slide

  40. Great for Icons

    View full-size slide

  41. Media Queries

    View full-size slide

  42. SVG Filters
    http://svg-wow.org/filterEffects/chiseled.svg

    View full-size slide

  43. Hands-On Filters
    http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-
    on_svg-filter-effects.htm

    View full-size slide

  44. SVG Filter Support
    http://caniuse.com/#feat=svg-filters

    View full-size slide

  45. Transforms
    x
    y
    axis

    View full-size slide

  46. Demo: Stacking Transforms
    http://codepen.io/1Marc/pen/DCvFm

    View full-size slide

  47. 6. RaphaelJS

    View full-size slide

  48. Source
    Your Sources

    View full-size slide

  49. I learned from
    about using

    View full-size slide

  50. Raphael JS
    SVG (Most Browsers) +
    VML (MS IE6-8)
    Graphic Credit: Dmitry

    View full-size slide

  51. Raphael JS
    - Common API for VML/SVG
    - Utils make vector sane.
    “The jQuery of
    Vector Graphics”

    View full-size slide

  52. Dropping IE8
    SVG Works Everywhere
    IE9+

    View full-size slide

  53. Don’t Support
    IE8? Use Snapsvg

    View full-size slide

  54. • Primitives (Rectangle, Circle, etc)
    • Attributes (Stroke, Dimensions, etc)
    • Events (Click and Touch)
    • Animation and Easing
    • Sets (Grouping)
    • Transforms (Rotate, Scale, etc)
    Raphael JS

    View full-size slide

  55. Transforms
    in Raphael
    el.transform(“T 10,10”);
    - move x, y
    el.transform(“S 10,10,0,0);
    - scale 10,10 around 0,0
    el.transform(“R 45,0,0);
    - rotate 45 around 0,0 (optional)

    View full-size slide

  56. Transforms
    in Raphael
    Capital T, S and R absolute
    transforms
    Lower case t, s and r are relative
    to previous transforms.

    View full-size slide

  57. Before Raphael
    x
    y
    axis

    View full-size slide

  58. transform(‘R45,100,50 T100,0’)
    x
    y
    Absolute “T” transform
    Relative to original axis
    axis

    View full-size slide

  59. x
    y
    Relative “t” transform
    Relative to current axis
    transform(‘r 20,100,50 t 100,0’)
    axis

    View full-size slide

  60. Demo: Absolute/Relative
    Transforms in Raphael
    http://codepen.io/1Marc/pen/rsmbF

    View full-size slide

  61. Transforms
    in Raphael
    el.transform(‘...t 10, 10’);
    add transform to end
    el.transform(‘r45...’);
    add transform before

    View full-size slide

  62. Transforms
    in Raphael
    el.transform();
    get the current transform object
    el.matrix.split();
    get results of all applied transforms
    AWESOME method!

    View full-size slide

  63. el.getBBox();
    gets x, y, width and height of
    bounding box
    Bounding Box

    View full-size slide