При вставке SVG в React появляется ошибка.

В JSX атрибуты пишутся в camelCase — strokeWidth вместо stroke-width. Экспорт в JSX переименует атрибуты автоматически.

Как использовать SVG в качестве фона в CSS?

Преобразуйте его в Data URI и вставьте строку прямо в background-image: url(...); дополнительного сетевого запроса не будет.

Редактор и конвертер SVG

Редактирование SVG кода, изменение цветов, оптимизация и конвертация в React JSX или PNG.

SVG Preview ViewportWidth: 150px | Height: 150px

Drag SVG file inside or click Upload to select a file.

Размеры и viewBox

Width (px)

Height (px)

viewBox (min-x, min-y, width, height)

Извлеченные цвета (0)

No color attributes detected in this SVG.

Редактирование SVG и конвертация кода

SVG — это векторное изображение, записанное текстом, поэтому его можно править напрямую. Меняйте цвета, удаляйте метаданные, чтобы уменьшить файл, и экспортируйте результат как React-компонент (JSX), Data URI для вставки в CSS или растровый PNG.

Как пользоваться

Вставьте код SVG или загрузите файл.
Настройте цвета и размер, затем примените оптимизацию.
Экспортируйте в JSX, Data URI или PNG.

Часто задаваемые вопросы

При вставке SVG в React появляется ошибка.: В JSX атрибуты пишутся в camelCase — strokeWidth вместо stroke-width. Экспорт в JSX переименует атрибуты автоматически.
Как использовать SVG в качестве фона в CSS?: Преобразуйте его в Data URI и вставьте строку прямо в background-image: url(...); дополнительного сетевого запроса не будет.