Next Level SVG

SVG Sprites, SVG Stacks, SVG fallbacks, Clown-Car Technique and Responsive Icons, SVG as a module.

Transcript

1. Scalable Vector Graphics.
   Next Level
   Ilya Pukhalski,
   April 2014
   

   View Slide

2. @pukhalski
   !
   Solution Architect, EPAM Systems
   Lecturer, British Higher School of Art & Design
   

   View Slide

3. You think you know SVG
   

   View Slide

4. I was pretty sure
   as well…
   

   View Slide

5. Boring & Crazy
   

   View Slide

6. Booooooooooring
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. xframeworkjs.org
    

    View Slide

15. xframeworkjs.org
    

    View Slide

16. Crazy.
    

    View Slide

17. 
    src="svg.png"
    width="96"
    height="96"/>
    
    

    View Slide

18. (a slide with an example
    of train animation using
    SVG path)
    Promote with Pukhalski. Put your ad here.
    

    View Slide

19. SVG Sprites
    

    View Slide

20. View Slide

21. View Slide

22. .module {
    background: url('logo.png');
    background: none, url('logo.svg');
    }
    

    View Slide

23. SVG Stacks
    

    View Slide

24. View Slide

25. View Slide

26. Clown Car
    Technique
    

    View Slide

27. How do you serve
    responsive images?
    

    View Slide

28. !
    alt="responsive image"
    src="small.jpg"
    srcset="large.jpg 1600w,
    large.jpg 800w 1.95x,
    medium.jpg 800w,
    medium.jpg 400w 1.95x”>
    Image Source Set
    

    View Slide

29. !
    
    
    
    
    
    
    
    Picture Element
    

    View Slide

30. The best solution so far?
    

    View Slide

31. Clown Car Technique
    • SVG
    • Media-queries
    • Background images
    

    View Slide

32. SVG Support
    

    View Slide

33. MQ inside SVG
    

    View Slide

34. viewBox="0 0 300 329"
    preserveAspectRatio="xMidYMid
    meet">
    !
    Clown Car Technique
    !
    
    

    View Slide

35. svg {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    }
    !
    @media screen and (max-width: 400px) {
    svg {
    background-image: url("images/small.png");
    }
    }
    !
    @media screen and (min-width: 401px) and (max-
    width: 700px) {
    svg {
    background-image: url(images/medium.png);
    }
    }
    !
    

    View Slide

36. }
    !
    @media screen and (min-width: 401px) and (max-
    width: 700px) {
    svg {
    background-image: url(images/medium.png);
    }
    }
    !
    @media screen and (min-width: 701px) and (max-
    width: 1000px) {
    svg {
    background-image: url(images/big.png);
    }
    }
    !
    @media screen and (min-width: 1001px) {
    svg {
    background-image: url(images/huge.png);
    

    View Slide

37. preserveAspectRatio="xMidYMid meet">
    !
    Clown Car Technique
    !
    <br/>svg {<br/>background-size: 100% 100%;<br/>background-repeat: no-repeat;<br/>}<br/>!<br/>@media screen and (max-width: 400px) {<br/>svg {<br/>background-image: url("images/small.png");<br/>}<br/>}<br/>!<br/>@media screen and (min-width: 401px) and (max-<br/>width: 700px) {<br/>svg {<br/>

    View Slide

38. Embedding SVG
    • inline
    • img / image
    • object
    

    View Slide

39. Embedding inline
    • 1 HTTP Request
    • Safari and Chrome have
    a bug with support of
    preserveAspectRatio
    

    View Slide

40. Img
    • 2 HTTP Requests
    • Cleaner markup
    • Most browsers have content
    security issues with loading
    images
    

    View Slide

41. Object
    • 2 HTTP Requests
    • No issues with content security
    • preserveAspectRatio supported
    • Media-queries will react to
    parent container changes!
    

    View Slide

42. Old Browsers?
    type=“image/svg+xml">
    !
    !
    
    !
    
    

    View Slide

43. Old Browsers?
    type="image/svg+xml">
    
    
    

    View Slide

44. Single HTTP request?
    type="image/svg+xml">
    
    
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. Accessibility
    • Add and to your SVG
    • Add ARIA and and other aria
    attributes
    • Add
    • Add attribute to fallback images
    • Add text inside object tag
    tab-index="0"
    role="img"
    alt
    object
    title description
    

    View Slide

49. Drawbacks
    • Browser Support
    • Tricky
    

    View Slide

50. Benefits
    • CSS is incapsulated within SVG
    • Simplest solution for responsive images
    • Already works!
    

    View Slide

51. Rethinking
    Responsive SVG
    

    View Slide

52. Responsive SVG.
    The Hobo’s Method
    

    View Slide

53. Responsive Icons (SVG)
    

    View Slide

54. Responsive Icons (SVG)
    

    View Slide

55. Responsive Icons (SVG)
    

    View Slide

56. Responsive Icons (SVG)
    

    View Slide

57. Responsive Icons (SVG)
    

    View Slide

58. .icon {
    width: 300px;
    height: 300px;
    background: url(../images/
    home_sprite.svg);
    background-position: center top;
    }
    Responsive Icons (SVG)
    

    View Slide

59. @media only screen and (min-width: 65em)
    and (min-height:40em) {
    !
    .icon {background-position: center
    -2400px;}
    !
    }
    Responsive Icons (SVG)
    

    View Slide

60. @media only screen and (min-width: 60em)
    and (min-height:37em) {
    !
    .icon {background-position: center -2100px;}
    !
    }
    @media only screen and (min-width: 55em)
    and (min-height:33em) {
    !
    .icon {background-position: center -1800px;}
    !
    }
    @media only screen and (min-width: 50em)
    Responsive Icons (SVG)
    

    View Slide

61. Drawbacks
    • External CSS
    • 8 different illustrations
    • Can we make something more
    efficient than this technique
    from 90s?
    

    View Slide

62. So…
    • SVG can contain styles inside
    • SVG supports media-queries
    • SVG can react to the parent
    container size
    

    View Slide

63. Responsive SVG.
    The Poor Man’s Method
    

    View Slide

64. Removing margins
    

    View Slide

65. 
    
    
    
    !
    
    !
    
    
    
    
    

    View Slide

66. 
    
    <br/>/* Hide all of the icons first. */<br/>.icon {<br/>display: none;<br/>}<br/>!<br/>/* Display the first one. */<br/>#home_icon_0 {<br/>display: block;<br/>}<br/>!<br/>!<br/>
    
    !
    
    !
    
    

    View Slide

67. Hiding all icons except the first one
    

    View Slide

68. }
    !
    /* Display the desired icon and hide the
    others according to the viewport's size. */
    @media screen and (min-width: 25em) {
    !
    #home_icon_0 {
    display: none;
    }
    !
    #home_icon_1 {
    display: block;
    }
    }
    !
    @media screen and (min-width: 30em) {
    #home_icon_1 {
    display: none;
    }
    

    View Slide

69. #home_icon_1 {
    display: block;
    }
    }
    !
    @media screen and (min-width: 30em) {
    #home_icon_1 {
    display: none;
    }
    !
    #home_icon_2 {
    display: block;
    }
    }
    !
    /* And so on */
    !
    
    
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. Responsive SVG.
    The Man With A Gun’s Method
    

    View Slide

