Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Next generation Graphics: SVG

7,083 views

Published on

Slides from Drupalcon Barcelona 2015 by David Corbacho

Published in: Internet
  • Be the first to comment

Next generation Graphics: SVG

  1. 1. Next generation graphics SVG by David Corbacho
  2. 2. Scalable Vector Graphics Representing graphics with mathematical expressions in XML like is 1998
  3. 3. David Corbacho Román Senior Drupal developer - Frontend Drupal core contributor, module maintainer (d.o. user: corbacho) We are hiring London Twitter @dcorbacho
  4. 4. Disclaimer: I’m not a designer
  5. 5. 1. Brief introduction to SVG 2. The past 3. The present. Using SVG 4. SVG and Drupal 5. SVG 2: The future Structure
  6. 6. SVG basic concepts <line>
  7. 7. SVG basic concepts <rect>
  8. 8. SVG basic concepts <circle>
  9. 9. SVG basic concepts <ellipsis>
  10. 10. SVG basic concepts <polyline>
  11. 11. SVG basic concepts <polygon>
  12. 12. SVG basic concepts Uppercase: absolute Lowercase: relative L Lineto M Moveto C Curveto z close path
  13. 13. <path fill="#004975" d="M510,144.75c-39-24.75-77.25-34.5-11 4.75-59.25-23.25-15-55.5-53.25-82.5-85.5- 5.25,51.75-20.25,73.5-39,87.75-38.25,30-6 2.25,39-95.25,57-27.75,15-178.5,104.25-1 78.5,297.75,0,61.78,16.593,118.36,45.063 ,166.77,60.697,103.2,175.4,169.23,298.44 ,169.23,180.75,0,337.5-131.25,337.5-330, 0-109.15-44.33-185.49-88.28-234.63-36.0 8-40.34-71.9-62.36-82.72-69.12z"/>
  14. 14. Handcoded Twitter bird https://twitter.com/danklammer/status/628866264153194496
  15. 15. Inkscape.(Open source) Adobe Illustrator. (Best UI) Sketch (the new guy) For the rest of us mere mortals… use SVG Editors
  16. 16. Optimize it jakearchibald.github.io/svgomg/ Automate it SVGO Bloated SVG code?
  17. 17. Why SVG ?
  18. 18. Why SVG? Always Crisp https://en.wikipedia.org/wiki/Vector_graphics
  19. 19. Why SVG? Scriptable http://codepen.io/githiro/pen/xABCi SVG DOM
  20. 20. Why SVG? Animatable with: CSS JavaScript SMIL *
  21. 21. Why SVG? Styleable with CSS <path fill="#004975" d="M510,144.75c-39-24.75-77.25-34.5-11 4.75-59.25-23.25-15-55.5-53.25-82.5-85.5- 5.25,51.75-20.25,73.5-39,87.75-38.25,30-6 2.25,39-95.25,57-27.75,15-178.5,104.25-1 78.5,297.75,0,61.78,16.593,118.36,45.063 ,166.77,60.697,103.2,175.4,169.23,298.44 .druplicon { fill:#004975; <path class=“druplicon” … }
  22. 22. Why SVG? Accessibility http://www.paciellogroup.com/blog/2013/12/using-aria- enhance-svg-accessibility/
  23. 23. Why SVG? Small size For example, new google logo, 305 bytes SVG DOM http://gizmodo.com/how-could-googles-new- logo-be-only-305-bytes-while-its-1728793790
  24. 24. 1. Brief introduction to SVG 2. The past 3. The present. Using SVG 4. SVG and Drupal 5. SVG 2: The future Structure
  25. 25. SVG 1.0 begins in 1998 http://www.w3.org/Talks/2014/schepers-accessible_graphics/rise-and-fall.svg http://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG SVG 1.0 = XML + SVG + DOM + CSS + Animations + Filters + XLINKS + …
  26. 26. 2001. SVG 1.0 released Adobe releases SVG Viewer 3
  27. 27. 2003. SVG 1.1 and SVG Mobile:
 Tiny and Basic
  28. 28. 2005. Adobe adopts Flash
  29. 29. 2008 Apple blocks Flash in iPhone & iPad
  30. 30. 2010 IE 9 release. Implements 60% of SVG spec
  31. 31. 2011 SVG 1.1 2nd Edition Apple Retina
  32. 32. 2012 Android 3.x implements part of SVG
  33. 33. We need graphics for HD screens, that works in all modern browsers
  34. 34. It’s the SVG Renaissance! SVG is perfect !!
  35. 35. 1. Brief introduction to SVG 2. The past 3. The present. Using SVG 4. SVG and Drupal 5. SVG 2: The future Structure
  36. 36. SVG Basic Support
 95.92% of browsers (caniuse.com) Firefox 26+ Chrome 31+ IE10+ Safari 7+ Opera 19+ iOS Safari 3.2+ IE 9 (limited feature set) Android 3.x (no SVG filters)
  37. 37. SVG 1 is a new-old thing “Viejoven” and it has “quirks”
  38. 38. SVG. Markup and Image The paradox of Schrödinger’s cat
  39. 39. SVG in HTML “DEAD” for security “ALIVE” SVG DOM
  40. 40. SVG (nowadays) is a parallel universe, where some rules don’t apply
  41. 41. No z-index Fixed in SVG 2
  42. 42. no “structure” properties via CSS
  43. 43. XML. So much fun No problems the HTML5 way
  44. 44. jQuery .addClass not working on SVG elements but .attr("class", "works"); .addClass fixed in jQuery 3
  45. 45. jQuery .append() or .html() not working on SVG elements http://stackoverflow.com/ questions/3642035/jquerys- append-not-working-with- svg-element
  46. 46. CSS transforms on SVG IE no support for CSS transforms Firefox 41 fixed
  47. 47. SVG adds a new dimension of possibilities 5 ways of embedding SVG in your HTML x multiple ways of scripting SVG x multiple ways of adding CSS x multiple ways of “reusing” SVG elements xlink, def, symbol, fill, etc x html in your svg (foreignObject) x svg in your svg (nested svg) x svg in your CSS x multiple ways of animating techniques and libraries x multiple browsers. Fallback techniques caniuse.com can’t track every single combination
  48. 48. This is too much
  49. 49. SVG Experts CSS
  50. 50. SVG community @sarah_edo @anatudor@AmeliasBrain @rachelnabors@SaraSoueidan Pushing forward SVG Sharing best practices and code
  51. 51. W3C SVG Working Group @svgeesus @shepazu@erikdahlstromTavmjong Bah @dirkschulze They want SVG to succeed
  52. 52. Chris Coyier css-tricks, codepen.io
  53. 53. If you have fun with SVG, you will learn it faster
  54. 54. GSAP http://codepen.io/chrisgannon/pen/xGwybB
  55. 55. snap.svg http://snapsvg.io/demos/#coffee
  56. 56. SMIL (deprecated in Chrome)
  57. 57. SVG Animations are neat and very good support via JS but.. really, add 79Kb to the page load ? Still… it’s a great way to learn SVG
  58. 58. USE case: SVG for your logo
  59. 59. USE case: SVG for icons
  60. 60. USE case: SVG for charts, infographics, "JavaScript journalism"
  61. 61. Think “jQuery for SVG” min. 74.9 KB
  62. 62. min. 50.8 KB
  63. 63. d3.js predefined layouts full min 148 KB Mike Bostock building more modular d3.js version 4
  64. 64. d3.js force graph
  65. 65. 1. Brief introduction to SVG 2. The past 3. The present. Using SVG 4. SVG and Drupal 5. SVG 2: The future Structure
  66. 66. Thank you Ryan Frederick (ry5n)
  67. 67. Drupal 8 theme loads logo.svg by default, not logo.png anymore Issue: https://www.drupal.org/node/2142653 Change: https://www.drupal.org/node/2410787
  68. 68. feed.png to feed.svg https://www.drupal.org/node/2427213
  69. 69. Drupal SVG Guidelines (on work) https://www.drupal.org/node/2433761 Similar project https://svgontheweb.com/
  70. 70. Drupal 7 has 0 SVG files in core Drupal 8 has 79 SVG files in core We use them as images, not taking full potential SVG Sprite for toolbar icons
 https://www.drupal.org/node/2306499
  71. 71. svgimg (Sandbox module) https://www.drupal.org/sandbox/neilgardner/2505991 used in www.reallifedigital.com/
  72. 72. A word about security http://www.slideshare.net/x00mario/the-image-that-called-me
  73. 73. 1. Brief introduction to SVG 2. The past 3. The present. Using SVG 4. SVG and Drupal 5. SVG 2: The future Structure
  74. 74. SVG 2 ripped appart in core + “shared” modules
  75. 75. SVG 2 will bring more integration with new web features such as CSS, HTML5 and WOFF. http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Commitments
  76. 76. SVG 2 specs http://www.w3.org/TR/SVG2/ (Working Draft) https://svgwg.org/svg2-draft/ (Editors Draft) https://github.com/w3c/svgwg
  77. 77. Conclusion
  78. 78. Conclusion SVG is not new.. but it’s here to stay. Now it’s the time. and let’s bring more SVG goodness to Drupal
  79. 79. Resources Dmitry Baranovskiy - You Don't Know SVG https://www.youtube.com/watch?v=SeLOt_BRAqc "If you don't know svg you can't call yourself a Web Developer. Call yourself a Web Enthusiast” — Dmitry Tavmjong Bah - SVG 2 For the Artist and Developer https://www.youtube.com/watch?v=UL2-ZAyvXOM Everything that Sarah Soueidan publishes. http://sarasoueidan.com/articles/index.html CSS Tricks. SVG category 2nd edition!
  80. 80. Vote this session https://events.drupal.org/node/5511

×