SVG最適化ツール
ツールの説明
SVG (Scalable Vector Graphics) はXMLベースのベクターグラフィック形式で、ウェブ開発で広く使用されています。しかし、Adobe IllustratorやSketchなどのデザインソフトウェアからエクスポートされたSVGファイルには、エディターメタデータ、コメント、空のグループ、デフォルト属性など、多くの冗長情報が含まれていることがよくあります。
SVG最適化ツール は、これらの不要なコードを削除し、ファイルサイズを大幅に縮小して、ウェブページの読み込み速度とパフォーマンスを向上させることを目的としています。
コア機能:
- リアルタイムコード比較: SVGコードを貼り付けると、左右の列で「最適化前」と「最適化後」がすぐに比較されます。
- ファイルサイズ分析: 元のファイルと最適化後ファイルのサイズ(KB)と縮小率をリアルタイムに表示します。
- 安全性とプレビュー: 最適化プロセスはブラウザ内でローカルに完了し、ファイルはアップロードされません。右側のプレビュー機能により、最適化後のSVGのレンダリング効果が元のファイルと完全に一致することを確認できます。
何を削除しますか?
- エディターメタデータ(e.g., `illustrator` タグ)
- コメント (
<!-- ... -->
) と空のグループ (<g></g>
) - 不要な属性、デフォルトの `fill="black"`
- パスデータの最適化、座標データの長い文字列を簡略化
重要注意事項
まれなケースでは、過度な最適化がSVGのレンダリングに影響を与える可能性があります。最終効果が期待通りであることを確認するために、常にプレビュー機能を使用してください。