80. What means
    responsive?
    

    View Slide

81. View Slide

82. Thinking about “responsive”,
    we imagine content choreography first.
    

    View Slide

83. Before After
    Redrawing icon manually
    

    View Slide

84. 
    
    x="224.059" y="97.927" width="63.441"
    height="146.573">
    
    
    
    
    fill="#B8492E">
    
    
    !
    
    
    
    
    
    
    
    !
    !
    
    
    
    
    
    
    
    
    !
    
    
    
    
    
    
    icon
    Created with Sketch (http://www.bohemiancoding.com/sketch)
    
    
    
    
    
    
    
    
    
    
    
    
    fill="#E55C3C"/>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    id="Shape" fill="#E55C3C"/>
    
    id="Shape" fill="#CB4741"/>
    
    
    
    
    
    
    width="63.441" height="146.573"/>
    
    fill="#E55C3C"/>
    
    
    
    
    
    
    
    
    
    
    

    View Slide

85. !
    #door-body {
    fill: white;
    }
    !
    #door-handle {
    fill: #E55C3C;
    }
    !
    #door-body, #door-handle {
    -ms-transform: translate(0,0);
    -webkit-transform:
    translate(0,0);
    transform: translate(0,0);
    }
    !
    

    View Slide

86. translate(0,0);
    transform: translate(0,0);
    }
    !
    #window {
    -ms-transform: translate(0,0)
    scale(1);
    -webkit-transform:
    translate(0,0) scale(1);
    transform: translate(0,0)
    scale(1);
    }
    !
    #house-body {
    -ms-transform: scaleX(1)
    translate(0, 0);
    

    View Slide

87. translate(0,0) scale(1);
    transform: translate(0,0)
    scale(1);
    }
    !
    #house-body {
    -ms-transform: scaleX(1)
    translate(0, 0);
    -webkit-transform: scaleX(1)
    translate(0, 0);
    transform: scaleX(1)
    translate(0, 0);
    }
    !
    #tube-body {
    -ms-transform: translate(0,
    

    View Slide

88. View Slide

89. Adapting to parent container size
    
    
    
    
    
    

    View Slide

90. 8 containers
    with different
    size.
    !
    One and the
    same SVG
    file.
    

    View Slide

91. Browser Support
    • Internet Explorer 9+
    • Firefox 17+
    • Chrome 17+
    • Opera 15+
    • Safari 6.0+
    • Safari on iOS 6.0+
    • Android browser on Android 3.0+
    

    View Slide

92. Benefits
    • CSS is incapsulated within SVG
    • Truly responsive approach
    • File size
    

    View Slide

93. Drawbacks
    • Difficult to create and maintain
    • Browser support
    

    View Slide

94. SVG as a module
    

    View Slide

95. What if…
    • Add JavaScript logic into SVG file?
    • AMD/LMD for SVG?
    • SVG-based UI?
    • …
    • Do you still think I’m OK?
    

    View Slide

96. Search. Explore. Investigate.
    Share.
    @pukhalski
    

    View Slide