Илья Пухальский (EPAM Systems)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 1,109 views

 

Statistics

Views

Total Views
1,109
Views on SlideShare
353
Embed Views
756

Actions

Likes
0
Downloads
4
Comments
0

5 Embeds 756

http://www.xakep.ru 695
http://xakep.ru 31
http://ritconf.ru 21
http://www.slideee.com 8
http://www.highload.ru 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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