開発
SVG最適化・Vue/Reactコンポーネント化
無料・日本語・ローカル動作（Windows / macOS）
SVGを軽量化しVue/Reactコンポーネントやスプライトに変換できる最適化ツールです。
今すぐ使えます
このツールを無料でダウンロード
お使いのOSを選ぶだけで始められます。処理はPCの中で行い、ツール本体に広告は入りません。
- 無料で使える
- ファイルはPC内で処理
- ツール本体に広告なし
- 元ファイルを残して保存
すべてのバージョン・SHA-256Windows 版は準備中
macOS で開けない・「開発元を確認できません」と表示されるとき
macOS Sequoia（15）以降は、初回起動時に次の操作が必要です。Apple の公証前であることが理由で、安全性に問題はありません（ファイルは外部に送信されません）。
- アプリを「アプリケーション」フォルダに移動します。
- アプリをダブルクリックし、警告が出たら「完了」を押します（「ゴミ箱に入れる」は選ばないでください）。
- 「システム設定」→「プライバシーとセキュリティ」を開き、下部の「セキュリティ」にある「"（アプリ名）" は…ブロックされました」の右の「このまま開く」をクリックします。
- Touch ID またはパスワードで認証し、確認ダイアログで「このまま開く」を押します。次回からは通常どおり起動できます。
macOS Sonoma（14）以前では、アプリを右クリック →「開く」→「開く」でも起動できます。
うまくいかないときは、ターミナルで xattr -dr com.apple.quarantine と入力し（末尾に半角スペース）、続けてアプリのアイコンをターミナルにドラッグ＆ドロップして Enter を押すと解除できます。
SVG を SVGO で軽量化し、Vue/React コンポーネントや SVG スプライトへ一括変換できる開発者向けツールです。size/color を props 化し currentColor ベースの再利用しやすいコンポーネント雛形を出力します。完全ローカルで動作し、最適化前後の削減バイト数をプレビューで確認できます。
こんな悩みを解決します
- —デザイナーから受け取った大量アイコン SVG をまとめて軽量化しリポジトリへ追加する
- —Vue/React プロジェクトで色とサイズを変えられるアイコンコンポーネントを量産する
- —複数アイコンを 1 つのスプライトに束ねて HTTP リクエストを削減する
主な機能
- SVGO による SVG 軽量化と削減率表示
- 複数 SVG の一括最適化（失敗はスキップしレポート）
- Vue SFC コンポーネント雛形出力（size/color props 化）
- React TSX コンポーネント雛形出力（属性 camelCase 化）
- 複数 SVG を symbol 結合した SVG スプライト出力
- 最適化前後のプレビューと削減バイト数表示
- 別フォルダ既定出力で上書き回避
使い方
- 01ファイルをドラッグ&ドロップ、またはクリックで選択します。
- 02必要な設定を選び、実行ボタンを押します。
- 03別フォルダに結果を出力。元のファイルは変更しません。
よくある質問
既定では optimized/ 別フォルダへ出力し元ファイルは保持します。上書きは明示選択時のみです。
