デザインツールの書き出し
入力: Figma、Illustrator、Sketchなどのエディタから書き出したSVGです。
おすすめ: まずBalancedモードでメタデータ、重複グループ、空白、不要な属性を整理します。
確認ポイント: 元ファイルとプレビューを比べ、塗り、線、サイズが正しく見えるか確認します。
SVGをすぐに最適化
SVG ファイルをドロップすると、より軽くクリーンな結果をすぐに取得できます。
ファイルはブラウザ内でのみ処理されます。どのファイルもサーバーへアップロードされません。
アカウントは不要で、データも保存されません。
ローカル処理サーバーアップロードなしログイン不要
最適化モード
SVGKIT が SVG をどれくらい強く整理するかを選べます。
SVG ファイルをドロップ
SVGKIT がメタデータや不要なマークアップを整理し、すぐに使える軽い SVG を準備します。
SVG を選択またはドラッグ＆ドロップ
SVG 専用 · メタデータ整理 · 構造整理 · マークアップ圧縮
ドキュメント
最適化前に軽く確認する
SVG の整理で何を減らせるか、ファイルサイズが重要な場面、最適化後の確認方法を学べます。
SVG をすぐに圧縮
SVGKIT はアップロード直後に不要なメタデータを削除し、冗長なマークアップを整理し、パスデータを簡潔にします。多数の設定を触らずに軽い SVG を得ることが目的です。
品質を保ちながら SVG を軽量化
ラスター圧縮と違い、SVG の最適化は無損失で行えることが多いです。SVGKIT は構造整理に集中し、曲線や塗り、レイアウトを保ちながら容量だけを減らします。
SVG コードをクリーンに整理
デザインツールから書き出された SVG には、エディタのメタデータ、空のグループ、冗長なパス、既定属性が含まれがちです。SVGKIT はそうしたノイズを取り除き、何が変わったかを示します。
SVGKITが整理するもの
オプティマイザーは、コメント、隠れたメタデータ、不要なグループ、重複属性、余分な空白、最終表示に役立たないマークアップを減らせます。目的は、使用前に確認しやすく、より軽いファイルにすることです。
最適化モードの選び方
多くのWebアセットではBalancedが安全な既定値です。ファイルサイズを最優先する場合はSmallest、あとでデザイナーや開発者が修正する可能性がある場合はEditableが向いています。
公開前に結果を確認
SVGKITは視覚プレビュー、コード表示、結果統計をまとめて表示し、ダウンロード前に元ファイルと最適化後を比較できるようにします。公開前に想定外の変化を見つけやすくなります。
SVG 最適化の流れ
ファイルはまず解析され、その後メタデータ削除、タグ整理、属性整理、パス簡略化、圧縮の順に処理されます。インサイトパネルには実際に行われた処理が反映されます。
プライバシーとローカル処理
ファイルはブラウザ内でのみ処理されます。サーバーへのアップロードはありません。アカウント不要、データ保存もありません。
最適化例と確認ポイント
SVG最適化はバイト数を減らすだけではありません。最終ファイルは正しく表示され、再利用方法にも合っている必要があります。
共通UIアイコン
入力: ナビゲーション、ボタン、カード、製品UIで繰り返し使うアイコンです。
おすすめ: コードベースへ入れる前に最適化し、複数箇所で使うアイコンほど先に整理します。
確認ポイント: パス数とコード表示を確認し、保守しにくいほど複雑になっていないか見ます。
編集予定のブランド資産
入力: 後でデザイナーが再編集する可能性があるロゴやイラストです。
おすすめ: 最小サイズより構造の保持が重要な場合はEditableモードを使います。
確認ポイント: 元ソースと配布用に最適化したSVGを分けて保管すると、後の修正経路を追いやすくなります。
使い方
- 1
SVG ファイルをアップロードします。
- 2
SVGKIT がマークアップと構造を解析します。
- 3
SVGKIT が不要なメタデータや冗長なマークアップを整理します。
- 4
最適化結果とインサイトをすぐに確認します。
- 5
整理された SVG をそのままダウンロードします。
よくある質問
SVG最適化とは何ですか？
SVG最適化は、不要なメタデータを削除し、マークアップ構造を整え、見た目をできるだけ保ちながらファイルを軽くする処理です。SVGKITは複雑な設定よりも構造整理を重視します。
SVGのファイルサイズはどうやって減らしますか？
SVGをアップロードし、SVGKITがマークアップを解析して整えた結果を確認した後、そのままダウンロードします。SVGKITは不要なコードやメタデータを減らして、より軽いSVGを準備します。
SVG最適化で品質は落ちますか？
多くの場合、目に見える品質低下はほとんどありません。SVG最適化は通常、見た目よりも構造や冗長なマークアップの整理に重点を置き、SVGKITもグラフィック自体は維持する方向で動きます。
SVGKITはSVGファイルをサーバーにアップロードしますか？
いいえ。SVGKITはSVGファイルもブラウザ内でローカル処理し、サーバーアップロードは行いません。このツールはファイル選択からダウンロードまでブラウザ中心で完結します。
SVGKITはどのような整理を行いますか？
メタデータ削除、属性整理、パス簡略化、空白圧縮、構造整理などを行えます。インサイト一覧で実際に適用された処理を確認できます。
SVG最適化でメタデータも削除されますか？
はい。削除可能なメタデータがあれば整理されます。SVGKITは不要な編集情報を減らし、ファイルを確認しやすく再利用しやすい状態にします。
本番用のSVGにも最適化は役立ちますか？
多くの場合役立ちます。デザインツールから書き出したSVGには余分な属性やマークアップが含まれやすく、SVGKITはそれらをより扱いやすいWeb向けの形に整えるのに向いています。
最適化したSVGはすぐにダウンロードできますか？
はい。SVGKITは処理後に結果をプレビューし、必要ならコードも確認した上で、最適化済みSVGをすぐにダウンロードできるようにします。