Илья Пухальский (epam systems)
TRANSCRIPT
![Page 1: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/1.jpg)
Scalable Vector Graphics. Next Level
Ilya Pukhalski, April 2014
![Page 2: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/2.jpg)
@pukhalski !
Solution Architect, EPAM Systems Lecturer, British Higher School of Art & Design
![Page 3: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/3.jpg)
You think you know SVG
![Page 4: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/4.jpg)
I was pretty sure as well…
![Page 5: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/5.jpg)
Boring & Crazy
![Page 6: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/6.jpg)
Booooooooooring
![Page 7: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/7.jpg)
![Page 8: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/8.jpg)
![Page 9: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/9.jpg)
![Page 10: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/10.jpg)
![Page 11: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/11.jpg)
![Page 12: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/12.jpg)
![Page 13: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/13.jpg)
![Page 16: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/16.jpg)
Crazy.
![Page 17: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/17.jpg)
<svg width="96" height="96"> <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/> </svg>
![Page 18: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/18.jpg)
(a slide with an example of train animation using
SVG path)
Promote with Pukhalski. Put your ad here.
![Page 19: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/19.jpg)
SVG Sprites
![Page 20: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/20.jpg)
![Page 21: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/21.jpg)
![Page 22: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/22.jpg)
.module { background: url('logo.png'); background: none, url('logo.svg'); }
![Page 23: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/23.jpg)
SVG Stacks
![Page 24: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/24.jpg)
![Page 25: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/25.jpg)
![Page 26: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/26.jpg)
Clown Car Technique
![Page 27: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/27.jpg)
How do you serve responsive images?
![Page 28: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/28.jpg)
!
<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
![Page 29: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/29.jpg)
!
<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
![Page 30: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/30.jpg)
The best solution so far?
![Page 31: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/31.jpg)
Clown Car Technique
• SVG
• Media-queries
• Background images
![Page 32: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/32.jpg)
SVG Support
![Page 33: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/33.jpg)
MQ inside SVG
![Page 34: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/34.jpg)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> !
<title>Clown Car Technique</title> !
</svg>
![Page 35: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/35.jpg)
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) {
![Page 36: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/36.jpg)
} !
@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); } }
![Page 37: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/37.jpg)
<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) {
![Page 38: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/38.jpg)
Embedding SVG
• inline
• img / image
• object
![Page 39: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/39.jpg)
Embedding inline
• 1 HTTP Request
• Safari and Chrome have a bug with support of preserveAspectRatio
![Page 40: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/40.jpg)
Img
• 2 HTTP Requests
• Cleaner markup
• Most browsers have content security issues with loading images
![Page 41: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/41.jpg)
Object
• 2 HTTP Requests
• No issues with content security
• preserveAspectRatio supported
![Page 42: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/42.jpg)
One more thing about <object>
• Media-queries will react to the size of object’s parent container
![Page 43: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/43.jpg)
Old Browsers?
<object data="awesomefile.svg" type=“image/svg+xml"> !!
<img src="medium.png" alt=“Medium"> !
</object>
![Page 44: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/44.jpg)
Old Browsers?
<object data="awesomefile.svg" type="image/svg+xml"> <!--[if lte IE 8]> <img src="medium.png" alt="Fallback for IE"> <![endif]--> </object>
![Page 45: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/45.jpg)
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>
![Page 46: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/46.jpg)
![Page 47: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/47.jpg)
![Page 48: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/48.jpg)
![Page 49: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/49.jpg)
Accessability
• title and desc to SVG
• ARIA role=“img” and other aria attar
• tab-index=0
• alt to fallback images
• Add text inside object
![Page 50: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/50.jpg)
Drawbacks
![Page 51: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/51.jpg)
Benefits
• Incapsulated logic
![Page 52: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/52.jpg)
Rethinking Responsive SVG
![Page 53: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/53.jpg)
Responsive SVG. The Hobo’s Method
![Page 54: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/54.jpg)
Responsive Icons (SVG)
![Page 55: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/55.jpg)
Responsive Icons (SVG)
![Page 56: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/56.jpg)
Responsive Icons (SVG)
![Page 57: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/57.jpg)
Responsive Icons (SVG)
![Page 58: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/58.jpg)
Responsive Icons (SVG)
![Page 59: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/59.jpg)
.icon { width: 300px; height: 300px; background: url(../images/home_sprite.svg); background-position: center top; }
Responsive Icons (SVG)
![Page 60: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/60.jpg)
@media only screen and (min-width: 65em) and (min-height:40em) { !
.icon {background-position: center -2400px;} !
}
Responsive Icons (SVG)
![Page 61: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/61.jpg)
@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)
![Page 62: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/62.jpg)
Drawbacks
• External CSS
• 8 different illustrations
• Can we make something more efficient than this technique from 90s?
![Page 63: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/63.jpg)
So…
• SVG can contain styles inside
• SVG supports media-queries
• SVG can react to the parent container size
![Page 64: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/64.jpg)
Responsive SVG. The Poor Man’s Method
![Page 65: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/65.jpg)
Removing debuff
![Page 66: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/66.jpg)
<svg> <g id="home_icon_0" class="icon"> <!-- paths and shapes --> </g> !
<!-- ... --> !
<g id="home_icon_8" class="icon"> <!-- paths and shapes --> </g> </svg>
![Page 67: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/67.jpg)
<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>
![Page 68: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/68.jpg)
![Page 69: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/69.jpg)
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; } !
![Page 70: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/70.jpg)
} !
@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>
![Page 71: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/71.jpg)
![Page 72: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/72.jpg)
![Page 73: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/73.jpg)
![Page 74: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/74.jpg)
![Page 75: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/75.jpg)
![Page 76: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/76.jpg)
![Page 77: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/77.jpg)
![Page 78: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/78.jpg)
![Page 79: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/79.jpg)
![Page 80: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/80.jpg)
Responsive SVG. The Man With A Gun’s Method
![Page 81: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/81.jpg)
What means responsive?
![Page 82: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/82.jpg)
![Page 83: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/83.jpg)
Thinking about “responsive”, we imagine content choreography first.
![Page 84: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/84.jpg)
![Page 85: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/85.jpg)
• Code of redrawn house and initial one
![Page 86: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/86.jpg)
<svg> <defs> <style> @media screen and (max-width: 65em) { !
#door-shadow, #tube-shadow, .backyard { display: none; } !
#door-body { fill: white; } !
#door-handle { fill: #E55C3C;
![Page 87: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/87.jpg)
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);
![Page 88: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/88.jpg)
-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); } !
![Page 89: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/89.jpg)
![Page 90: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/90.jpg)
Adapting to parent container size
<div style="width: 100%;"> <object> <embed src=“responsive3.svg" /> </object> </div>
![Page 91: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/91.jpg)
8 containers with different size. !
One and the same SVG file.
![Page 92: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/92.jpg)
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+
![Page 93: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/93.jpg)
Benefits
![Page 94: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/94.jpg)
Drawbacks
• Difficult to create
![Page 95: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/95.jpg)
Adding JavaScript to all this mess
• More good news
![Page 96: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/96.jpg)
SVG as a module
![Page 97: Илья Пухальский (EPAM Systems)](https://reader030.vdocuments.net/reader030/viewer/2022013114/5555aa82d8b42a52568b48b6/html5/thumbnails/97.jpg)
What if…
• Add JavaScript logic into SVG file?
• AMD/LMD for SVG?
• SVG-based UI?
• …
• Do you still think I’m OK?