Next Level SVG

Transcript

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

2. @pukhalski ! Solution Architect, EPAM Systems Lecturer, British Higher School

   of Art & Design

3. You think you know SVG

4. I was pretty sure as well…

5. Boring & Crazy

6. Booooooooooring

7. None
8. None
9. None
10. None
11. None
12. None
13. None

14. xframeworkjs.org

15. xframeworkjs.org

16. Crazy.

17. <svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/> </svg>

18. (a slide with an example of train animation using SVG

    path) Promote with Pukhalski. Put your ad here.

19. SVG Sprites

20. None
21. None

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

23. SVG Stacks

24. None
25. None

26. Clown Car Technique

27. How do you serve responsive images?

28. ! <img 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

29. ! <picture alt="responsive image"> <source src="large.jpg" media="(min-width: 1600px), (min-resolution: 136dpi)

    and (min-width: 800px)"> <source src="medium.jpg" media="(min-width: 800px), (min-resolution: 136dpi) and (min-width: 400px)"> <source src="small.jpg"> <!-- fallback --> <img src="small.jpg" alt="responsive image"> </picture> Picture Element

30. The best solution so far?

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

32. SVG Support

33. MQ inside SVG

34. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> ! <title>Clown

    Car Technique</title> ! </svg>

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); } } !

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);

37. preserveAspectRatio="xMidYMid meet"> ! <title>Clown Car Technique</title> ! <style> 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 {

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

39. Embedding inline • 1 HTTP Request • Safari and Chrome

    have a bug with support of preserveAspectRatio

40. Img • 2 HTTP Requests • Cleaner markup • Most

    browsers have content security issues with loading images

41. Object • 2 HTTP Requests • No issues with content

    security • preserveAspectRatio supported • Media-queries will react to parent container changes!

42. Old Browsers? <object data="awesomefile.svg" type=“image/svg+xml"> ! ! <img src="medium.png" alt=“Medium">

    ! </object>

43. Old Browsers? <object data="awesomefile.svg" type="image/svg+xml"> <!--[if lte IE 8]> <img

    src="medium.png" alt="Fallback for IE"> <![endif]--> </object>

44. Single HTTP request? <object data="data:image/svg+xml,%3Csvg %20viewBox='0%200%20300%20329'%20preserveAspectRatio= 'xMidYMid%20meet'%20xmlns='http://www.w3.org/2000/ svg'%3E%3Ctitle%3EClown%20Car%20Technique%3C/title%3E %3Cstyle%3Esvg%7Bbackground-size: 100%25%20100%25;background-repeat:no-repeat;%7D@media

    %20screen%20and%20(max-width:400px)%7Bsvg %7Bbackground-image:url(images/small.png);%7D %7D@media%20screen%20and%20(min-width:401px)%7Bsvg %7Bbackground-image:url(images/medium.png);%7D %7D@media%20screen%20and%20(min-width:701px)%7Bsvg %7Bbackground-image:url(images/big.png);%7D%7D@media %20screen%20and%20(min-width:1001px)%7Bsvg %7Bbackground-image:url(images/huge.png);%7D%7D%3C/ style%3E%3C/svg%3E" type="image/svg+xml"> <!--[if lte IE 8]> <img src="images/medium.png" alt="Fallback for IE"> <![endif]--> </object>
45. None
46. None
47. None

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

49. Drawbacks • Browser Support • Tricky

50. Benefits • CSS is incapsulated within SVG • Simplest solution

    for responsive images • Already works!

51. Rethinking Responsive SVG

52. Responsive SVG. The Hobo’s Method

53. Responsive Icons (SVG)

54. Responsive Icons (SVG)

55. Responsive Icons (SVG)

56. Responsive Icons (SVG)

57. Responsive Icons (SVG)

58. .icon { width: 300px; height: 300px; background: url(../images/ home_sprite.svg); background-position:

    center top; } Responsive Icons (SVG)

59. @media only screen and (min-width: 65em) and (min-height:40em) { !

    .icon {background-position: center -2400px;} ! } Responsive Icons (SVG)

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)

