SVG

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

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