SVG to CSSコンバーター
SVGコードをCSS background-imageデータURIに変換します。URLエンコードとBase64形式をサポートします。
このツールについて
SVG to CSS Converterは、SVGコードをデータURI形式に変換してCSS background-imageプロパティで使用できるようにするツールで、別個の画像ファイルやHTTPリクエストが不要になります。SVGデータをスタイルシートに直接埋め込むことで、外部の依存関係を減らし、ページロードのパフォーマンスを向上させ、アセット管理を簡素化できます。このツールはURL エンコードとBase64エンコーディング形式の両方をサポートしており、パフォーマンスの優先順位と可読性の好みに応じてそれぞれ異なる利点があります。
SVGをCSSに変換するには、SVGコードを入力領域に貼り付けて、推奨されるエンコーディング方式を選択し、「Convert」をクリックします。URLエンコード形式は読みやすくデバッグしやすい短い出力を生成し、Base64はgzipでより効率的に圧縮される、よりコンパクトな表現を作成します。このツールはCSS出力とレンダリングされたSVGのライブプレビューを即座に表示するため、スタイルシートにコピーする前に変換を確認するのに役立ちます。
このアプローチは、ウェブアプリケーションに埋め込まれた小さいアイコン、ロゴ、シンプルなグラフィックスに特に便利です。SVGデータをCSSに保つことで、キャッシュ無効化の問題を避け、総ネットワークリクエストを削減でき、さらに:hoverや:activeなどのCSSに疑似クラスを通じてSVGプロパティを操作することもできます。複雑な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.