SVGコードビューワー - クリーンなSVGマークアップを検査してコピー
SVGファイルをアップロードしてベクターを視覚化し、構造を分析し、フォーマットされたコードを即座にコピー。
SVGファイルをアップロード
ここにSVGをドロップ
5MBまでのSVGファイルのみ対応。ファイルはブラウザ外に送信されません。
またはこのボックスにドラッグ＆ドロップ。
フォーマットされたSVGマークアップ
使用例
シンプルなSVGアイコン
単一のpolygon要素で作成された基本的な五芒星の形。
<svg viewBox="0 0 100 100" xml...
グラデーション付きSVGロゴ
モダンな外観のためにリニアグラデーションを使用した円形ロゴ。
<svg viewBox="0 0 100 100" xml...
SVGアニメーション
SVG animateTransformを使用して回転する四角形要素。
<svg viewBox="0 0 100 100" xml...
SVGコードビューワーを使う理由
即座のプレビュー
SVGアートワークを即座にレンダリングして色、ストローク、形状を検証。
読みやすいマークアップ
XMLを自動的にクリーンなインデントでフォーマットしてレビューを容易に。
迅速な検査
パス、グループを数え、ビューボックス/寸法を一目で検出。
安全＆ローカル
SVG処理はブラウザで実行され、何もアップロードや保存されません。
SVGコードの表示方法
SVGをアップロード
SVGファイルを選択するか、アップロードボックスにドラッグ。
プレビューと統計を確認
ライブプレビューと構造カウンター（パス、グループ、ビューボックス）を検査。
コピーまたはダウンロード
フォーマットされたコードをコピーするか、クリーンアップされたSVGを即座にダウンロード。
よくある質問
SVGコードビューワーとは？
SVGコードビューワーは、ベクターファイルを開いてライブプレビューを確認し、IllustratorやFigmaをインストールせずにフォーマット済みのマークアップをコピーできるツールです。エクスポートされたアイコンを素早く検査したい開発者やデザイナーに最適です。
主な機能
任意のSVGをアップロードすると、レンダリングされたプレビューときれいにインデントされたXMLがすぐに表示されます。パスやグループを数え、viewBoxを検出するので、構造を一目で確認できます。
よくある使い方
フロントエンド開発者はコードベースに追加する前にSVGエクスポートを確認するために使用しています。デザイナーはスクリーンショットの代わりにフォーマット済みスニペットをプルリクエストで共有しています。アイコンライブラリの管理者はデザインツールが残した不要なグループをチェックしています。
ヒント
SVGが肥大化して見える場合は、フォーマットされたコードで空のグループや冗長なtransformを探してください。クリーンアップして再ダウンロードできます。本番環境用にはレビュー後にミニファイアを通してください。
プライバシー
ファイルはブラウザから出ません。すべての解析とフォーマットはクライアント側で行われるため、社内の機密ファイルも安心して検査できます。
SVGコードビューワー オンライン - SVGマークアップを確認・プレビュー
SVGコードとは何か、SVGマークアップの読み方、無料のオンラインSVGコードビューワーの使い方を学びましょう。