SVG Little Adventures

Transcript

1. SVG Little Adventures Little adventures and misadventures in the SVG world Alessandro Fazzi - weLaika http://torinocodingsociety.it
2. First of all I'm not an SVG expert/designer/guru/evangelist. I'd like to share little experiences and overall doubts, gained working on projects in the last few months.
3. That said, let's start with the usual introduction.
4. SVG is the hype du jour ...
5. ...from 2001
6. What it is? Copy/paste-ed info!
7. What it is? Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, but are more often created with drawing software.
8. Resolution independent Supported by all modern browsers Future-proof (W3C standard) Easy to make and edit Manipulatable with CSS & JS Highly compressible
9. What it can do?
10. http://codepen.io/strapro/pen/rJIEz HTML CSS Result Edit on Rectangle Circle Ellipsis Line Polyline Polygon
13. http://codepen.io/grayghostvisuals/pen/JdrOmR HTML SCSS JS Result Edit on
14. http://codepen.io/guttentag/pen/Ktbxu HTML CSS JS Result Edit on
15. http://codepen.io/digitalcraft/pen/JogGyb/ HTML SCSS Result Edit on D C S V G L o a d e r v . 1 LOADING
16. http://codepen.io/tmrDevelops/pen/OPjexR/ HTML CSS Result Edit on SVG: DOT Pattern Mask
17. http://codepen.io/GuillaumeChabot/pen/mcxIy/ HTML CSS JS Result Edit on
18. Mostly awesome!!!
19. But we feel it something like a stranger...
20. WHY?
21. Some time ago wasn't really the right time for vector graphics applied to web design patterns
25. But designers are now in love with vectors
29. If designers are happy with vectors - yes, this is an assumption - should also developers be happy with them?
30. A little adventure
31. A little adventure One day a web designer produced a nifty vectorial pie chart with some really custom elements.
33. That sweet pie had to come in-page with a smooth bounceIn animation.
34. The developer carefully exported the AI in SVG.
35. Y U NO USE PNG!?!?!?
36. Because... 1. 2x ready 2. 3x ready 3. 4x ready 4. nx ready (mind blown!) 5. 14KB fly weights champion
37. Thanks to the SVG attributes w i d t h and h e i g h t we'll have exactly the sizes used by the designer and never more need to set them in our markup nor CSS code. < s v g v e r s i o n = " 1 . 1 " i d = " L a y e r _ 1 " x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " x m l n s : x l i n k = " h t t p : / / w w w . w 3 . o r g / 1 9 9 9 / x l i n k " x = " 0 p x " y = " 0 p x " w i d t h = " 4 7 4 . 4 p x " h e i g h t = " 3 0 2 . 9 p x " v i e w B o x = " 0 0 4 7 4 . 4 3 0 2 . 9 " e n a b l e - b a c k g r o u n d = " n e w 0 0 4 7 4 . 4 3 0 2 . 9 " x m l : s p a c e = " p r e s e r v e " >
38. 14KB... ✔ a p p / i m a g e s / s o c i a l e / f a s c e _ e t a _ t o r t a . s v g ( s a v e d 3 . 3 2 k B 2 3 % ) minus 3.32KB t h a n k s t o S V G O h t t p s : / / g i t h u b . c o m / s v g / s v g o equals 10,68KB "KA-BOOM KA-BOOM KA-BOOM?!?" -Rico
39. Everything was beutiful, even on IE9, and our dev and designers were happily enjoying together... ...until one day...
40. « H e y d e v ! I r e m e m b e r y o u d e c i d e d t o u s e S V G f o r m a t f o r t h e f r e a k i n g b o u n c i n g v e c t o r i m a g e s , u h ! ? « S o w h y d o n ' t w e p u s h a b i t t h e c o d e r e m o v i n g t h e b o u n c e I n a n i m a t i o n a n d i n t r o d u c i n g a c i r c u l a r p r o g r e s s i v e l o a d o f t h e p i e c h a r t ! ? « U h ! ? ? ? ? « A r e y o u s t i l l t h e r e ?
41. ..
42. Let's take a look To the vector layers and elements
43. Layers ...a casual style
44. L a y e r 1 will be the ID of the SVG element; so if the main layer name won't be customized we'll end to have a lot of un-target-able SVG with the same ID.
45. Unnamed < g r o u p > s. Ok this story is as old as the web development history. Just keep in mind that groups inside AI will be mapped in < g > < / g > tags inside the SVG code and their names into the tag ID.
46. Groups are really important inside Illustrator in order to understand the designer's work and in order to easily export sub-elements of the vector and to name them inside the code. Hey designer, you're fucking coding within AI!
47. Groups are moreover important from the code perspective, because all properties, animations, transformations can be applied to whole groups
48. < s v g x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " x m l n s : x l i n k = " h t t p : / / w w w . w 3 . o r g / 1 9 9 9 / x l i n k " > < g t r a n s f o r m = " r o t a t e ( 4 5 5 0 5 0 ) " > < l i n e x 1 = " 1 0 " y 1 = " 1 0 " x 2 = " 8 5 " y 2 = " 1 0 " s t y l e = " s t r o k e : # 0 0 6 6 0 0 ; " / > < r e c t x = " 1 0 " y = " 2 0 " h e i g h t = " 5 0 " w i d t h = " 7 5 " s t y l e = " s t r o k e : # 0 0 6 6 0 0 ; f i l l : # 0 0 6 6 0 0 " / > < t e x t x = " 1 0 " y = " 9 0 " s t y l e = " s t r o k e : # 6 6 0 0 0 0 ; f i l l : # 6 6 0 0 0 0 " > T e x t g r o u p e d w i t h s h a p e s < / t e x t > < / g > < / s v g > Text grouped w it Text grouped w it
49. Let's take a look to the animation
50. This is one of the elements we need to animate < p a t h f i l l = " # D D 5 2 5 2 " d = " M 1 5 0 . 5 , 1 5 0 . 5 V 0 c 8 3 . 1 , 0 , 1 5 0 . 5 , 6 7 . 4 , 1 5 0 . 5 , 1 5 0 . 5 c 0 , 8 3 . 1 - 6 7 . 4 , 1 5 0 . 5 - 1 5 0 . 5 , 1 5 0 . 5 C 6 7 . 4 , 3 0 0 . 9 , 0 , 2 3 3 . 6 , 0 , 1 5 0 . 5 H 1 5 0 . 5 z " / >
51. M 1 5 0 . 5 , 1 5 0 . 5 V 0 c 8 3 . 1 , 0 , 1 5 0 . 5 , 6 7 . 4 , 1 5 0 . 5 , 1 5 0 . 5 c 0 , 8 3 . 1 - 6 7 . 4 , 1 5 0 . 5 - 1 5 0 . 5 , 1 5 0 . 5 C 6 7 . 4 , 3 0 0 . 9 , 0 , 2 3 3 . 6 , 0 , 1 5 0 . 5 H 1 5 0 . 5 z
52. M150.5,150.5 Move absolutely the pen to x 150.5 y 150.5
53. V0 Draw a vertical line to y point 0
54. c83.1,0,150.5,67.4,150.5,150.5 Draw a cubic bezier relatively to the last pen point
55. c0,83.1-67.4,150.5- 150.5,150.5 Another one
56. C67.4,300.9,0,233.6,0,150.5 Draw another cubic bezier with absolute coordinates
57. H150.5 Draw horizontal line to the absolute x point 150.5
58. z Close the path
60. Problems. 1st round I'm not the rain-man; I can't and I do not want understand that thing! AI produced a code not following human logic. Why 3 cubic bezier instead of one arc!? Probably because of the tool used by the designer? Actually I don't know. Overall: how could I animate such a thing?
61. Answers. 1st round 1st and 2nd problems are not meant to be solved.
62. Answers. 1st round If the designer had been more conscious about the animation problem, he had designed a circle with a fat stroke: stroke is relatively easily animatable. With CSS also...
63. http://codepen.io/chriscoyier/pen/bGyoz/ HTML CSS Result Edit on
64. Problems. 2nd round Is animating through CSS consistent and cross browser?
65. NO! IE9 does not support CSS animations and transitions IE10/11 supports them, but not applied to SVG elements. SVG SMIL animation (probably the first google result is this) hasn't a clear support status: https://status.modern.ie/svgsmilanimation, but in Microsoft DN is explained like it would be a supported feature... help me please!
66. do not hope in j Q u e r y . a n i m a t e ( ) :) n.b.: https://status.modern.ie/csstransitionsanimationsforsvgelemen Questions. Are there efficient JS libraries around? Sure! Just to name the bigger ones (hopefully)
67. http://greensock.com/gsap http://snapsvg.io Questions. So, can I use them to animate my element?
68. Well, yes, but... Answers. Final round and give up. You'll have to rewrite by hand all the vectors, directly in JS. I've tried a number of import libraries for svg.js, snap, raphael and all of
69. them have small or big weakness. Actually a waste of time. Recreating through coding a complex vector is really hard and requires a lot of time; a lot of time will cost a lot more to the customer who already paid a designer and now is paying a second time to re-do the design in a text editor...
70. (Remember: in this story using SVG was a dev initiative and advice) If the designer will continue to work in AI and will do some modifications, you'll have to merge by hand those modifications. Also reopening in AI hand written SVGs will
71. stripe out classes and data attributes. Lessons learned
72. SVG is "ok" and well supported if you'll use its basic features
73. A project with heavy vector animations HAS to be planned with designers and dev together, in order to reduce costs and to do
74. the right technologic choices A project with heavy vector animation will
75. cost much more
76. Do complex thing with SVG writing them directly within your favorite JS library
77. SVG is a complex and serious matter. Be confident with it before start a challanging project Share time!
78. !?