このツールについて
生のSVGマークアップを貼り付けると、CSSやHTMLにそのまま貼れるデータURIが得られます。2つのエンコードを生成し、すべてブラウザ内で生成されるのでアップロードはありません。
URLエンコード出力は二重引用符を単一引用符に置き換え、encodeURIComponentを実行し、その後いくつかの安全な文字（スペース、コロン、スラッシュ、イコール）を復元してコンパクトで人間が読みやすい状態に保ちます。base64出力はSVGをUTF-8エンコードしてbtoaに通し、data:image/svg+xml;base64,… を生成します。バイト比較でどちらのエンコードが小さいかがわかります。ほとんどのアイコンではURLエンコード形式が有利です。
圧縮を有効にすると、エンコード前にコメントを除去しタグ間の空白を折りたたみます。CSS用にbackground-image行を、HTML用に<img src>行をコピーしてください。SVG内の引用符は単一引用符に正規化されるので、データURIを二重引用符で安全に囲めます。
よくある質問
URLエンコードとbase64、どちらを使うべきですか？
URLエンコードは通常より小さく、読みやすいままなのでデバッグに役立ちます。base64はより不透明ですが普遍的に受け入れられます。サイズ比較でここではどちらが小さいかがわかります。
なぜ二重引用符が単一引用符に変わったのですか？
属性の引用符は単一引用符に変換されるので、データURI全体を二重引用符で囲まれたurl("…")やsrc="…"の中にエスケープなしで置けます。どちらもSVGで有効です。
圧縮はSVGの見た目を変えますか？
いいえ。コメントを除去しタグ間およびタグ内の空白を折りたたむだけです。レンダリングされるベクターは同一で、ただ小さくなるだけです。
私のSVGはどこかにアップロードされますか？
いいえ。エンコードはencodeURIComponentとbtoaで完全にブラウザ内で実行され、マークアップがデバイスから出ることはありません。