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

1,507 views
1,308 views

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,507
On SlideShare
0
From Embeds
0
Number of Embeds
873
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Илья Пухальский (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

×