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/