SVGコードビューワー - クリーンなSVGマークアップを検査してコピー
SVGファイルをアップロードしてベクターを視覚化し、構造を分析し、フォーマットされたコードを即座にコピー。
SVGコードビューワーを使う理由
即座のプレビュー
SVGアートワークを即座にレンダリングして色、ストローク、形状を検証。
読みやすいマークアップ
XMLを自動的にクリーンなインデントでフォーマットしてレビューを容易に。
迅速な検査
パス、グループを数え、ビューボックス/寸法を一目で検出。
安全＆ローカル
SVG処理はブラウザで実行され、何もアップロードや保存されません。
SVGファイルをアップロード
ここにSVGをドロップ
5MBまでのSVGファイルのみ対応。ファイルはブラウザ外に送信されません。
またはこのボックスにドラッグ＆ドロップ。
フォーマットされたSVGマークアップ
Advertisement
SVGコードの表示方法
1
SVGをアップロード
SVGファイルを選択するか、アップロードボックスにドラッグ。
2
プレビューと統計を確認
ライブプレビューと構造カウンター（パス、グループ、ビューボックス）を検査。
3
コピーまたはダウンロード
フォーマットされたコードをコピーするか、クリーンアップされたSVGを即座にダウンロード。
よくある質問
いいえ。すべての解析とフォーマットはブラウザ内でローカルに実行されるため、ベクターがデバイスから離れることはありません。
このツールは可読性に焦点を当てています。コードを検査した後、より小さいバージョンが必要な場合はSVGミニファイアで実行できます。
5MBまでのSVGファイルに対応しており、アイコン、ロゴ、イラストの大半をカバーします。
報告されたビューボックスと寸法を確認してください。埋め込みアプリはこれらの値に依存してグラフィックを正しくスケーリングすることがよくあります。
SVGコードビューワーとは？
SVGコードビューワーは、重いデザインソフトウェアをインストールせずに、ベクターファイルを開き、構造を確認し、クリーンなマークアップをコピーできます。エクスポートされたアイコンを検査したり、コードスニペットを素早く共有したりする必要があるエンジニアやデザイナーに最適です。
なぜSVGマークアップをオンラインで検査するのか？
SVGコードをオンラインで検査することで、アクセシビリティを検証し、マークアップを最適化し、ベクターエディターからの肥大化したエクスポートを回避できます。フォーマットされたコードをデザインシステム、ドキュメント、または本番コードベースに直接コピーすることで時間を節約できます。