Troubleshooting your designer's, and vector graphics
summary
Adding vector icons often breaks because designers export selections instead of artboards causing implicit translation, and unaligned anchors blow up path length; converting fills to strokes and reducing float precision to two decimals cuts some SVGs by ~73%. Avoid clip paths and runtime tinting (use theme color or an LRU cache), test with the vector support library on real devices, and run optimizers like SVGOMG or Avocado from a Sketch plugin before shipping.
AI-written summary · about
chapters (23)
- 0:00Troubleshooting vector graphics
- 0:21Designers across time zones
- 1:02Chose to vectorize assets
- 2:06Fixing intrinsic padding in icons
- 3:51Artboards versus individual icons
- 4:54Monolithic artboards in Sketch
- 5:56Importing vectors into Android Studio
- 6:18Complex shapes in vectors
- 7:20Precision in SVG paths
- 8:25Reducing anchor points
- 9:49Flattening layers and merging paths
- 10:14Avoiding clip paths and masks
- 10:56Dangers of tinting vectors
- 12:21Caching vectors with theme colors
- 13:03Vector drawable sizes in layouts
- 13:48Vector support library for compatibility
- 14:32Rendering artifacts on older devices
- 15:35Optimization and performance
- 16:04Aligning vectors to grid
- 17:30Tools for optimizing vectors
- 18:55Configuring SVG Optimizer
- 19:36Vector design best practices
- 21:01Final tips and closing
