Slide 1

Slide 1 text

@francoisblavoet Vectorial Victories

Slide 2

Slide 2 text

Goal Understand when and how to use Vector drawables and how to use them to their fullest. Learn how to deal with common pain points.

Slide 3

Slide 3 text

First, there were rasters Raster : bitmap / png / jpg / webp / … • An asset that describes it’s content as an array of pixels • Works great for images • Can be very heavy • Need to be duplicated for each density

Slide 4

Slide 4 text

First, there were rasters

Slide 5

Slide 5 text

First, there were rasters

Slide 6

Slide 6 text

First, there were rasters

Slide 7

Slide 7 text

First, there were rasters

Slide 8

Slide 8 text

First, there were rasters

Slide 9

Slide 9 text

First, there were rasters

Slide 10

Slide 10 text

First, there were rasters

Slide 11

Slide 11 text

First, there were rasters

Slide 12

Slide 12 text

Then, came SVGs Scalable Vector Graphics • Describes curves that can be rendered in any size • Infinitely scalable • Very nimble and don’t have to be duplicated • Some bonus features you can’t achieve with rasters

Slide 13

Slide 13 text

Then, came SVGs

Slide 14

Slide 14 text

Then, came SVGs

Slide 15

Slide 15 text

What’s in there ?

Slide 16

Slide 16 text

• viewBox : size of the canvas where you describe the curves of this vector • height/width : size in pixel of this svg when rendered, ≠ viewBox • fill : color fill for this vector/path • path : curve to draw on the screen

Slide 17

Slide 17 text

Slide 18

Slide 18 text

A path you said ?

Slide 19

Slide 19 text

A path you said ? Let’s define a viewbox : viewBox="0 0 24 24"

Slide 20

Slide 20 text

A path you said ? First instruction : Move

Slide 21

Slide 21 text

A path you said ? Line

Slide 22

Slide 22 text

A path you said ? Line

Slide 23

Slide 23 text

A path you said ? Line

Slide 24

Slide 24 text

l vs L • Upper case : absolute coordinates • lower case : relative coordinates

Slide 25

Slide 25 text

A path you said ? Line

Slide 26

Slide 26 text

A path you said ? closepath closes the current curve with a straight line to its starting point

Slide 27

Slide 27 text

A path you said ?

Slide 28

Slide 28 text

A path you said ? horizontal and vertical lines

Slide 29

Slide 29 text

A path you said ? horizontal and vertical lines

Slide 30

Slide 30 text

A path you said ? stroke you can also control how your curves are drawn

Slide 31

Slide 31 text

you get the idea many more commands are available : 
 elliptical arc
 rectangle triangle gradient etc

Slide 32

Slide 32 text

Up to powerful instructions such as Bezier curves 
 
 


Slide 33

Slide 33 text

I thought this was about Android ?

Slide 34

Slide 34 text

I thought this was about Android ?

Slide 35

Slide 35 text

I thought this was about Android ?

Slide 36

Slide 36 text

Vector Drawable • That’s an Android resource !
 
 -> can be used just as any other drawable
 
 -> can use @color for fills, @string for paths, @dimen for dimensions • It’s NOT an SVG !!! 
 
 -> only a subset of the SVG norm is supported

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

How to convert ?

Slide 39

Slide 39 text

Is it that easy ? Nope

Slide 40

Slide 40 text

Most common issue : even-odd path

Slide 41

Slide 41 text

Most common issue : even-odd path http://a-student.github.io/SvgToVectorDrawableConverter.Web/

Slide 42

Slide 42 text

even-odd path http://a-student.github.io/SvgToVectorDrawableConverter.Web/

Slide 43

Slide 43 text

Performances

Slide 44

Slide 44 text

Performances

Slide 45

Slide 45 text

Performances

Slide 46

Slide 46 text

Performances

Slide 47

Slide 47 text

Performances

Slide 48

Slide 48 text

Performances

Slide 49

Slide 49 text

Performances ~ > svgo -p 2 sample.svg sample.svg: Done in 24 ms! 0.269 KiB - 40.4% = 0.16 KiB ~ > avocado ic_add.xml ic_add.xml: Done in 13 ms! 0.303 Kb - 10.6% = 0.271 Kb

Slide 50

Slide 50 text

Performances inflate (ms) draw (ms) original 10.90 2.00 optimized 3.51 0.52

Slide 51

Slide 51 text

workflows ?

Slide 52

Slide 52 text

workflows

Slide 53

Slide 53 text

workflows "

Slide 54

Slide 54 text

workflows

Slide 55

Slide 55 text

Another thing .. VectorDrawables are api 21 !

Slide 56

Slide 56 text

Backport time !! defaultConfig { vectorDrawables.useSupportLibrary = true } -> VectorDrawableCompat -> AnimatedVectorDrawableCompat

Slide 57

Slide 57 text

Backport time !!

Slide 58

Slide 58 text

Backport time !!

Slide 59

Slide 59 text

About these bonus features … Animations !!!

Slide 60

Slide 60 text

About these bonus features …

Slide 61

Slide 61 text

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Lottie

Slide 65

Slide 65 text

No content