SVGベクターをクリーンなCSSへ瞬時に変換。

上のStudioツールにSVGを貼り付けるかドラッグ＆ドロップしてください。SVG2CSSがブラウザ内で解析・サニタイズを行い、background-imageやmask-imageで直接使用できるURLエンコードされたData URI (data:image/svg+xml,...) を生成します。変換はすべてローカルで完結します。

CSS Mask出力タブを使用します。mask-imageおよび-webkit-mask-imageとbackground-color: currentColorを組み合わせることで、SVGの輪郭がステンシルとして機能し、CSSテキストカラーで塗りつぶされます。これにより、SVGを変更することなくCSSのみでホバー時やダークモード時の色を自在に変更できます。

URL構文において # はフラグメント識別子を表します。CSSのurl()内のData URIで #18181b のようなカラーコードがエスケープされていない場合、ブラウザは # の位置でURIの解析を終了し、画像が表示されなくなります。# を %23 に置換することで、RFC 3986標準に準拠した安全な文字列となり、すべてのブラウザで正しく描画されます。

Tailwindの任意値構文 bg-[url(...)] を使用します。ただし、任意値内にスペースを含めることはできません。SVG2CSSはスペースをアンダースコア (_) に自動置換し、Tailwind v3およびv4でそのまま動作するクラスを生成します。

いいえ。SVG2CSSはサーバー不要のゼロバックエンドアーキテクチャを採用しています。解析、サニタイズ、SVGO最適化、エンコードの全工程がブラウザのJavaScript APIのみで実行され、外部ネットワークにデータが送信されることはありません。

標準のmask-imageは、Chromiumベースの全ブラウザ、Firefox、Safariでサポートされています。iOS WebKitや旧バージョンのSafariとの完全な互換性を確保するため、SVG2CSSは標準プロパティと-webkit-プレフィックス付きプロパティの両方を自動出力します。

CSSスタイルシートにはURLエンコードSVGが推奨されます。Base64はバイナリ変換によりデータサイズが約33%増加し、Gzip/Brotliでの圧縮効率も劣ります。URLエンコードSVGは可読性のあるXML構造を維持し、高圧縮率を実現します。Base64は主に古いHTMLメールクライアント向けです。

はい。HTML内に直接埋め込まれたインラインSVG要素は、通常のHTML要素と同様にCSS (fill, stroke, アニメーション, CSS変数) でスタイル設定できます。本ツールのSVG to CSS変換は、スタンドアロンのSVGファイルをData URIに変換し、HTML内にXMLを埋め込まずに背景やマスクとして利用するための手法です。

StudioツールでSVGをData URIに変換し、background-image: url('data:image/svg+xml,...'); として設定します。サイズ調整には background-size: contain;、リピート防止には background-repeat: no-repeat;、位置調整には background-position: center; を追加します。

線画アイコンの場合、変換前にSVGが stroke="#000" かつ fill="none" になっていることを確認してください。CSS Maskタブ (mask-image と background-color: currentColor) を使用すると、線の輪郭がステンシルとなり、CSSのcolorプロパティで色を制御できます。

コンテナ要素に明示的なwidthとheightを指定し、background-size: contain; (または-webkit-mask-size: contain;) を指定して縦横比を維持しながら拡縮します。コンテナ全体を覆うには cover を、パターンリピートには repeat を使用します。

インライン化は、HTTPリクエストを削減してちらつきを防ぎたい小さなUIアイコン (< 10 KB) に最適です。一方、大容量で複雑なイラスト (> 10〜15 KB) や特定ページのみで使われる画像は、CDNやブラウザで個別にキャッシュ可能な外部ファイルとしての保持が適しています。

はい。SVG2CSSは双方向のリバースデコードをサポートしています。URLエンコードされたData URI（data:image/svg+xml,...）、Base64文字列、またはCSSのbackground-image宣言を入力欄に貼り付けると、自動で解析・デコードし、クリーンなSVG XMLを復元してダウンロードできます。

はい、特にUIアイコンに有効です。CSS内にインライン化することで独立したHTTPリクエストがなくなり、レイアウトのズレ（CLS）を防ぎ、Largest Contentful Paint（LCP）を短縮できます。ただし15KBを超える大判イラストは、個別キャッシュ可能な外部ファイルとして読み込むのが最適です。

SVGにviewBox属性がないか、固定のpx単位のwidth/heightが設定されている場合にぼやけが発生します。高解像度画面で鮮明に表示するには、SVGにviewBox="0 0 width height"を含め、CSSでbackground-size: contain; または 100% 100%; と background-repeat: no-repeat; を指定してください。