SVGをドラッグ＆ドロップ
またはクリップボードから貼り付け
Advertisement
SVG軽量化・最適化ツールでできること
デザインツールから出力されたSVGには、エディタ専用の情報やコメントが多く含まれており、ソースコードが複雑になりがちです。 本ツールは、「SVGコードを徹底的にクリーンにする軽量化機能」と、「コードを直接触らずに見た目を調整するビジュアル編集機能」を融合させました。 Web制作におけるアイコンの微調整や、Lighthouseのパフォーマンス改善に最適な「開発者のためのSVGワークベンチ」です。
こんなシーンで便利です
WebサイトのCore Web Vitals改善
不要なコードを極限まで削ぎ落とすことで、ドキュメントのパース時間を短縮し、Webサイト全体の高速化を実現します。
アイコンの色・線幅のトンマナ統一
外部サイトから調達したSVG素材を、自社のブランドカラーやデザインシステムの線幅に合わせて一括でリデザインします。
インラインSVGのソース整理
HTMLに直接埋め込むインラインSVGからIDや不要な属性を削除し、メンテナンス性の高いクリーンなコードに変換します。
アセットのバリエーション制作
1つのSVGソースから、反転・回転・スケーリングを組み合わせて、方向やサイズの異なる複数のアセットを素早く書き出せます。
使い方は簡単 5ステップ
- SVGファイルをエリアにドラッグ＆ドロップ、またはコードを直接貼り付けます。
- 瞬時に不要なXML宣言やメタデータが削除され、プレビューが表示されます。
- 「スタイル調整」パネルで、塗りつぶし色、線の太さ、不透明度を調整します。
- 「変形ツール」で、必要に応じて回転・スケール・上下左右反転を適用します。
- 「SVGコードをコピー」で即座に実装に使うか、「ファイルを保存」でダウンロードします。
※プレビューはリアルタイム。変形を加えてもパスデータとして最適化された状態で出力されます。
ご利用時の注意点
- コードの最適化：デフォルトでID、メタデータ、独自のXML属性を削除します。
- 一括スタイリング：現在は <path> タグを含むSVG要素に対して一括でカラーと線幅を適用します。
- プライバシー：アップロードされたファイルはサーバーへ送信されず、完全にローカルで処理されます。
Advertisement
SVG最適化・書き出し形式の比較と使い分け
制作環境（Figma/Ai）からWeb実装へ移行する際の、最適なコード形式の選び方です。
| 用途・実装形式 | ファイルサイズ | SEO・表示速度 | 推奨シーン |
|---|---|---|---|
| Optimized SVG (本ツール) | 極小 (Minified) | ◎ 最速・Lighthouse満点 | Webサイトのアイコン・ロゴ |
| Raw Export (Figma/Ai) | 肥大化 (Meta付) | △ 低速・不要コード多 | デザインデータの一時保存 |
| SVG to JSX (React) | 標準 | ○ コンポーネント化に最適 | Next.js / React開発での実装 |
| Data URI (CSS) | 1.3倍 (Base64換算) | ◎ リクエスト数削減 | 背景パターン・疑似要素(::before) |
| Inline SVG (HTML) | 小 | ○ クロール対象になる | SEO重視のロゴ・重要パーツ |
Figma / Illustratorのクリーンアップ
デザインツールから書き出した直後のSVGには、xmlns:odmやadobe:nsといったWeb表示には不要なメタデータが大量に含まれています。これらをMinify（圧縮）することで、ファイルサイズを30%〜60%以上削減し、Core Web Vitalsのスコア改善に貢献します。
エンジニアに嬉しい「色・変形」の一括操作
「もらったアイコンの色を1文字変えたいだけなのにコードを追うのが面倒」という場面に最適です。fill属性やstrokeを一括変換し、CSSクラスを付与しやすいクリーンなパスデータとして出力します。
よくある質問（FAQ）
Q.特定の色だけを残して軽量化できますか？
A. そのまま何も操作せずに「保存」を行えば、元の色情報を維持したまま軽量化のみが行われます。カラーピッカーを操作すると、全てのパスが指定色に上書きされます。
Q.変形（回転・反転）はコードに反映されますか？
A. はい。transform属性としてSVGタグ内に書き込まれるため、書き出したファイルやコピーしたコードはそのままの見た目で利用可能です。
Q.Lighthouseの指摘を解消できますか？
A. ファイルサイズの削減に加え、不要な属性の削除によりブラウザのレンダリング負荷を軽減できるため、パフォーマンススコアの改善に有効です。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。