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,  
                 ...
!
<picture  alt="responsive  image">  
          <source  src="large.jpg"  media="(min-­‐width:1600px),  
          (min-­...
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 Tech...
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
!
@media screen and (max-width: 400px) {
svg {
backgroun...
!
@media screen and (min-width: 401px) and (max-width: 700px) {
svg {
background-image: url(images/medium.png);
}
}
!
@med...
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
!
<title>Clown Car Tech...
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 ...
Single HTTP request?
<object data="data:image/svg+xml,%3Csvg
%20viewBox='0%200%20300%20329'%20preserveAspectRatio='xMidYMi...
Accessability
• title and desc to SVG
• ARIA role=“img” and other aria attar
• tab-index=0
• alt to fallback images
• Add ...
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;
}
Respon...
@media only screen and (min-width: 65em)
and (min-height:40em) {
!
.icon {background-position: center -2400px;}
!
}
Respon...
@media only screen and (min-width: 60em)
and (min-height:37em) {
!
.icon {background-position: center -2100px;}
!
}
@media...
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">
...
<svg>
<defs>
<style>
/* Hide all of the icons first. */
.icon {
display: none;
}
!
/* Display the first one. */
#home_icon...
}
!
/* Display the desired icon and hide the others according
to the viewport's size. */
@media screen and (min-width: 25e...
}
!
@media screen and (min-width: 30em) {
#home_icon_1 {
display: none;
}
!
#home_icon_2 {
display: block;
}
}
!
/* And so...
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;
}
!
#d...
fill: #E55C3C;
}
!
#door-body, #door-handle {
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0);
transform:...
-webkit-transform: translate(0,0) scale(1)
transform: translate(0,0) scale(1);
}
!
#house-body {
-ms-transform: scaleX(1) ...
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...
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
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
Upcoming SlideShare
Loading in...5
×

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

1,178

Published on

Published in: Internet, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,178
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×