SVG 最適化ツール
SVG のメタデータやスクリプトを除去して圧縮し、React JSX に変換できます。
SVG入力
ここにSVGファイルをドラッグ＆ドロップします
オプション
出力
Input: 0 bytes
Output: 0 bytes
SVG背景CSS
プレビュー
JSX 出力のプレビューは利用できません
オンライン SVG オプティマイザーを使用する理由
スケーラブル ベクター グラフィックス (SVG) は、最新の Web デザインに不可欠であり、どの解像度でも鮮明なビジュアルを提供します。ただし、Illustrator、Figma、Sketch などのツールからエクスポートされた生の SVG ファイルには、ファイル サイズを肥大化させる不要なメタデータ、コメント、非表示属性が含まれていることがよくあります。当社の SVG Pro ツールは、ページの読み込みを高速化し、コードベースをクリーンにするために SVG をクリーンアップ、縮小、最適化する を支援します。
開発者向けの機能
- SVG から JSX への変換: 標準の SVG 属性 (
class、stroke-widthなど) を React 互換の JSX (className、strokeWidth) に自動的に変換します。 Next.js および React アプリに最適です。 - セキュリティサニタイズ: ユーザーがアップロードした SVG を使用する際の XSS 攻撃を防ぐために、
<script>タグやインライン イベント ハンドラー (onclickなど) などの悪意のあるコードを除去します。 - CSS背景ジェネレーター: SVG を CSS 背景画像として使用するための最適化されたデータ URI スニペットを即座に生成します。
最適化手法
- メタデータを削除します。 ブラウザーに必要のない XML ヘッダー、Doctype、およびエディターのメタデータ (Adobe Illustrator、Inkscape) を削除します。
- クリーン属性: ファイル サイズを減らすために、明示的なデフォルト値と不要な ID を削除します。
- 構造を縮小する: コメントを削除し、空白を安全に折りたたんでください。
よくある質問
SVG を React コンポーネントに変換するにはどうすればよいですか?
SVG をアップロードするかコードを貼り付けて、「JSXに変換」 オプションをチェックするだけです。このツールはキャメルケース属性を適用し、class を className に置き換えて、すぐに貼り付けられる React コンポーネントを提供します。
この SVG オプティマイザーは安全に使用できますか?
はい。 SVG Pro は完全にブラウザ内で動作します。ファイルがサーバーにアップロードされることは決してないため、独自の資産とデータはプライベートかつ安全に保たれます。
SVG ファイルのサイズが非常に大きいのはなぜですか?
SVG ファイルには、非表示レイヤー、エディター固有のメタデータ、パス データの過剰な精度など、デザイン ソフトウェアで残された「不要な部分」が含まれていることがよくあります。 SVG を検証して縮小すると、多くの場合、視覚的な損失なしにファイル サイズを 30 ～ 70% 削減できます。