AppHelp guide
CSS Gradients, Clamp Sizes, and SVG Asset Delivery
Prepare gradients, clamp-based values, optimized SVG, exact PNG exports, and reusable React SVG components for front-end delivery.
Quick answer
Keep an editable SVG source, optimize a tested copy, then choose the delivery format by destination: inline or file SVG for scalable assets, React JSX/TSX for component props and theming, or exact-size PNG when the target cannot render SVG. Compare visual output and compressed transfer size before release.
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 optimization can remove metadata, comments, redundant groups, precision, IDs, dimensions, and active content. Preserve viewBox, compare original and optimized rendering, inspect both raw and gzip size, and treat ID cleanup as a potentially breaking change for CSS, animation, gradients, fragments, and external references.
Choose SVG, React component, or PNG deliberately
Use the SVG file when the destination supports scalable vectors. Convert to a React component when callers need currentColor, responsive props, refs, titles, or design-system ownership. Export PNG for social images, email clients, marketplaces, presentations, or upload systems that reject SVG.
- Use contain to preserve all artwork and cover to fill a fixed PNG canvas
- Keep transparency for icons or choose a tested solid background
- Use currentColor only for intentionally single-color React icons
- Run formatter, lint, build, visual, and accessibility checks on generated components
Treat SVG as active content
Optimization and JSX conversion are not complete security sanitizers. Remove scripts, embedded HTML, event handlers, and external references from previews and generated assets, then apply the target application's content-security and supply-chain policy before accepting untrusted SVG.
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.
When should I convert SVG to a React component?
Convert SVG to JSX or TSX when the application needs caller props, theme color through currentColor, responsive sizing, refs, accessible naming, or design-system composition. Keep a plain SVG file when those runtime behaviors are unnecessary.
Is optimized or converted SVG automatically safe?
No. Optimization, JSX conversion, and security sanitization are different jobs. Untrusted SVG should be stripped of active and external content and reviewed under the destination's security policy.