Конвертер SVG в CSS
Преобразует SVG-код в CSS background-image data URI. Поддерживает форматы URL-кодирования и Base64.
Об этом инструменте
SVG to CSS Converter преобразует код SVG в формат данных URI для использования в свойствах CSS background-image, устраняя необходимость в отдельных файлах изображений или HTTP-запросах. Встраивая данные SVG непосредственно в таблицы стилей, вы снижаете внешние зависимости, улучшаете производительность загрузки страниц и упростите управление активами. Инструмент поддерживает форматы кодирования как URL, так и Base64, каждый из которых имеет отличительные преимущества в зависимости от ваших приоритетов производительности и предпочтений читаемости.
Чтобы преобразовать SVG в CSS, вставьте код SVG в поле ввода, выберите предпочитаемый метод кодирования и нажмите "Преобразовать". URL-кодированный формат создает более короткий вывод, который проще читать и отлаживать, а Base64 создает более компактное представление, которое лучше сжимается в gzip. Инструмент мгновенно показывает CSS-вывод и предпросмотр отрисованного SVG, помогая вам проверить преобразование перед копированием в таблицы стилей.
Этот подход особенно полезен для небольших значков, логотипов и простой графики, встроенной в веб-приложения. Сохраняя данные SVG в CSS, вы избегаете проблем с инвалидацией кеша, уменьшаете общее количество сетевых запросов и даже можете манипулировать свойствами SVG через CSS-псевдоклассы, такие как :hover и :active. Рассмотрите возможность сохранения сложных SVG в виде отдельных файлов для лучшей поддерживаемости, но встроенные данные URI хорошо работают для компонентов, которые редко изменяются.
Часто задаваемые вопросы
Реализация кода
import base64
from urllib.parse import quote
def svg_to_css_url_encoded(svg: str) -> str:
encoded = quote(svg, safe="")
return f'background-image: url("data:image/svg+xml,{encoded}");'
def svg_to_css_base64(svg: str) -> str:
b64 = base64.b64encode(svg.encode("utf-8")).decode("ascii")
return f'background-image: url("data:image/svg+xml;base64,{b64}");'
svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#6366f1"/></svg>'
print("URL encoded:")
print(svg_to_css_url_encoded(svg))
print()
print("Base64:")
print(svg_to_css_base64(svg))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.