Илья Пухальский (EPAM Systems)

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

xframeworkjs.org

Crazy.

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

(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">      <!-­‐-­‐  fallback  -­‐-­‐>      <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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> !

<title>Clown Car Technique</title> !

</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: 701px) and (max-width: 1000px) {

} !

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" 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) {

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

One more thing about <object>

• Media-queries will react to the size of object’s parent container

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"> <!--[if lte IE 8]> <img src="medium.png" alt="Fallback for IE"> <![endif]--> </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"> <!--[if lte IE 8]> <img src="images/medium.png" alt="Fallback for IE"> <![endif]--> </object>

Accessability

• title and desc to SVG

• ARIA role=“img” and other aria attar

• tab-index=0

• alt to fallback images

• Add text inside object

Drawbacks

Benefits

• Incapsulated logic

Rethinking Responsive SVG

Responsive SVG. The Hobo’s Method

Responsive Icons (SVG)

Responsive Icons (SVG)

Responsive Icons (SVG)

Responsive Icons (SVG)

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 debuff

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

<!-- ... --> !

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

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

display: block; } !

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

} !

@media screen and (min-width: 30em) { #home_icon_1 { display: none; } !

#home_icon_2 { display: block; } } !

/* And so on */ !

</style> </defs> !

<!-- Icon groups go here --> !

</svg>

Responsive SVG. The Man With A Gun’s Method

What means responsive?

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

• Code of redrawn house and initial one

<svg> <defs> <style> @media screen and (max-width: 65em) { !

#door-shadow, #tube-shadow, .backyard { display: none; } !

#door-body { fill: white; } !

#door-handle { fill: #E55C3C;

fill: #E55C3C; } !

#door-body, #door-handle { -ms-transform: translate(0,0); -webkit-transform: 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);

-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); -webkit-transform: scaleX(1) translate(0, 0); transform: scaleX(1) translate(0, 0); } !

#tube-body { -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 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

Drawbacks

• Difficult to create

Adding JavaScript to all this mess

• More good news

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