61. Drawbacks • External CSS • 8 different illustrations • Can

    we make something more efficient than this technique from 90s?

62. So… • SVG can contain styles inside • SVG supports

    media-queries • SVG can react to the parent container size

63. Responsive SVG. The Poor Man’s Method

64. Removing margins

65. <svg> <g id="home_icon_0" class="icon"> <!-- paths and shapes --> </g>

    ! <!-- ... --> ! <g id="home_icon_8" class="icon"> <!-- paths and shapes --> </g> </svg>

66. <svg> <defs> <style> /* Hide all of the icons first.

    */ .icon { display: none; } ! /* Display the first one. */ #home_icon_0 { display: block; } ! ! </style> </defs> ! <!-- Icon groups go here --> ! </svg>

67. Hiding all icons except the first one

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; }

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 */ ! </style> </defs>
70. None
71. None
72. None
73. None
74. None
75. None
76. None
77. None
78. None

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

80. What means responsive?

81. None

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

83. Before After Redrawing icon manually

84. <g id="icon" class="icon"> <g class="backyard"> <rect id="backyard" d="M224.059,97.927 L224.059,244.5 L287.5,244.5

    L287.5,97.927 L224.059,97.927 Z M224.059,97.927" fill="#E55C3C" x="224.059" y="97.927" width="63.441" height="146.573"></rect> <path id="backyard-roof" d="M165.5,42.5 L255.369,42.5 L299.798,105.5 L165.5,105.5 L165.5,42.5" fill="#B8492E"></path> </g> <rect id="tube-body" x="42" y="29" width="34" height="70" fill="#E55C3C" /> <rect id="tube-upper" x="37" y="29" width="44" height="12" fill="#E55C3C" /> <path id="tube-shadow" d="M76,42.5 L75.279,54.206 L42,87.997 L42,76.333 L76,42.5 Z M75,42" fill="#B8492E"></path> <path id="house-roof" fill="#E98158" d="M127,1L0,128L252,128" /> <rect id="house-body" x="17" y="127" width="219" height="137" fill="#E98158" /> ! <g id="window-upper"> <rect x="108" y="98" width="15" height="19" fill="white" /> <rect x="129" y="98" width="15" height="19" fill="white" /> <ellipse cx="126" cy="92" rx="18" ry="23" fill="white" /> <rect x="108" y="93" width="36" height="6" fill="#E98158" /> <rect x="123" y="68" width="6" height="52" fill="#E98158" /> </g> ! ! <g id="window"> <rect id="window-item-main" x="36" y="170" width="17" height="17" fill="white" /> <rect class="window-item" x="58" y="170" width="17" height="17" fill="white" /> <rect class="window-item" x="36" y="192" width="17" height="17" fill="white" /> <rect class="window-item" x="58" y="192" width="17" height="17" fill="white" /> <rect class="window-th" x="30" y="213" width="50" height="5" fill="white" /> </g> <use id="window2" xlink:href="#window" x="142" y="0" /> ! <rect id="door-body" x="101" y="188" width="49" height="76" fill="#E55C3C" /> <rect id="door-th" x="95" y="258" width="62" height="6" fill="white" /> <circle id="door-handle" cx="116" cy="225" r="3" fill="white" /> <path id="door-shadow" d="M142.5,258.5 L142.5,194.5 L101.5,194.5 L101.5,188.5 L149.5,188.5 L149.5,258 L142.5,258 Z M142.5,258.5" fill="#B8492E"></path> </g> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="300px" height="2700px" viewBox="0 0 300 2700" version="1.1"> <title>icon</title> <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description> <defs/> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Group" sketch:type="MSLayerGroup"> <g id="Shape-+-Rectangle-4" sketch:type="MSShapeGroup"> <path d="M161.5,164.5 L161.5,146.5 L149.5,134.5 L137.5,146.5 L137.5,164.5 L161.5,164.5 Z M161.5,164.5" id="Shape" fill="#E55C3C"/> <rect d="M0,0 L0,300 L300,300 L300,0 L0,0 Z M0,0" id="Rectangle-4" x="0" y="0" width="300" height="300"/> </g> <g id="Shape-+-Rectangle-4-copy" transform="translate(0.000000, 300.000000)" sketch:type="MSShapeGroup"> <path d="M150,129 L130,149 L130,169.5 L144,169.5 L144,153.5 L156,153.5 L156,169.5 L170,169.5 L170,149 L150,129 Z M150,129" id="Shape" fill="#E55C3C"/> <rect d="M0,0 L0,300 L300,300 L300,0 L0,0 Z M0,0" id="Rectangle-4-copy" x="0" y="0" width="300" height="300"/> </g> <g id="home_icon_2" transform="translate(0.000000, 600.000000)" sketch:type="MSShapeGroup"> <path d="M120,150 L127,150 L127,179.965 L142,179.965 L142,157 L158,157 L158,179.965 L173,179.965 L173,150 L180,150 L150,120 L120,150 Z M120,150" id="Shape" fill="#E55C3C"/> <rect d="M0,0 L0,300 L300,300 L300,0 L0,0 Z M0,0" id="Rectangle-4-copy-2" x="0" y="0" width="300" height="300"/> </g> <g id="home_icon_3" transform="translate(0.000000, 900.000000)" sketch:type="MSShapeGroup"> <path d="M209,148.777 L150,90 L126,112.735 L126,104 L107,104 L107,133 L91,148.777 L107,148.777 L107,209 L135,209 L135,169 L164,169 L164,209 L191,209 L191,148.777 L209,148.777 Z M209,148.777" id="Shape" fill="#E55C3C"/> <rect d="M0,0 L0,300 L300,300 L300,0 L0,0 Z M0,0" id="Rectangle-4-copy-3" x="0" y="0" width="300" height="300"/> </g> <g id="home_icon_4" transform="translate(0.000000, 1200.000000)" sketch:type="MSShapeGroup"> <path d="M96,228.172 L117,228.172 L117,184.172 L143,184.172 L143,228.172 L204,228.172 L204,150.172 L96,150.172 L96,228.172 L96,228.172 L96,228.172 L96,228.172 Z M164,164.016 L183,164.016 L183,185.172 L164,185.172 L164,164.016 Z M223,144.172 L149.486,70 L121,98.172 L121,87.172 L101,87.172 L101,118.172 L77,144.172 L223,144.172 Z M223,144.172" id="Shape" fill="#E55C3C"/> <rect d="M0,0 L0,300 L300,300 L300,0 L0,0 Z M0,0" id="Rectangle-4-copy-4" x="0" y="0" width="300" height="300"/> </g> <g id="home_icon_5" transform="translate(0.000000, 1500.000000)" sketch:type="MSShapeGroup"> <path d="M84,240.593 L107,240.593 L107,188.593 L137,188.593 L137,240.593 L216,240.593 L216,151.593 L84,151.593 L84,240.593 L84,240.593 L84,240.593 L84,240.593 Z M161,204.593 L161,188.593 L176,188.593 L176,204.593 L161,204.593 L161,204.593 L161,204.593 L161,204.593 Z M181,204.593 L181,188.593 L196,188.593 L196,204.593 L181,204.593 L181,204.593 L181,204.593 L181,204.593 Z M196,167.593 L196,183.593 L181,183.593 L181,167.593 L196,167.593 L196,167.593 L196,167.593 L196,167.593 Z M176,167.593 L176,183.593 L161,183.593 L161,167.593 L176,167.593 Z M64,145.593 L236,145.593 L150.001,60 L112,98.593 L112,83.593 L117,83.593 L117,75.593 L84,75.593 L84,83.593 L90,83.593 L90,119.593 L64,145.593 Z M64,145.593" id="Shape" fill="#E55C3C"/> <rect d="M0,0 L0,300 L300,300 L300,0 L0,0 Z M0,0" id="Rectangle-4-copy-5" x="0" y="0" width="300" height="300"/> </g> <g id="home_icon_6" transform="translate(0.000000, 1800.000000)" sketch:type="MSShapeGroup"> <g id="Group" transform="translate(40.000000, 39.000000)" fill="#E55C3C"> <path d="M29.5,220.5 L50.5,220.5 L50.5,215.5 L55.5,215.5 L55.5,160.5 L94.5,160.5 L94.5,215.5 L99.5,215.5 L99.5,220.5 L193.5,220.5 L193.5,114.5 L29.5,114.5 L29.5,220.5 L29.5,220.5 L29.5,220.5 L29.5,220.5 Z M149.5,134.5 L168.5,134.5 L168.5,154.5 L149.5,154.5 L149.5,134.5 L149.5,134.5 L149.5,134.5 L149.5,134.5 Z M149.5,160.5 L168.5,160.5 L168.5,180.5 L149.5,180.5 L149.5,160.5 L149.5,160.5 L149.5,160.5 L149.5,160.5 Z M124.5,160.5 L143.5,160.5 L143.5,180.5 L124.5,180.5 L124.5,160.5 L124.5,160.5 L124.5,160.5 L124.5,160.5 Z M124.5,134.5 L143.5,134.5 L143.5,154.5 L124.5,154.5 L124.5,134.5 L124.5,134.5 L124.5,134.5 L124.5,134.5 Z M119.5,185.5 L173.5,185.5 L173.5,190.5 L119.5,190.5 L119.5,185.5 L119.5,185.5 L119.5,185.5 L119.5,185.5 Z M119.5,185.5" id="Shape"/> <path d="M0.5,109.5 L220.5,109.5 L110.782,0.5 L63.5,47.5 L63.5,35.5 L34.5,35.5 L34.5,76.5 L0.5,109.5 Z M0.5,109.5" id="Shape"/> <rect d="M28.661,20.5 L28.661,30.5 L67.5,30.5 L67.5,20.5 L28.661,20.5 Z M28.661,20.5" id="Rectangle" x="28.661" y="20.5" width="38.839" height="10"/> <path d="M62.5,193 C61.324,193 60,191.676 60,190.5 C60,189.323 61.324,188 62.5,188 C63.677,188 65,189.323 65,190.5 C65,191.676 63.677,193 62.5,193 L62.5,193 L62.5,193 L62.5,193 Z M62.5,193" id="Shape"/> </g> <rect d="M0,0 L0,300 L300,300 L300,0 L0,0 Z M0,0" id="Rectangle-4-copy-6" x="0" y="0" width="300" height="300"/> </g> <g id="home_icon_7" transform="translate(0.000000, 2100.000000)" sketch:type="MSShapeGroup"> <g id="Group" transform="translate(30.000000, 30.000000)"> <path d="M223.382,120.5 L240,120.5 L119.558,0.5 L66.5,53.5 L66.5,38.5 L35.5,38.5 L35.5,85 L0,120.5 L17.618,120.5 L120.5,17.618 L223.382,120.5 Z M223.382,120.5" id="Shape" fill="#E55C3C"/> <rect d="M29.5,23.5 L29.5,34.5 L71.5,34.5 L71.5,23.5 L29.5,23.5 Z M29.5,23.5" id="Rectangle" fill="#E55C3C" x="29.5" y="23.5" width="42" height="11"/> <path d="M108.228,203.5 C106.945,203.5 105.5,204.943 105.5,206.229 C105.5,207.515 106.945,208.957 108.228,208.957 C109.512,208.957 110.955,207.515 110.955,206.229 C110.955,204.943 109.512,203.5 108.228,203.5 L108.228,203.5 L108.228,203.5 L108.228,203.5 Z M108.228,203.5" id="Shape" fill="#CB4741"/> <path d="M24.5,120.5 L24.5,240.5 L92.5,240.5 L92.5,234.5 L98.5,234.5 L98.5,174.5 L139.5,174.5 L139.5,234.5 L145.5,234.5 L145.5,240.5 L215.5,240.5 L215.5,119.535 L215.965,119.5 L120.5,24.5 L24.5,120.5 L24.5,120.5 L24.5,120.5 L24.5,120.5 Z M60.5,156.5 L74.5,156.5 L74.5,171.5 L60.5,171.5 L60.5,156.5 L60.5,156.5 L60.5,156.5 L60.5,156.5 Z M60.5,176.5 L74.5,176.5 L74.5,191.5 L60.5,191.5 L60.5,176.5 L60.5,176.5 L60.5,176.5 L60.5,176.5 Z M41.5,156.5 L55.5,156.5 L55.5,171.5 L41.5,171.5 L41.5,156.5 L41.5,156.5 L41.5,156.5 L41.5,156.5 Z M41.5,176.5 L55.5,176.5 L55.5,191.5 L41.5,191.5 L41.5,176.5 L41.5,176.5 L41.5,176.5 L41.5,176.5 Z M78.5,199.5 L37.5,199.5 L37.5,195.5 L78.5,195.5 L78.5,199.5 L78.5,199.5 L78.5,199.5 L78.5,199.5 Z M184.5,156.5 L198.5,156.5 L198.5,171.5 L184.5,171.5 L184.5,156.5 L184.5,156.5 L184.5,156.5 L184.5,156.5 Z M184.5,176.5 L198.5,176.5 L198.5,191.5 L184.5,191.5 L184.5,176.5 L184.5,176.5 L184.5,176.5 L184.5,176.5 Z M165.5,156.5 L179.5,156.5 L179.5,171.5 L165.5,171.5 L165.5,156.5 L165.5,156.5 L165.5,156.5 L165.5,156.5 Z M165.5,176.5 L179.5,176.5 L179.5,191.5 L165.5,191.5 L165.5,176.5 L165.5,176.5 L165.5,176.5 L165.5,176.5 Z M202.5,199.5 L161.5,199.5 L161.5,195.5 L202.5,195.5 L202.5,199.5 L202.5,199.5 L202.5,199.5 L202.5,199.5 Z M202.5,199.5" id="Shape" fill="#E98158"/> </g> <rect d="M0,0 L0,300 L300,300 L300,0 L0,0 Z M0,0" id="Rectangle-4-copy-7" x="0" y="0" width="300" height="300"/> </g> <g id="home_icon_8" transform="translate(0.000000, 2400.000000)" sketch:type="MSShapeGroup"> <g id="Group" transform="translate(0.000000, 18.000000)"> <rect d="M224.059,97.927 L224.059,244.5 L287.5,244.5 L287.5,97.927 L224.059,97.927 Z M224.059,97.927" id="Rectangle" fill="#E55C3C" x="224.059" y="97.927" width="63.441" height="146.573"/> <path d="M165.5,42.5 L255.369,42.5 L299.798,105.5 L165.5,105.5 L165.5,42.5" id="Shape" fill="#B8492E"/> <path d="M75.469,53.021 L41.678,86.812 L41.678,40.5 L36.5,40.5 L36.5,29.5 L80.5,29.5 L80.5,39.447 L75.469,39.447 L75.469,53.021 Z M75.469,53.021" id="Shape" fill="#E55C3C"/> <path d="M75.279,42.5 L75.279,54.206 L41.488,87.997 L41.488,76.333 L75.279,42.5 Z M75.279,42.5" id="Shape" fill="#B8492E"/> <path d="M96.475,187.613 L96.475,258.5 L153.492,258.5 L153.492,187.613 L96.475,187.613 L96.475,187.613 L96.475,187.613 L96.475,187.613 Z M116.427,229.568 C114.965,229.568 113.319,227.922 113.319,226.461 C113.319,224.998 114.965,223.354 116.427,223.354 C117.89,223.354 119.534,225 119.534,226.461 C119.535,227.922 117.89,229.568 116.427,229.568 L116.427,229.568 L116.427,229.568 L116.427,229.568 Z M116.427,229.568" id="Shape" fill="#E55C3C"/> <path d="M0.5,127.5 L17.5,127.5 L17.5,264.5 L95.5,264.5 L95.5,258.5 L101.5,258.5 L101.5,188.5 L149.5,188.5 L149.5,258.5 L155.5,258.5 L155.5,264.5 L235.5,264.5 L235.5,126.652 L236.298,127.5 L253.801,127.5 L126.158,0.586 L0.5,127.5 L0.5,127.5 L0.5,127.5 L0.5,127.5 Z M58.5,187.5 L58.5,170.5 L74.5,170.5 L74.5,187.5 L58.5,187.5 L58.5,187.5 L58.5,187.5 L58.5,187.5 Z M74.5,192.5 L74.5,208.5 L58.5,208.5 L58.5,192.5 L74.5,192.5 L74.5,192.5 L74.5,192.5 L74.5,192.5 Z M36.5,187.5 L36.5,170.5 L52.5,170.5 L52.5,187.5 L36.5,187.5 L36.5,187.5 L36.5,187.5 L36.5,187.5 Z M52.5,192.5 L52.5,208.5 L36.5,208.5 L36.5,192.5 L52.5,192.5 L52.5,192.5 L52.5,192.5 L52.5,192.5 Z M78.5,217.5 L32.5,217.5 L32.5,212.5 L78.5,212.5 L78.5,217.5 L78.5,217.5 L78.5,217.5 L78.5,217.5 Z M123.5,117.5 L108.5,117.5 L108.5,97.5 L123.5,97.5 L123.5,117.5 L123.5,117.5 L123.5,117.5 L123.5,117.5 Z M123.5,92.5 L108.5,92.5 L108.5,85.883 C108.5,77.676 116.5,70.862 123.5,69.42 L123.5,92.5 L123.5,92.5 L123.5,92.5 L123.5,92.5 Z M143.5,117.5 L128.5,117.5 L128.5,97.5 L143.5,97.5 L143.5,117.5 L143.5,117.5 L143.5,117.5 L143.5,117.5 Z M143.5,92.5 L128.5,92.5 L128.5,69.258 C137.5,70.254 143.5,77.311 143.5,85.883 L143.5,92.5 L143.5,92.5 L143.5,92.5 L143.5,92.5 Z M220.5,217.5 L174.5,217.5 L174.5,212.5 L220.5,212.5 L220.5,217.5 L220.5,217.5 L220.5,217.5 L220.5,217.5 Z M194.5,192.5 L194.5,208.5 L178.5,208.5 L178.5,192.5 L194.5,192.5 L194.5,192.5 L194.5,192.5 L194.5,192.5 Z M178.5,187.5 L178.5,170.5 L194.5,170.5 L194.5,187.5 L178.5,187.5 L178.5,187.5 L178.5,187.5 L178.5,187.5 Z M216.5,192.5 L216.5,208.5 L200.5,208.5 L200.5,192.5 L216.5,192.5 L216.5,192.5 L216.5,192.5 L216.5,192.5 Z M200.5,187.5 L200.5,170.5 L216.5,170.5 L216.5,187.5 L200.5,187.5 L200.5,187.5 L200.5,187.5 L200.5,187.5 Z M200.5,187.5" id="Shape" fill="#E98158"/> <path d="M142.5,258.5 L142.5,194.5 L101.5,194.5 L101.5,188.5 L149.5,188.5 L149.5,258.5 L142.5,258.5 Z M142.5,258.5" id="Shape" fill="#B8492E"/> </g> <rect d="M0,0 L0,300 L300,300 L300,0 L0,0 Z M0,0" id="Rectangle-4-copy-8" x="0" y="0" width="300" height="300"/> </g> </g> </g> </svg>

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); } !

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);

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,
88. None

89. Adapting to parent container size <div style="width: 100%;"> <object> <embed

    src=“responsive3.svg" /> </object> </div>

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

    SVG file.

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+

92. Benefits • CSS is incapsulated within SVG • Truly responsive

    approach • File size

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

94. SVG as a module

95. What if… • Add JavaScript logic into SVG file? •

    AMD/LMD for SVG? • SVG-based UI? • … • Do you still think I’m OK?

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