AppHelp guide
CSS Gradients, Clamp Sizes, and SVG Asset Cleanup
Learn how to prepare gradients, clamp-based responsive values, SVG optimization, and SVG-to-PNG exports for front-end UI work.
Quick answer
Use gradients for visual layers, CSS clamp for responsive sizing, SVG minification for vector assets, and SVG-to-PNG export when a target system cannot render SVG. Keep source assets readable before minifying or rasterizing them.
Use gradients and clamp for UI tuning
Gradients are visual values, while clamp controls responsive ranges such as font size, spacing, and component width. Both should be tested at small, medium, and wide breakpoints.
- Keep contrast readable over gradients
- Set sensible min and max values in clamp
- Document final CSS tokens for reuse
Minify SVG after review
SVG minification removes extra metadata and whitespace. Review the source first, then minify a copy so designers and developers can still debug the original vector structure later.
Export PNG only when needed
SVG is better for scalable icons and diagrams. Export PNG for systems that require raster images, social previews, email clients, or places where SVG upload is blocked.
Frequently asked questions
Should I keep SVG or export PNG?
Keep SVG for scalable vector use. Export PNG only when the destination requires raster images or does not support SVG.
When should I use CSS clamp?
Use clamp when a size should fluidly scale between a minimum and maximum across viewport widths.