SVG to CSS Converter

Просто загрузите SVG изображение, и наш инструмент SVG to CSS Converter создаст оптимизированный CSS-код для вашего проекта. Использование SVG изображений и иконок как фона на веб-страницах становится популярным благодаря их масштабируемости без потери качества и легкости. Наш SVG to CSS конвертер поможет вам быстро и легко преобразовать ваше изображение в код для использования в стилях, который обычно используют в background-image. Хотите изменить цвет через CSS? Воспользуйтесь этой инструкцией!

Как использовать SVG в background-image?

Код изображения SVG полученного с помощью SVG to CSS Converter можно использовать следующим образом:

.element {
    background-image: url('data:image/svg+xml;base64,...');
    background-size: contain;
    width: 40px;
    height: 40px;
}

Как изменить цвет SVG изображения любого цвета через CSS

Изменение цвета SVG через CSS — мощный инструмент, но требует понимания того, как работают фильтры. Чтобы преобразовать изображение в нужный цвет, можно использовать комбинацию фильтров, таких как invert(), sepia(), saturate(), и hue-rotate(). Вот шаги, которые помогут вам достичь желаемого результата:

1. Убедитесь, что ваше изображение монохромное

Фильтры работают лучше всего, если исходное изображение — чёрное или одноцветное. Если у вас цветное изображение, фильтры могут выдавать непредсказуемые результаты. Если ваше изображение не чёрное, попробуйте сначала сделать его чёрным через CSS:

.element {
    background-image: url("image");
    filter: grayscale(100%);
}

Это сделает изображение чёрно-белым.

2. Используйте `invert()` для корректировки цвета

Фильтр invert() меняет чёрное на белое, и белое на чёрное. Использование invert() помогает подготовить изображение для дальнейшего цветового изменения. Чтобы инвертировать чёрное изображение, можно использовать следующее:

.element {
    filter: invert(100%);
}

Этот шаг позволяет приблизить цвет изображения к светлому, что пригодится для дальнейшей настройки.

3. Примените `sepia()` для усиления цвета

Фильтр sepia() усиливает тёплые цвета, что поможет подготовить изображение для изменения его оттенка. Добавьте его следующим образом:

.element {
    filter: invert(100%) sepia(100%);
}

4. Используйте `saturate()` для насыщенности

Чтобы получить более яркие цвета, необходимо увеличить насыщенность. Это можно сделать с помощью фильтра saturate():

.element {
    filter: invert(100%) sepia(100%) saturate(1000%);
}

5. Настройте оттенок через `hue-rotate()`

Последний шаг — это выбор точного оттенка с помощью фильтра hue-rotate(). Параметр этого фильтра задаётся в градусах, где:

0 градусов — это красный.
90 градусов — зелёный.
180 градусов — синий.

Для изменения цвета на красный можно использовать:

.element {
    filter: invert(100%) sepia(100%) saturate(1000%) hue-rotate(0deg);
}

Чтобы изменить на другой цвет, просто корректируйте значение hue-rotate().

6. Пример: Как сделать чёрное изображение красным

Если у вас чёрное SVG-изображение, и вы хотите сделать его красным, можно использовать следующий код:

.element {
    background-image: url("data:image/svg+xml;base64,..."); /* SVG cod */
    filter: invert(22%) sepia(90%) saturate(5000%) hue-rotate(0deg);
}

Этот набор фильтров приведёт изображение к красному цвету.

Заключение

Изменение цвета SVG через CSS требует нескольких шагов. Используя фильтры invert(), sepia(), saturate() и hue-rotate(), вы можете добиться точного контроля над цветом вашего изображения. Это особенно полезно, если у вас нет доступа к изменению SVG напрямую или вы хотите динамически менять цвета в зависимости от стилей страницы.