SVGツールキット 画像

7つの機能

• ⚡ 最適化: SVGOアルゴリズム準拠の不要属性削除・小数点精度調整・コメント除去でサイズ大幅削減
• 🖼 PNG/JPG変換: SVGをラスター画像に変換。出力サイズ・背景色指定可
• 🎨 CSS data URI: Base64エンコードでCSS background-image に直接埋込可
• 🎨 CSS URL Encode: data URIより軽量なURLエンコード形式 (CSS推奨)
• ⚛ React JSX: SVGをReactコンポーネントに変換 (className/属性名camelCase変換)
• 📦 Minify: 改行・余白除去で最小サイズに圧縮
• 分析情報: 寸法・viewBox・要素数・サイズ・最適化後のサイズ削減率

素人〜玄人みんなが使える

• 素人: サンプルクリック→PNG変換→ダウンロードで簡単に使える
• 中級: 自作SVGをCSS background-image に埋込・最適化でWebサイト軽量化
• 玄人: SVGOクラスの最適化・React JSX変換でフロントエンド開発高速化

典型的な用途

• Figma/Illustrator 書き出しSVGの軽量化 (元サイズの30〜70%削減が一般的)
• CSS背景画像 (data URI / URL Encode) でHTTPリクエスト削減
• React/Vue/Svelte 等のフレームワーク用にSVGコンポーネント化
• SNS投稿用・印刷用にPNG/JPG変換
• SVGアイコンセットの一括処理

セキュリティ

• すべての処理がブラウザ内で完結。SVGデータは外部に送信されません
• 悪意あるSVG (script要素・on*イベント属性) はプレビュー時に自動除去 (DOMPurify相当の処理)

data URI vs URL Encode

• data URI (Base64): 互換性が高い。古いブラウザでも動く。サイズが約1.37倍に増加
• URL Encode: モダンブラウザ向け。Base64より平均30%小さい。CSS用に推奨