Styles and CSS in SVG

SVGs exported with class-based CSS can be flattened into presentational attributes for portability. Run style plugins in the right order — merge before inline — and compare the preview when toggling convertStyleToAttrs.

SVGO plugins in this topic

Merge styles mergeStyles
Combines multiple <style> elements and merges rules where possible before inlining or minifying.
Inline styles inlineStyles
Moves CSS rules from <style> blocks onto matching elements as attributes.
Minify styles minifyStyles
Minifies CSS inside <style> elements (whitespace, redundant syntax) before or instead of inlining.
Style to attributes convertStyleToAttrs
Converts simple CSS declarations on elements into presentational SVG attributes.
Remove style elements removeStyleElement
Removes entire <style> blocks after styles have been inlined or are unused.

Try it

Open SVGOMG.net, load your SVG, and toggle the plugins above in the Features panel.

SVGO plugins in this topic

Related topics

Try it