SVG в CSS и Data URI

Очищайте SVG, проверяйте viewBox, currentColor, fill/stroke и получайте CSS snippets.

Ввод

CSS-селекторЗаменить fill/stroke на currentColorУдалить metadata/title/descОдинарные кавычки внутри SVG

Небезопасные теги, обработчики событий и javascript: ссылки всегда удаляются до генерации snippets.

Предпросмотр

Диагностика SVG

ViewBox

0 0 96 96

ширина/высота

96 x 96

текущийЦвет

Жесткий fill

Жесткий stroke

Удалено узлов

Удалено атрибутов

Заменено цветов

Байт до

481

Байт после

501

Байт Data URI

544

Очищенный SVG

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><rect width="96" height="96" rx="22" fill="currentColor"/><path d="M30 56 20 46l10-10" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><path d="M66 36 76 46 66 56" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><path d="M54 28 42 68" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round"/></svg>

Данные URI

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' rx='22' fill='currentColor'/%3E%3Cpath d='M30 56 20 46l10-10' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M66 36 76 46 66 56' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M54 28 42 68' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E

Base64 Данные URI

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIHJ4PSIyMiIgZmlsbD0iY3VycmVudENvbG9yIi8+PHBhdGggZD0iTTMwIDU2IDIwIDQ2bDEwLTEwIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNNjYgMzYgNzYgNDYgNjYgNTYiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik01NCAyOCA0MiA2OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+

Фон CSS

.icon-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' rx='22' fill='currentColor'/%3E%3Cpath d='M30 56 20 46l10-10' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M66 36 76 46 66 56' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M54 28 42 68' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

Маска CSS

.icon-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: #4f46e5;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' rx='22' fill='currentColor'/%3E%3Cpath d='M30 56 20 46l10-10' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M66 36 76 46 66 56' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M54 28 42 68' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' rx='22' fill='currentColor'/%3E%3Cpath d='M30 56 20 46l10-10' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M66 36 76 46 66 56' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M54 28 42 68' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

Встроенный HTML

<span class="icon-svg" style="display:inline-block;width:1em;height:1em;background:url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' rx='22' fill='currentColor'/%3E%3Cpath d='M30 56 20 46l10-10' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M66 36 76 46 66 56' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M54 28 42 68' fill='none' stroke='currentColor' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E&quot;) center / contain no-repeat;"></span>

SVG в CSS, mask и Data URI онлайн

Вставьте SVG или загрузите файл, чтобы безопасно очистить разметку, убрать скрипты и подготовить компактный Data URI.

Инструмент проверяет viewBox, размеры, currentColor, fill и stroke, а затем генерирует готовые CSS snippets для background-image, mask и inline-вставки.

✓ Инструмент работает прямо в браузере и подходит для быстрых проверок без установки программ.

✓ Ввод можно очистить и пересчитать заново, что удобно для повторяющихся небольших задач.

✓ Используйте полноэкранный режим, когда нужно больше места для длинного текста, структурированных данных или крупного результата.

✓ Кнопки копирования помогают сразу перенести результат в код, документ или переписку поддержки.

✓ Большинство операций детерминированы: одинаковые входные данные и настройки дают одинаковый результат.

✓ Для чувствительных данных удобнее использовать локальные браузерные инструменты и проверять результат перед отправкой.

Поддерживаемые форматы

Сервис принимает эти форматы. Редкие контейнеры и современные веб-форматы при необходимости нормализуются или конвертируются на сервере перед обработкой.

SVG

Если файл поврежден или использует нестандартный кодек, обработка может завершиться ошибкой даже при поддерживаемом расширении.

Другие сервисы

Сравнение JSON

Конвертер JSON, YAML и TOML

Генератор UTM-меток онлайн

Генератор штрихкодов и листов этикеток онлайн

Просмотрщик 3D-моделей онлайн

Конвертер cURL

Отзывы пользователей

Отзывы проходят модерацию. Публикуем реальные положительные отзывы и конкретную критику. Спам и оскорбления без полезных подробностей не публикуем; мат и личные данные скрываем символами. Плюсы учитываются сразу, минусы — после проверки.

Отзывы описывают опыт пользователей и не гарантируют результат или отсутствие ограничений сервиса. Оставить отзыв можно с помощью кнопок оценки выше.

На этом языке пока нет опубликованных отзывов.

SVG в CSS и Data URI