Troubleshooting your designer, and vector graphics

Transcript

1. Troubleshooting your designer, and vector graphics @sir_tilbrook https://www.youtube.com/c/anzcoders
2. Mitchell Tilbrook Android Developer at Moneytree I Live in Sydney, Australia @sir_tilbrook https://www.youtube.com/c/anzcoders
3. Why Moneytree Vectorised our icon? — Smaller app size — Removes duplication @sir_tilbrook https://www.youtube.com/c/anzcoders
4. @sir_tilbrook https://www.youtube.com/c/anzcoders
5. Step 1 Exporting @sir_tilbrook https://www.youtube.com/c/anzcoders
6. @sir_tilbrook https://www.youtube.com/c/anzcoders
7. <svg width="16px" height="16px" viewBox="0 0 16 16"> <g transform="translate(-4.000000, -4.000000)"> <path d="M4,8 L8,8 L8,4 … L16,20 L16,20 Z"></path> </g> </svg> @sir_tilbrook https://www.youtube.com/c/anzcoders
8. <svg width="16px" height="16px" viewBox="0 0 16 16"> <g transform="translate(-4.000000, -4.000000)"> <path d="M4,8 L8,8 L8,4 … L16,20 L16,20 Z"></path> </g> </svg> @sir_tilbrook https://www.youtube.com/c/anzcoders
9. @sir_tilbrook https://www.youtube.com/c/anzcoders
10. @sir_tilbrook https://www.youtube.com/c/anzcoders
11. @sir_tilbrook https://www.youtube.com/c/anzcoders
12. Design won't export Artboards, what can I do? @sir_tilbrook https://www.youtube.com/c/anzcoders
13. <svg width="16px" height="16px" viewBox="0 0 16 16"> <g transform="translate(-4.000000, -4.000000)"> <path d="M4,8 L8,8 L8,4 … L16,20 L16,20 Z"></path> </g> </svg> @sir_tilbrook https://www.youtube.com/c/anzcoders
14. <svg width="24px" height="24px" viewBox="0 0 24 24"> <g> <path d="M4,8 L8,8 L8,4 … L16,20 L16,20 Z"></path> </g> </svg> @sir_tilbrook https://www.youtube.com/c/anzcoders
15. Monolithic Artboards @sir_tilbrook https://www.youtube.com/c/anzcoders
16. Monolithic Artboards Workarounds @sir_tilbrook https://www.youtube.com/c/anzcoders
17. Importing - Mostly solved http://inloop.github.io/svg2android/ @sir_tilbrook https://www.youtube.com/c/anzcoders
18. https://twitter.com/alexjlockwood/status/ 1072989065262198784 @sir_tilbrook https://www.youtube.com/c/anzcoders
19. @sir_tilbrook https://www.youtube.com/c/anzcoders
20. Path Length @sir_tilbrook https://www.youtube.com/c/anzcoders
21. Path size ~4,900 <?xml version="1.0" encoding="UTF-8"?> <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="ic_corp_CorpTravel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Group" transform="translate(0.000000, 1.000000)" fill="#000000"> <path d="M18.9257739,8.49547826 C19.759513,8.27008696 20.6433391,8.77095652 20.8687304,9.61617391 C20.8812522,9.66 20.8562087,9.70486957 20.8123826,9.71634783 L10.5789913,12.4586087 L10.1480348,12.5775652 C9.7682087,12.6245217 9.41551304,12.4638261 9.2162087,12.1664348 L6.94664348,8.77513043 L7.22942609, 8.69895652 C7.30142609,8.68017391 7.45690435,8.72608696 7.50594783,8.77721739 L8.89064348,10.2370435 C9.07116522,10.4394783 9.28403478,10.5730435 9.50942609,10.713913 C9.55533913,10.7431304 9.63986087, 10.7963478 9.76194783,10.8266087 C9.80890435,10.838087 9.94142609,10.8464348 9.98942609,10.8443478 C10.2398609,10.833913 10.4725565,10.766087 10.6781217,10.7076522 L18.9257739,8.49547826 Z M12.3810783, 7.29026087 L12.4176,7.27878261 C12.5699478,7.23495652 12.7222957,7.188 12.8777739,7.17234783 C13.1678609, 7.14208696 13.4642087,7.2213913 13.7125565,7.3893913 L15.2245565,8.40782609 L13.783513,8.79391304 L12.3810783,7.29026087 Z M14.5212522,14.7031304 C14.3929043,14.9264348 14.0370783,15.2008696 13.787687, 15.2666087 L13.1553391,15.4346087 L14.2969043,12.5431304 L16.0301217,12.0787826 L14.5212522,14.7031304 Z M10.0269913,9.80713043 C9.88507826,9.71843478 9.75151304,9.63391304 9.66803478,9.54104348 L8.26351304, 8.05930435 C7.94733913,7.72747826 7.4016,7.57095652 6.95916522,7.69095652 L6.58142609,7.79217391 C6.27986087,7.87356522 6.0336,8.09686957 5.9229913,8.38904348 C5.81238261,8.68330435 5.8509913,9.01408696 6.02525217,9.27495652 L8.34907826,12.7466087 C8.71742609,13.2965217 9.3309913,13.6189565 10.043687, 13.6189565 C10.1417739,13.6189565 10.2409043,13.6126957 10.3410783,13.6012174 L10.8461217,13.4676522 L10.8482087,13.4676522 L13.0426435,12.8791304 L12.0669913,15.350087 C11.9219478,15.7153043 11.963687, 16.0627826 12.179687,16.3048696 C12.3351652,16.4791304 12.5542957,16.569913 12.8057739,16.569913 C12.9049043,16.569913 13.0092522,16.5573913 13.1167304,16.5281739 L14.0579478,16.2756522 C14.5723826, 16.137913 15.1609043,15.686087 15.4259478,15.2227826 L17.4523826,11.697913 L21.0826435,10.7243478 C21.6805565,10.5636522 22.0363826,9.94695652 21.8777739,9.34695652 C21.5021217,7.9466087 20.0548174, 7.11286957 18.6565565,7.48747826 L16.5602087,8.04886957 L14.2958609,6.52434783 C13.8471652,6.22069565 13.3108174,6.084 12.775513,6.13408696 C12.5574261,6.156 12.3414261,6.21547826 12.1285565,6.27704348 L11.9616,6.324 C11.5984696,6.42104348 11.3386435,6.65686957 11.2489043,6.96991304 C11.1591652,7.28295652 11.2551652,7.62 11.5129043,7.8933913 L12.6419478,9.10069565 L10.3880348,9.70486957 C10.2242087,9.75182609 10.0697739,9.79669565 10.0269913,9.80713043 Z" id="Fill-1"></path> <path d="M12.998087,-0.000104347826 C7.67426087,-0.000104347826 3.23008696,3.81485217 2.24191304,8.85276522 C2.23878261,8.85485217 2.2346087,8.85485217 2.23043478,8.85798261 C0.624521739,9.88685217 -0.230086957, 11.2350261 0.0537391304,12.2941565 C0.288521739,13.1706783 1.15773913,13.7863304 2.50278261,14.0284174 C2.91913043,14.1035478 3.36886957,14.1400696 3.84052174,14.1400696 C4.73791304,14.1400696 5.71669565, 14.0065043 6.69756522,13.7435478 C6.97617391,13.6684174 7.14208696,13.3825043 7.06695652,13.1038957 C6.99286957,12.8263304 6.70591304,12.6656348 6.42834783,12.7345043 C5.076,13.0976348 3.74765217,13.1925913 2.68747826,13.0016348 C1.77652174,12.8378087 1.18382609,12.4819826 1.06173913,12.0238957 C0.958434783, 11.6398957 1.29234783,10.9595478 2.06869565,10.2823304 C2.05408696,10.5087652 2.03426087,10.7341565 2.03426087,10.9637217 C2.03426087,11.4113739 2.0613913,11.8621565 2.11565217,12.3045913 C2.15008696, 12.5905043 2.41304348,12.7877217 2.69582609,12.7605913 C2.98173913,12.725113 3.18626087,12.4642435 3.15078261,12.1783304 C3.10278261,11.7776348 3.07773913,11.3696348 3.07773913,10.9637217 C3.07773913, 5.4938087 7.52817391,1.04337391 12.998087,1.04337391 C18.468,1.04337391 22.9194783,5.4938087 22.9194783, 10.9637217 C22.9194783,16.4346783 18.468,20.885113 12.998087,20.885113 C9.02034783,20.885113 5.43913043, 18.5226783 3.87391304,14.865287 C3.76017391,14.6002435 3.45026087,14.4781565 3.1893913,14.5908522 C2.92434783,14.7056348 2.80121739,15.0124174 2.91495652,15.2774609 C4.64504348,19.3178087 8.60295652, 21.9285913 12.998087,21.9285913 C19.044,21.9285913 23.9629565,17.0096348 23.9629565,10.9637217 C23.9629565, 4.9178087 19.044,-0.000104347826 12.998087,-0.000104347826" id="Fill-3"></path> </g> </g> </svg> @sir_tilbrook https://www.youtube.com/c/anzcoders
22. https://github.com/svg/svgo @sir_tilbrook https://www.youtube.com/c/anzcoders
23. 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
24. Path size is now ~1,200 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g fill="#000"> <path d="M18.93 9.5a1.6 1.6 0 0 1 1.94 1.12.08.08 0 0 1-.06.1l-10.23 2.74-.43.12a.96.96 0 0 1-.93-.41l-2.27-3.4.28-.07c.07-.02.23.03.28.08l1.38 1.46a2.69 2.69 0 0 0 .87.59c.05 0 .18.02.23.01.25 0 .48-.07.69-.13l8.25-2.21zm-6.55-1.21l.04-.01c.15-.05.3-.1.46-.1.29-.04.58.04.83.2l1.51 1.03-1.44.38-1.4-1.5zm2.14 7.41c-.13.23-.48.5-.73.57l-.63.16 1.14-2.89 1.73-.46-1.5 2.62zm-4.5-4.9a1.74 1.74 0 0 1-.35-.26l-1.4-1.48a1.4 1.4 0 0 0-1.31-.37l-.38.1a.98.98 0 0 0-.55 1.48l2.32 3.48a2 2 0 0 0 1.7.87c.1 0 .2 0 .3-.02l.5-.13 2.2-.6-.98 2.48c-.15.37-.1.71.11.95.16.18.37.27.63.27.1 0 .2-.01.3-.04l.95-.25a2.5 2.5 0 0 0 1.37-1.06l2.02-3.52 3.63-.98c.6-.16.96-.77.8-1.37a2.64 2.64 0 0 0-3.22-1.86l-2.1.56-2.26-1.53c-.45-.3-.99-.44-1.52-.39-.22.03-.44.09-.65.15l-.17.04a.96.96 0 0 0-.71.65c-.1.31 0 .65.26.92l1.13 1.21-2.25.6c-.17.05-.32.1-.36.1z"/> <path d="M13 1C7.67 1 3.23 4.81 2.24 9.85h-.01C.63 10.9-.23 12.25.05 13.3c.24.88 1.1 1.5 2.45 1.74.42.07.87.11 1.34.11.9 0 1.88-.13 2.86-.4a.52.52 0 0 0-.27-1 8.88 8.88 0 0 1-3.74.26c-.91-.16-1.5-.52-1.63-.98-.1-.38.23-1.06 1-1.74 0 .23-.03.45-.03.68 0 .45.03.9.09 1.34.03.3.3.49.58.46.28-.03.49-.3.45-.58a9.93 9.93 0 1 1 19.77-1.21 9.93 9.93 0 0 1-19.05 3.9.52.52 0 0 0-.68-.28.52.52 0 0 0-.28.69A10.96 10.96 0 1 0 13 1"/> </g> </svg> @sir_tilbrook https://www.youtube.com/c/anzcoders
25. @sir_tilbrook https://www.youtube.com/c/anzcoders
26. Outlined Path are more complex @sir_tilbrook https://www.youtube.com/c/anzcoders
27. @sir_tilbrook https://www.youtube.com/c/anzcoders
28. @sir_tilbrook https://www.youtube.com/c/anzcoders
29. Path is ~500 <vector> <path android:pathData="M13.5,10.4l-1.6,-1. 7c-0.3,-0.3 -0.2,-0.60.2,-0.7l0.5,-0.1c0.4,-0.1 0.9,0 1.2,0.2l2.4,1.6" android:strokeWidth="1" android:strokeColor="#000000"/> <path android:pathData="M13.8,13.1l-1.3,3.3c-0.1,0.4 0, 0.6 0.4,0.5l0.9,-0.2c0.4,-0.1 0.8,-0.4 1,-0.8l2.1,-3.6" android:strokeWidth="1" android:strokeColor="#000000"/> <path android:pathData="M8.9,13.4l-2.2,-3.3 c-0.2,-0.2 0,-0.6 0.2,-0.7l0.4,-0.1c0.2,-0.1 0.6,0 0.8,0.2l1.5,1.5c0,0 0.3,0.40.8,0.3l8.2,-2.2c1.1,-0.3 2.2,0.4 2.5,1.4c0.1,0.3 -0.1,0.6-0.4,0.7l-10.3, 2.8C10.3,14.1 9.4,14.2 8.9 ,13.4z" android:strokeWidth="1" android:strokeColor="#000000" android:strokeLineCap="round" /> <path android:pathData="M3,13.2C3,12.8 3,12 .4 3,12C3,6.5 7.4, 2 13,2c5.5,0 10,4.5 10, 10s-4.5,10 -10,10c-4.1,0 -7.7,-2.5 -9.2,-6.1" android:strokeWidth="1" android:strokeColor="#000000" android:strokeLineCap="round" /> <path android:pathData="M6.8,14.2c-2.8,0.8 -5.4,0.3 -5.8,-1c-0.2, -0.8 0.6,-2 1.9,-2.8" android:strokeWidth="1" android:strokeColor="#000000" android:strokeLineCap="round" /> </vector> @sir_tilbrook https://www.youtube.com/c/anzcoders
30. Other Optimizations — Flatten Layers — Merge Paths — Merge Shapes @sir_tilbrook https://www.youtube.com/c/anzcoders
31. @sir_tilbrook https://www.youtube.com/c/anzcoders
32. Avoid clip-path clip-path are * Not anti-aliased * Often more costly than using multiple shapes http://j.mp/vector-workflow side 41 Alex Lockwood, November, Oredev, Malmo Sweden @sir_tilbrook https://www.youtube.com/c/anzcoders
33. Avoid Tint for coloring <ImageView app:srcCompat="@drawable/ic_mic" android:tint="@color/colorRed" … /> @sir_tilbrook https://www.youtube.com/c/anzcoders
34. <ImageView android:id="@+id/imageView2" android:layout_width="48dp" android:layout_height="48dp" app:srcCompat="@drawable/ic_mic" android:tint="@color/colorRed" /> <ImageView android:id="@+id/imageView3" android:layout_width="48dp" android:layout_height="48dp" app:srcCompat="@drawable/ic_mic" android:tint="@color/colorRed" /> <ImageView android:id="@+id/imageView4" android:layout_width="48dp" android:layout_height="48dp" app:srcCompat="@drawable/ic_mic" android:tint="@color/colorRed" /> @sir_tilbrook https://www.youtube.com/c/anzcoders
35. 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
36. 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
37. How do we cache hit? @sir_tilbrook https://www.youtube.com/c/anzcoders
38. Theme Colored vectors are cache-able <attr name="iconColor" format="reference" /> <style name="AppTheme" parent="BaseTheme"> <item name="iconColor">@color/colorRed</item> </style> <path android:fillColor="?iconColor"/> @sir_tilbrook https://www.youtube.com/c/anzcoders
39. Theme Colored vectors are cache-able <vector> <path android:fillColor="?iconColor" android:pathData="M14.9 … Z"/> </vector> @sir_tilbrook https://www.youtube.com/c/anzcoders
40. 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
41. @sir_tilbrook https://www.youtube.com/c/anzcoders
42. @sir_tilbrook https://www.youtube.com/c/anzcoders
43. @sir_tilbrook https://www.youtube.com/c/anzcoders
44. @sir_tilbrook https://www.youtube.com/c/anzcoders
45. Compiling Optimizing Vectors @sir_tilbrook https://www.youtube.com/c/anzcoders
46. <svg width="24px" height="24px" viewBox="0 0 24 24"> <g> <path d="M15.5011964,11.7070868 L15.5105468 ,5.59802895 C15.5105468,3.90989262 14.1163046 ,2.5435 12.3948,2.5435 C10.6743343,2.5435 9.27801429,3.90989262 9.27801429,5.59802895 L9.27801429,11.7070868C9.27801429,13.3931868 10.6743343,14.7616158 12.3948,14.7616158C14. 1163046,14.7616158 15.5011964,13.3931868 15.5011964,11.7070868 ZM17.9000825,11.7070868 C17.9000825,14.7616158 15.2643207,16.8997861 12.3948,16.8997861 C9.52631821,16.8997861 6.88847857,14.76161586.88847857,11.7070868 L5.1223,11.7070868 C5.1223,15.184159 7.9471467 9,18.0533798 11.3558714,18.5471953 L11.355871 4,21.88885 L13.4337286,21.88885 L13.4337286, 18.5471953 C16.8403754,18.0533798 19.6673, 15.184159 19.6673,11.7070868 L17.9000825, 11.7070868 L17.9000825,11.7070868 Z"/> </g> </svg> @sir_tilbrook https://www.youtube.com/c/anzcoders
47. @sir_tilbrook https://www.youtube.com/c/anzcoders
48. <svg width="24px" height="24px" viewBox="0 0 24 24"> <g> <path d="M14.99,11 L14.999,5 C14.999,3.342 13.657,2 12,2 C10.344,2 9,3.342 9,5 L9,11 C9,12.656 10.344,14 12,14 C13.657,14 14.99 ,12.656 14.99,11 Z M17.299, 11 C17.299,14 14.762,16.1 12 ,16.1 C9.239,16.1 6.7,14 6.7,11 L5,11 C5, 14.415 7.719,17.233 11, 17.718 L11,21 L13,21 L13,17.718 C16.279, 17.233 19,14.415 19,11 L17.299,11 L17.299,11 Z"/> </g> </svg> @sir_tilbrook https://www.youtube.com/c/anzcoders
49. Tools @sir_tilbrook https://www.youtube.com/c/anzcoders
50. https://github.com/alexjlockwood/avocado @sir_tilbrook https://www.youtube.com/c/anzcoders
51. https://github.com/BohemianCoding/svgo-compressor @sir_tilbrook https://www.youtube.com/c/anzcoders
52. https://gist.github.com/alexjlockwood/ d53765ad32019ef63eeea57925124f9c @sir_tilbrook https://www.youtube.com/c/anzcoders
53. Takeaways Avoid * clipped-path * evenOdd fill rule * outlined stoke everything @sir_tilbrook https://www.youtube.com/c/anzcoders
54. 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
55. Thank you Moneytree is hiring in Tokyo and Sydney @sir_tilbrook @sir_tilbrook https://www.youtube.com/c/anzcoders