Стили и CSS в SVG

Файлы SVG, экспортированные с CSS на базе классов, можно преобразовать в презентационные атрибуты для лучшей переносимости кода. Запускайте плагины стилей в правильном порядке (объединение merge перед инлайнингом inline) и внимательно проверяйте превью при переключении convertStyleToAttrs.

Плагины SVGO в этом разделе

Объединить стили mergeStyles
Объединяет несколько элементов <style> и комбинирует CSS-правила, где это возможно, перед инлайнингом или минификацией.
Инлайнить стили inlineStyles
Переносит CSS-правила из блоков <style> напрямую на соответствующие элементы в виде презентационных атрибутов.
Минифицировать стили minifyStyles
Минифицирует CSS внутри элементов <style> (удаляет пробелы, избыточный синтаксис) перед инлайнингом или вместо него.
Конвертировать стили в атрибуты convertStyleToAttrs
Конвертирует простые CSS-декларации на элементах в соответствующие презентационные атрибуты SVG.
Удалить теги <style> removeStyleElement
Полностью удаляет блоки <style> после того, как все стили были успешно инлайнены или оказались неиспользуемыми.

Связанные темы

Атрибуты и пространства имен

Как попробовать

Откройте SVGOMG.ru, загрузите свой SVG и переключайте указанные выше плагины на панели настроек.