Next Level SVG

Scalable Vector Graphics. Next Level Ilya Pukhalski, April 2014

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

You think you know SVG

I was pretty sure as well…

Boring & Crazy

Booooooooooring

xframeworkjs.org

Crazy.

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

SVG Sprites

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

SVG Stacks

Clown Car Technique

How do you serve responsive images?

! <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

! <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">  <img src="small.jpg" alt="responsive image"> </picture> Picture Element

The best solution so far?

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

SVG Support

MQ inside SVG

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

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

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 {

Embedding SVG • inline • img / image • object

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

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

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

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

Old Browsers? <object data="awesomefile.svg" type="image/svg+xml">  </object>

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">  </object>

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

Drawbacks • Browser Support • Tricky

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

Rethinking Responsive SVG

Responsive SVG. The Hobo’s Method

Responsive Icons (SVG)

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

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

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

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

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

Responsive SVG. The Poor Man’s Method

Removing margins

Hiding all icons except the ﬁrst one

} ! /* 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; }

#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>

Responsive SVG. The Man With A Gun’s Method

What means responsive?

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

Before After Redrawing icon manually

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

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

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

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,

Adapting to parent container size <div style="width: 100%;"> <object> <embed
src=“responsive3.svg" /> </object> </div>

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

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+

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

Drawbacks • Difficult to create and maintain • Browser support

SVG as a module

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

Search. Explore. Investigate. Share. @pukhalski

Next Level SVG

Next Level SVG

More Decks by Ilya Pukhalski

Other Decks in Design

Featured

Transcript