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

  • 1,046 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,046
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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