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
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
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
22. .module { background: url('logo.png'); background: none, url('logo.svg'); }
23. SVG Stacks
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>
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>
79. Responsive SVG. The Man With A Gun’s Method
80. What means responsive?
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,
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