SVG Optimizer
品質を失わずにファイルサイズを減らすためにSVGファイルを圧縮・最適化。コードをクリーンアップし、未使用の要素を削除し、プロダクション用に���小化します。
- ファイルサイズを減らす - 智能最適化でSVGを最大70%まで圧縮
- カスタマイズオプション - 精度を制御、コメントを削除、パスをクリーン
- 前後プレビュー - コードの比較とサイズ削減を即座に確認
- 100% プライベート - 全ての処理はブラウザ内でローカルに行われます
- バッチオプション - 10以上の設定オプションで最適化を微調整
ここにSVGファイルをドラッグ＆ドロップして変換
単一のSVGファイルのアップロードをサポート
使い方
以下の手順に従って、SVGファイルを効果的に最適化するガイドを進めてください
基本的なSVG最適化
2分デフォルト設定でSVGファイルを圧縮して最大限のファイルサイズ削減方法を学びましょう。
- 1
SVGファイルをアップロード
アップロードエリアをクリックするか、.svgファイルを指定エリアにドラッグ＆ドロップしてください。このツールはすべての有効なSVGファイルを受け入れます。
- 2
デフォルトオプションを確認
デフォルトの最適化設定はほとんどのSVGに適しています。精度は3桁に設定され、コメントの削除や未使用要素の削除などの一般的な最適化が有効です。
- 3
最適化を開始
'最適化を開始'ボタンをクリックしてください。このツールはSVGOライブラリを使用してブラウザ内でSVGを即座に処理します。
- 4
結果を確認してダウンロード
ファイルサイズの削減率と前後のコード比較を確認してください。満足したら、「最適化されたファイルをダウンロード」をクリックして.min.svgファイルを保存します。
最適化オプションのカスタマイズ
4分特定の使用例のための最適化設定を微調整する方法を学びます。
- 1
精度レベルの調整
パス座標の小数点以下の桁数を制御する精度スライダーを使用します。高い精度（4-6）= ファイルサイズが大きいがより正確。低い精度（1-2）= ファイルサイズが小さいが曲線に影響を与える可能性があります。
💡 Tip: アイコンやロゴの場合、2-3の精度が通常十分です。詳細なイラストの場合、4-5を使用してください。
- 2
最適化オプションの切り替え
特定の最適化を有効/無効にします：コメントの削除、隠された要素の削除、色の変換、パスの統合、グループの折り畳み、パスデータの変換。
- 3
パスデータ変換を無効にするタイミング
最適化されたSVGが歪んで見える場合は、「パスデータ変換」を無効にしてください。このオプションはパスを積極的に最適化しますが、複雑な曲線に影響を与える可能性があります。
- 4
テストと反復
最適化の後、SVGを視覚的に比較します。問題が発生した場合は、オプションを調整し、再最適化します。前後のプレビューは、何が変わったかを特定するのに役立ちます。
プロダクション向けの高度なSVG最適化
5分ウェブ開発とデザインシステムのためのSVG最適化のベストプラクティス。
- 1
アイコンシステム用
精度を2-3に設定し、「空のコンテナを削除する」、「グループを折り畳む」、および「パスを統合する」を有効にしてください。これにより、アイコンスプライトやインライン使用に最適な最小限のSVGが生成されます。
💡 Tip: 最適化後、異なるサイズでアイコンをテストして、ストロークの幅が一貫していることを確認してください。
- 2
イラストやアートワーク用
精度を4-5に設定し、'パスデータを変換する'を無効にして芸術的な曲線を保護します。'コメントを削除する'と'隠された要素を削除する'を有効にしておきます。
- 3
アニメーションSVG用
「グループを-collapseする」や「パスをmergeする」の設定には注意してください。これらはCSSやSMILアニメーションを破壊することがあります。SVGにアニメーションがある場合は、これらのオプションを無効にしてください。
- 4
アクセシビリティ用
最適化ではデフォルトでタイトルとdescタグを保護します。最適化後は常にスクリーンリーダーの動作をテストして、アクセシビリティが維持されていることを確認してください。
"このSVG最適化ツールは、プロダクションビルドに最適です！アイコンセットを500KBから150KBに減らしました - これは70%の削減です。ファイルサイズと視覚品質のバランスを見つけるための精度制御が素晴らしいです。"
"このツールを毎日使用して、デザインツールからのSVGエクスポートをクリーンアップしています。FigmaとIllustratorは常に多くの余分なデータを追加します - この最適化ツールはそれらすべてを取り除きます。前後のプレビューは確認に非常に役立ちます。"
"カスタマイズオプションがこのツールを特別にしています。異なる用途に合わせて精度を調整できます - 背景パターンには低精度、ロゴには高精度です。すべてローカルでサーバーへのアップロードはありません！"
"今までに見た中で最高のオンラインSVG最適化ツールです！「パス統合」および「グループ折り畳み」機能は、スプライトシート用アイコンセットの準備に最適です。私のアイコンライブラリは今や65%も小さくなりました。"
"Reactコンポーネント内にインラインSVGを使用し、ファイルサイズが重要です。この最適化ツールは私のコンポーネントパッケージを大幅に減らしました。パス変換を無効にして複雑な曲線を保護できることを大変気に入っています。"
"精度スライダーは私の仕事にとって画期的です。ファイルサイズと曲線の正確さのバランスを見つけることができます。詳細なイラストレーションには、精度4-5でパス変換を無効にすることをお勧めします。"
よくある質問
SVG最適化に関する一般的な質問の答えを見つけてください。