Inline styles (inlineStyles)
Moves CSS rules from <style> blocks onto matching elements as attributes.
What Inline styles does in SVGO
SVGO applies inlineStyles as part of its plugin pipeline. In SVGOMG the toggle is labeled Inline styles (enabled by default). Optimization runs entirely in your browser — files are not uploaded to a server.
Use the SVGOMG optimizer with Show original to compare before and after. If output looks wrong, disable this plugin first, then re-enable related transforms one at a time.
When to enable
SVGs that use class-based CSS you want flattened for portability.
When to disable
Complex selectors, @media rules, or styles that cannot map 1:1 to attributes.
Watch out for
Run after mergeStyles; order matters in SVGO multipass.
Try it in SVGOMG
- Open svgomg.net and load your SVG (file, paste, or demo).
- Find Inline styles in the Features panel (
inlineStyles). - Toggle the plugin and compare the preview; download when satisfied.
SVGO Plugin Guide
Browse the SVGO Plugin Guide or read the full SVG optimization walkthrough on the homepage.