ベクターデータをWeb用に完全最適化。 不要なコードの削ぎ落とし（Minify）から、色の一括編集、回転・反転、スケール調整まで、インストール不要で瞬時に実行できます。
SVGをドラッグ＆ドロップ
またはクリップボードから貼り付け
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要素に対して一括でカラーと線幅を適用します。
- プライバシー：アップロードされたファイルはサーバーへ送信されず、完全にローカルで処理されます。
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クラスを付与しやすいクリーンなパスデータとして出力します。
SVGアニメーションとコンポーネント設計を効率化する実装フロントエンドノウハウ
軽量化されたベクターデータをNext.jsやReact環境へ組み込み、CSSやJavaScriptを用いた動的制御をシームレスに行うための実践的なフロントエンドアーキテクチャを構築します。
CSS変数とcurrentColorを組み合わせた動的カラー制御とデザインシステム統合
本ツールでfill属性やstroke属性を整理したSVGコードは、インライン配置時にcurrentColorを指定することで、親要素のCSS text-colorと完全に連動させることが可能です。
これにより、ホバーアニメーションやダークモード対応時の色変更をJavaScript側で行う必要がなくなり、CSSの1プロパティのみでスタイル定義を完結できるため、デザインシステムと共通UIコンポーネントの保守性が劇的に向上します。
Next.js環境におけるSVGRマクロを活用したコンポーネント化とビルド最適化
大量のSVGアセットをインライン形式で管理する場合、手動でJSXに変換するのではなく、SVGRプラグインをWebpackedビルドプロセスに組み込むのが最適です。
最適化済みのSVGファイルをそのままReactComponentとしてインポートするパイプラインを構築することで、Next.jsのチャンクサイズ肥大化を防ぎつつ、TypeScriptの型安全性を担保したベクター実装が可能になります。
Webパフォーマンスを限界まで高めるHTTP2マルチプレクシングとSVGスプライトの選定基準
インライン埋め込みはHTMLソースの容量自体を増加させるため、同一ページ内で同じSVGを5回以上使い回す場合は、外部アセット化してSVGスプライト形式（use要素での参照）に移行すべきです。
現代のHTTP2やHTTP3通信環境では、マルチプレクシングによってファイル分割時の並行ダウンロード負荷が低いため、HTMLサイズとHTTPリクエスト数のバランスを考慮したアーキテクチャの選定がWebサイトの高速化において極めて重要となります。
よくある失敗と対策
FigmaやIllustratorのメタデータをそのまま放置しCore Web Vitalsのスコアを落とす
FigmaやAdobe Illustratorから書き出したRAWデータを最適化（Minify）せずにWebサイトにインラインSVGとして埋め込んでしまい、xmlns:odmやadobe:nsなどの不要なXMLエディタ情報や非推奨なコメントタグによってHTMLのファイルサイズが肥大化し、GoogleのLighthouseパフォーマンス評価やCore Web Vitalsのパース時間が悪化する失敗です。
💡 対策・解決策を見る▼
SVGコード内のID属性（id=""）の重複によるHTMLバリデーションエラーとCSS崩れ
同じSVGアイコン（グラデーションやマスク、クリップパス記述を含むもの）を1つのWebページ内に複数インライン配置した際、デザインツールが自動生成した共通のID属性が重複してしまい、HTMLのDOMツリー内で競合が発生、結果としてグラデーションが消える、SVGの色が黒くなる、あるいはCSSスタイリングがバグるといったマークアップ上の不具合を招く失敗です。
💡 対策・解決策を見る▼
レスポンシブWebデザインでviewBox属性を削除してしまい表示が崩れる・見切れる
SVGのファイルサイズ削減やコードの単純化を急ぐあまり、アスペクト比（縦横比）と描画領域を定義する最も重要な「viewBox属性」まで一緒に削除してしまうケースです。これを行うと、CSS（width / height）でサイズ可変にした際にベクター画像がレスポンシブに追従せず、アセットが引き伸ばされたり、枠内から完全に見切れたりするバグが発生します。
💡 対策・解決策を見る▼
インライン埋め込みとCSS背景（Data URI形式）の選定を誤りHTTPリクエスト数が爆発
Webサイトの表示速度を高速化する目的で、ページ全体のロゴやアニメーション付きの複雑なSVGグラフィックをすべてCSSのbackground-image（url("data:image/svg+xml;base64,...")）に変換してしまい、スタイルシート全体のパース負荷を劇的に高めてしまったり、逆に数十個の小さなアイコンをすべて個別ファイルとしてimgタグで読み込んでHTTPリクエスト（リクエスト数）を爆発させる選定ミスの失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.アップロードしたファイルやSVGコードが外部に漏洩する心配はありませんか
A. 一切ありません。本ツールは全ての処理をユーザーのブラウザ上で動くJavaScriptのみで完結させており、入力されたファイルやソースコードを外部サーバーに送信または保存する仕組みは存在しません。ページを閉じればデータはメモリ上から完全に消去されるため安心してご利用いただけます。
Q.デザインツールの書き出しデータに含まれるメタデータとは具体的に何ですか
A. FigmaやIllustratorなどのソフトが内部管理用に出力する、独自の編集情報、XML宣言、エディタ専用の属性やコメントのことです。これらはWebブラウザでの表示には不要なコードであり、本ツールで一括削除（Minify）することで描画パフォーマンスを向上させます。
Q.スタイル調整パネルで色や線幅が適用される対象の要素を教えてください
A. 塗りつぶし色や線の太さの一括変更機能は、SVGファイル内のpathタグを含むベクター要素に対してリアルタイムに適用されます。外部の素材サイトからダウンロードしたアイコンなどのカラーやトンマナを自社のデザインシステムに統一したい場合に役立ちます。
Q.軽量化処理を実行した後にレスポンシブ対応の伸縮性は維持されますか
A. はい、維持されます。本ツールの最適化ロジックは、画像の縦横比や描画領域を定義する重要な属性であるviewBoxを確実に保持したまま、不要なコードのみをクリーンアップします。そのため、CSSでサイズを可変に指定しても、画像が見切れたり歪んだりすることはありません。
Q.回転や反転などの変形を適用した後のコードはどうなりますか
A. 変形を加えた後のコードも、すべてパスデータとして再計算および最適化されたクリーンな状態のSVGコードとして出力されます。そのため、そのままHTMLへのインライン埋め込みやアセットファイルとしてのダウンロードを行って、すぐにWeb制作の実装環境へ組み込めます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。