Troubleshooting your designer, and vector graphics

Slide 1

Slide 1 text

Troubleshooting your designer, and vector graphics @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 2

Slide 2 text

Mitchell Tilbrook Android Developer at Moneytree I Live in Sydney, Australia @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 3

Slide 3 text

Why Moneytree Vectorised our icon? — Smaller app size — Removes duplication @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 4

Slide 4 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 5

Slide 5 text

Step 1 Exporting @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 6

Slide 6 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 7

Slide 7 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 8

Slide 8 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 9

Slide 9 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 10

Slide 10 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 11

Slide 11 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 12

Slide 12 text

Design won't export Artboards, what can I do? @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 13

Slide 13 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 14

Slide 14 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 15

Slide 15 text

Monolithic Artboards @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 16

Slide 16 text

Monolithic Artboards Workarounds @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 17

Slide 17 text

Importing - Mostly solved http://inloop.github.io/svg2android/ @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 18

Slide 18 text

https://twitter.com/alexjlockwood/status/ 1072989065262198784 @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 19

Slide 19 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 20

Slide 20 text

Path Length @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 21

Slide 21 text

Path size ~4,900 @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 22

Slide 22 text

https://github.com/svg/svgo @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 23

Slide 23 text

svgo \ ./svgs/outline-plane.svg \ # -p decimal precision -p 2 # or maybe 3 outline-plane.svg: Done in 53 ms! 4.766 KiB - 72% = 1.335 KiB @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 24

Slide 24 text

Path size is now ~1,200 @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 25

Slide 25 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 26

Slide 26 text

Outlined Path are more complex @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 27

Slide 27 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 28

Slide 28 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 29

Slide 29 text

Path is ~500 @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 30

Slide 30 text

Other Optimizations — Flatten Layers — Merge Paths — Merge Shapes @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 31

Slide 31 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 32

Slide 32 text

Avoid clip-path clip-path are * Not anti-aliased * Often more costly than using multiple shapes http://j.mp/vector-workﬂow side 41 Alex Lockwood, November, Oredev, Malmo Sweden @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 33

Slide 33 text

Avoid Tint for coloring @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 34

Slide 34 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 35

Slide 35 text

XML Tint invalidates Caching public boolean canReuseCache() { if (!mCacheDirty && mCachedTint == mTint && mCachedTintMode == mTintMode && mCachedAutoMirrored == mAutoMirrored) { return true; } updateCacheStates(); return false; } // VectorDrawableCompat.java: @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 36

Slide 36 text

XML Tint invalidates Caching public void createCachedBitmapIfNeeded(int width, int height) { if (this.mCachedBitmap == null || !this.canReuseBitmap(width, height)) { this.mCachedBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888); this.mCacheDirty = true; } } // VectorDrawableCompat.java: @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 37

Slide 37 text

How do we cache hit? @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 38

Slide 38 text

Theme Colored vectors are cache-able <item name="iconColor">@color/colorRed</item> @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 39

Slide 39 text

Theme Colored vectors are cache-able @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 40

Slide 40 text

Caching with Tint val tint = ContextCompat .getColor(context, android.R.color.holo_green_light) val drawable = ContextCompat .getDrawable(context, R.drawable.ic_mic) ?.setTint(tint) @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 41

Slide 41 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 42

Slide 42 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 43

Slide 43 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 44

Slide 44 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 45

Slide 45 text

Compiling Optimizing Vectors @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 46

Slide 46 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 47

Slide 47 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 48

Slide 48 text

@sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 49

Slide 49 text

Tools @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 50

Slide 50 text

https://github.com/alexjlockwood/avocado @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 51

Slide 51 text

https://github.com/BohemianCoding/svgo-compressor @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 52

Slide 52 text

https://gist.github.com/alexjlockwood/ d53765ad32019ef63eeea57925124f9c @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 53

Slide 53 text

Takeaways Avoid * clipped-path * evenOdd ﬁll rule * outlined stoke everything @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 54

Slide 54 text

Takeaways Do * Prefer Theme coloring when possible * Align to Grid * Flatten Layers * Merge Paths/Shapes * Use Optimization tools (SVGO, Avacardo) @sir_tilbrook https://www.youtube.com/c/anzcoders

Slide 55

Slide 55 text

Thank you Moneytree is hiring in Tokyo and Sydney @sir_tilbrook @sir_tilbrook https://www.youtube.com/c/anzcoders