Advanced Background Optimization

スマートな最適化

SVGの品質を維持したまま、不要な空白、コメント、属性を自動的に削除してファイルサイズを最小限に抑えます。

複数の形式に対応

用途に合わせて、URLエンコードされたデータURI（軽量）またはBase64エンコード（高互換性）を選択できます。

ライブプレビュー

CSS背景としてSVGがどのようにレンダリングされるかをリアルタイムで確認し、完璧な見た目を保証します。

使い方

入力フィールドにSVGコードを貼り付けるか入力します

出力形式を選択し、必要に応じて最適化を有効にします

生成されたCSSコードとプレビューを確認します

プロジェクトで使用するためにCSSをコピーまたはダウンロードします

Technical Integration

Simply paste the generated CSS as a background-image property in your stylesheet. This allows you to use high-resolution, scaleable icons without external HTTP requests, improving performance and SEO.

FAQ

よくある質問

SVGデータURIとは何ですか？

データURIは、data: スキームを使用してSVGコードをCSSに直接埋め込む方法です。これにより、別個のSVGファイルが不要になり、HTTPリクエストを削減できます。

データURIとBase64、どちらの形式を使うべきですか？

通常はURLエンコードされたデータURIの方が可読性が高く、サイズも小さくなるため推奨されます。古いシステムや特定のツールとの互換性が必要な場合はBase64を使用してください。

最適化によってSVGの品質は変わりますか？

いいえ！最適化は不要な空白、コメント、冗長な属性のみを削除します。SVGの外見は全く変わりません。

どんなSVGでも使えますか？

はい、有効なSVGコードであれば動作します。ただし、画像やアニメーションが埋め込まれた非常に複雑なSVGの場合、CSSファイルが非常に大きくなる可能性があります。