TROUBLESHOOTING YOUR DESIGNER'S, AND VECTOR GRAPHICS_DONT

on YouTube ↗16m

" summary

Shows that SVG transforms get inlined as translated path data, causing misalignment when Android Studio imports and forces inconsistent intrinsic sizes so icons end up non-square until normalized to 24x24 intrinsic size. Demonstrates huge path bloat (4,800 chars → ~1,200 after manual cleaning) and fixes: use strokes instead of outlined shapes, run SVGO two-point precision, try Avocado for extra trimming, avoid masks (masks unsupported so export PNG), and explains unexpected extra draw calls and bitmap cache-reuse heuristics causing missing renders.

AI-written summary · about

" chapters (9)

1. 0:00Introduction to vector issues
2. 1:05SVG vs vector drawable differences
3. 3:55Viewport and intrinsic size explained
4. 5:38Proper artboard setup in Sketch
5. 7:48Exporting with bounding context
6. 8:53Path size optimization techniques
7. 11:59Using stroke paths for simplicity
8. 13:43Advanced path reduction with Avocado
9. 14:24Vector drawable caching behavior

" related talks

• 22mTroubleshooting your designer's, and vector graphicsMitchell Tilbrook · DroidKaigi 2019
• 46mVector WorkflowsFabien Devos, Nick Butcher · Android Makers 2019
• 45mVector WorkflowsNick Butcher · droidcon NYC 2017
• 41mVectorial VictoriesFrançois Blavoet · Android Makers 2018
• 39mVector Icons on Android: Anatomy, Pathophysiology, Diagnosis and SurgeryMikhail Goryunov · Mobius 2022 Autumn
• 31mShapeShifting: Creating delightful icon animationsOr Bar · droidcon San Francisco 2017
• 28mShapeShifting: Creating delightful icon animationsOr Bar · 360|AnDev 2017
• 49mMobiconf: Mark Allisson, blog.stylingandroid.comMark Allisson · Mobiconf 2018