$30 off During Our Annual Pro Sale. View Details »

SVG

 SVG

Using SVG as a main component of your phonegap/cordova application.

James Coleman

May 20, 2014
Tweet

More Decks by James Coleman

Other Decks in Programming

Transcript

  1. James Coleman
    UI Developer

    View Slide

  2. ianfeather.co.uk

    View Slide

  3. SVG

    View Slide




  4. SVG Structure

    View Slide

  5. developer.mozilla.org/en-US/docs/Web/SVG/Element

    View Slide


  6. width="20">




    Group tag

    View Slide


  7. width="20">



    !

    width="20">

    r="80"/>



    Definition tag

    View Slide


  8. width="20">



    !

    width="20" id="redCircles">

    r="80"/>


    !


    Use tag

    View Slide


  9. width="20">



    !

    width="20" id="redCircles">

    r="80"/>


    !


    viewBox tag

    View Slide

  10. View Slide


  11. xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    Some circles
    Created with Sketch (http://www.bohemiancoding.com/sketch)


    width="20">




    sketch:type="MSShapeGroup">






    Sketch export

    View Slide


  12. xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    Some circles
    Created with Sketch (http://www.bohemiancoding.com/sketch)


    width="20">




    sketch:type="MSShapeGroup">






    Sketch export

    View Slide




  13. width="600px" height="400px" viewBox="0 0 600 400" enable-background="new 0 0 600 400"
    xml:space="preserve">











    Illustrator export

    View Slide

  14. github.com/svg/svgo

    View Slide











  15. !
    Optimised SVG using SVGO

    View Slide

  16. SVGO Usage

    View Slide

  17. SVGO Usage

    View Slide

  18. SVGO Usage

    View Slide

  19. github.com/svg/svgo

    View Slide

  20. SVGO Usage

    View Slide

  21. View Slide

  22. Other music festival apps

    View Slide

  23. Inline or background image?

    View Slide






  24. !

    id="redCircles">




    !


    iOS Inline issue

    View Slide

  25. SVG and MathML elements must either have a
    start tag and an end tag, or a start tag that is
    marked as self-closing, in which case they must
    not have an end tag.

    View Slide





  26. circle>

    !

    id="redCircles">


    circle>


    !


    iOS Inline issue

    View Slide





  27. circle>


    !

    id="redCircles">

    r="40">



    !


    iOS Inline issue

    View Slide

  28. Inline has no size restrictions
    Up to 5 decoded megapixels

    View Slide

  29. Inline has no size restrictions
    Up to 5 decoded megapixels

    View Slide

  30. Inline or background image?

    View Slide

  31. SVG in Sketch

    View Slide

  32. SVG Export

    View Slide

  33. PDF Export

    View Slide

  34. Illustrator SVG Export

    View Slide

  35. 100% width

    View Slide

  36. Filling the space

    View Slide

  37. SVG Map result

    View Slide

  38. Optimisation

    View Slide

  39. Separate DOM SVG nodes vs. Defs

    View Slide

  40. Don’t use 3D transforms

    View Slide

  41. Don’t Base64 encode for Android

    View Slide

  42. Grouped elements result in a 7% faster paint

    View Slide

  43. SVG is painted up to 11% faster with Use elements

    View Slide

  44. Optimised (a little)

    View Slide

  45. The bad

    View Slide

  46. 3.0

    View Slide

  47. Use canvas if you’re rendering all of the nodes, ever.

    View Slide

  48. View Slide

  49. The great

    View Slide

  50. Resolution independence past @2x

    View Slide

  51. Mutable

    View Slide

  52. Animate

    View Slide

  53. Thanks!

    View Slide