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

Next Level SVG

Ilya Pukhalski
April 17, 2014

Next Level SVG

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

Ilya Pukhalski

April 17, 2014

More Decks by Ilya Pukhalski

Other Decks in Design


  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