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. (a slide with an example of train animation using SVG

    path) Promote with Pukhalski. Put your ad here.
  2. ! <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
  3. ! <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
  4. 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); } } !
  5. } ! @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);
  6. 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 {
  7. Embedding inline • 1 HTTP Request • Safari and Chrome

    have a bug with support of preserveAspectRatio
  8. Img • 2 HTTP Requests • Cleaner markup • Most

    browsers have content security issues with loading images
  9. Object • 2 HTTP Requests • No issues with content

    security • preserveAspectRatio supported • Media-queries will react to parent container changes!
  10. Old Browsers? <object data="awesomefile.svg" type="image/svg+xml"> <!--[if lte IE 8]> <img

    src="medium.png" alt="Fallback for IE"> <![endif]--> </object>
  11. 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>
  12. 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
  13. @media only screen and (min-width: 65em) and (min-height:40em) { !

    .icon {background-position: center -2400px;} ! } Responsive Icons (SVG)
  14. @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)
  15. Drawbacks • External CSS • 8 different illustrations • Can

    we make something more efficient than this technique from 90s?
  16. So… • SVG can contain styles inside • SVG supports

    media-queries • SVG can react to the parent container size
  17. <svg> <g id="home_icon_0" class="icon"> <!-- paths and shapes --> </g>

    ! <!-- ... --> ! <g id="home_icon_8" class="icon"> <!-- paths and shapes --> </g> </svg>
  18. <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>
  19. } ! /* 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; }
  20. #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>
  21. <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>
  22. ! #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); } !
  23. 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);
  24. 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,
  25. 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+
  26. What if… • Add JavaScript logic into SVG file? •

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