Для разработчиков / Цвета SVG
Изменение цветов SVG: перекрасьте и скопируйте SVG
Просматривайте явные цвета SVG и количество их использований, редактируйте точки градиента и простые правила заливки CSS, затем скачивайте SVG или копируйте его код.
Изменение цветов SVG: перекрасьте и скопируйте SVG: Находит явные токены цветов в атрибутах fill, stroke, stop-color, color, flood-color и lighting-color, встроенных стилях и простых правилах стилей. Именованные цвета, короткие hex-коды, rgb() и hsl() нормализуются. При замене остальные байты исходного кода сохраняются, если очистка не требует изменений. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.
- Категория
- Инструменты для разработчиков
- Запуски
- В вашем браузере
- Стоимость
- Бесплатно · без регистрации
- Доступность
- Готово к использованию
Полностью работает в браузере
Заливка SVG
Заливка SVG, обводка и точки градиента используют значения цветов и ссылки на серверы заливки. Спецификация: https://www.w3.org/TR/SVG2/painting.html
Синтаксис цветов
Парсер поддерживает именованные цвета, hex, rgb(), hsl() и currentColor. Если альфа-канал указан, он сохраняется. Переменные CSS и расширенные цветовые пространства не поддерживаются парсером этого инструмента. Спецификация: https://www.w3.org/TR/css-color-4/
Как пользоваться
- Перетащите SVG-файл или вставьте его разметку.
- Используйте каждый выбор цвета или введите замену; при необходимости перекрасьте все токены одновременно.
- Сравните исходный и изменённый варианты, затем скачайте или скопируйте очищенный SVG.
Конфиденциальность и ограничения
Код SVG остаётся в вашем браузере. Предпросмотры представляют собой изолированные изображения, а небезопасное содержимое и внешние ресурсы удаляются.
Похожие инструменты
Часто задаваемые вопросы
Что учитывает количество использований?
Явные токены цветов в разметке, а не количество отображённых пикселей или элементов, к которым применяется унаследованный стиль.
Поддерживаются ли градиенты?
Да. Цвета точек градиента можно изменять без замены идентификаторов градиентов или ссылок на них.
Что делает currentColor?
Он использует унаследованное значение CSS-свойства color, если SVG встроен непосредственно в страницу. В предпросмотре изображения обычно используется чёрный цвет, если сам SVG не задаёт color.
Определяются ли все цвета CSS?
Нет. Переменные CSS, расширенные цветовые пространства, унаследованные значения по умолчанию и вычисленные результаты применения селекторов не определяются. Поддерживаются простые объявления и селекторы.
Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен