Илья Пухальский (EPAM Systems)
98
Scalable V ector Graphics. Next Level Ilya Pukhalski, April 2014
Transcript of Илья Пухальский (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
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?
