SVGからCSSデータURIへのコンバータとは
生のSVGマークアップをCSSプロパティやHTML属性で動作するデータURIに変換します。URLエンコードとBase64エンコードの2つの方法をサポートしています。
クイックアンサー
SVGマークアップを貼り付けて、URLエンコードまたはBase64形式のCSS互換データURIを取得します。background-image、mask、img src、または生のデータURI。
Last updated: 2026-06-09
制限事項
- 約4KBを超えるデータURIは避けるべきです。
- このツールはSVG構文を検証しません。
- 一部のCSSプロパティはブラウザ固有の動作を示す可能性があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 入力エリアにSVGマークアップを貼り付けます。
- エンコード方法を選択します。URLエンコード（推奨）またはBase64。
- 出力形式を選択します。CSS background-image、CSS mask、img src、または生のデータURI。
- 生成されたコードをコピーしてスタイルシートまたはHTMLに貼り付けます。
主な用途
- HTTPリクエストを削減するためにCSS background-imageにSVGアイコンを直接埋め込みます。
- CSS mask-imageでSVGデータURIを使用します。
- 自己完結型のメールテンプレート用にHTML imgタグにSVGを埋め込みます。