Slides from Drupalcon Barcelona 2015 by David Corbacho

1. Next generation graphics
SVG
by David Corbacho

2. Scalable Vector
Graphics
Representing graphics
with mathematical
expressions in XML
like is 1998

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. Disclaimer: I’m not a designer

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. SVG basic concepts
<line>

7. SVG basic concepts
<rect>

8. SVG basic concepts
<circle>

9. SVG basic concepts
<ellipsis>

10. SVG basic concepts
<polyline>

11. SVG basic concepts
<polygon>

12. SVG basic concepts
Uppercase: absolute
Lowercase: relative
L Lineto
M Moveto
C Curveto
z close path

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"/>

16. Handcoded Twitter bird
https://twitter.com/danklammer/status/628866264153194496

17. Inkscape.(Open source)
Adobe Illustrator. (Best UI)
Sketch (the new guy)
For the rest of us mere mortals…
use SVG Editors

18. Optimize it
jakearchibald.github.io/svgomg/
Automate it
SVGO
Bloated SVG code?

19. Why SVG ?

20. Why SVG? Always Crisp
https://en.wikipedia.org/wiki/Vector_graphics

21. Why SVG? Scriptable
http://codepen.io/githiro/pen/xABCi
SVG DOM

22. Why SVG? Animatable
with:
CSS
JavaScript
SMIL *

23. 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” …
}

24. Why SVG?
Accessibility
http://www.paciellogroup.com/blog/2013/12/using-aria-
enhance-svg-accessibility/

25. 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

26. 1. Brief introduction to SVG
2. The past
3. The present. Using SVG
4. SVG and Drupal
5. SVG 2: The future
Structure

27. 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 + …

28. 2001.
SVG 1.0 released
Adobe releases SVG
Viewer 3

30. 2003.
SVG 1.1 and SVG
Mobile:
Tiny and Basic

31. 2005. Adobe
adopts Flash

32. 2008
Apple blocks
Flash in
iPhone & iPad

33. 2010
IE 9 release.
Implements 60% of
SVG spec

34. 2011
SVG 1.1 2nd Edition
Apple Retina

35. 2012
Android 3.x
implements
part of SVG

37. We need graphics for HD screens,
that works in all modern browsers

38. It’s the SVG
Renaissance!
SVG is perfect !!

39. 1. Brief introduction to SVG
2. The past
3. The present. Using SVG
4. SVG and Drupal
5. SVG 2: The future
Structure

40. 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)

41. SVG 1 is a new-old thing “Viejoven”
and it has “quirks”

42. SVG.
Markup and Image
The paradox of Schrödinger’s cat

43. SVG in HTML
“DEAD”
for security
“ALIVE”
SVG DOM

44. SVG (nowadays) is
a parallel universe,
where some rules
don’t apply

45. No z-index
Fixed in SVG 2

46. no
“structure” properties
via CSS

47. XML. So much fun
No problems the HTML5 way

48. jQuery .addClass
not working on
SVG elements
but .attr("class", "works");
.addClass fixed in jQuery 3

49. jQuery .append()
or .html()
not working on
SVG elements
http://stackoverflow.com/
questions/3642035/jquerys-
append-not-working-with-
svg-element

50. CSS transforms on
SVG
IE no support for CSS transforms
Firefox 41 fixed

51. 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

52. This is too much

53. SVG Experts
CSS

54. SVG community
@sarah_edo @anatudor@AmeliasBrain @rachelnabors@SaraSoueidan
Pushing forward SVG
Sharing best practices and code

55. W3C SVG Working Group
@svgeesus @shepazu@erikdahlstromTavmjong Bah @dirkschulze
They want SVG to succeed

56. Chris Coyier
css-tricks, codepen.io

57. If you have fun with SVG,
you will learn it faster

58. GSAP
http://codepen.io/chrisgannon/pen/xGwybB

59. snap.svg
http://snapsvg.io/demos/#coffee

60. SMIL
(deprecated in Chrome)

61. 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

62. USE case: SVG for
your logo

63. USE case: SVG for
icons

64. USE case: SVG for charts,
infographics,
"JavaScript journalism"

65. Think “jQuery for SVG”
min.
74.9 KB

66. min.
50.8 KB

67. d3.js predefined layouts
full
min
148 KB
Mike Bostock
building
more modular
d3.js version 4

68. d3.js force graph

69. 1. Brief introduction to SVG
2. The past
3. The present. Using SVG
4. SVG and Drupal
5. SVG 2: The future
Structure

70. Thank you Ryan Frederick (ry5n)

71. 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

72. feed.png to feed.svg
https://www.drupal.org/node/2427213

73. Drupal SVG
Guidelines (on work)
https://www.drupal.org/node/2433761
Similar project https://svgontheweb.com/

74. 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

75. svgimg (Sandbox module)
https://www.drupal.org/sandbox/neilgardner/2505991
used in www.reallifedigital.com/

76. A word about security
http://www.slideshare.net/x00mario/the-image-that-called-me

77. 1. Brief introduction to SVG
2. The past
3. The present. Using SVG
4. SVG and Drupal
5. SVG 2: The future
Structure

78. SVG 2 ripped appart in
core + “shared” modules

79. 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

80. SVG 2 specs
http://www.w3.org/TR/SVG2/ (Working Draft)
https://svgwg.org/svg2-draft/ (Editors Draft)
https://github.com/w3c/svgwg

81. Conclusion

82. 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

83. 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!

84. Vote this session
https://events.drupal.org/node/5511