SVGView

SVG ビューア オンライン

SVG ファイルを即座にプレビューし、viewBox と寸法を検査し、同じワークフローで編集に移ります。

SVG ビューアの機能

正確なズームとパン

SVG ファイルをオンラインで開き、ズームまたはパンして、任意のスケールで詳細を検査します。 SVG Viewer を使用して、アイコンのストロークの位置合わせ、アンチエイリアス、ピクセル スナップを確認します。キーボード ショートカットとトラックパッド ジェスチャを使用すると、複数のサイズをすばやく簡単に比較できます。

背景オプション

SVG ファイル ビューアを使用すると、背景の透明、明るい、または暗いを切り替えて、エッジと透明度を検証できます。これにより、ハロー、逸れたパス、または切り取られた影を簡単に確認できるようになります。チェッカーボードの背景は、微妙なアルファ フェードやオーバーレイに役立ちます。

画面に合わせるか 1:1

画面に合わせた実際のサイズのビューは、実際の UI コンテキストでアセットがどのようにレンダリングされるかを判断するのに役立ちます。アイコンのグリッドの配置と間隔を確認するのに役立ちます。 Web アイコンとモバイル アイコンのピクセル配置を確認するには、1:1 モードを使用します。ロゴをチェックするときは、正確性をブランド ガイドラインと 1 対 1 で比較してください。

メタデータインスペクター

SVG Viewer は、幅、高さ、viewBox、およびファイル サイズを透明なパネルに表示します。 SVG Viewer は欠落している属性にもフラグを立てるため、スケーリングの問題を早期に修正できます。 viewBox または幅/高さの欠落に関する警告は、レイアウトのずれを防ぐのに役立ちます。

安全なレンダリング

SVG Viewer は、レンダリング前にスクリプトと安全でないタグを削除します。これにより、プレビューが安全に保たれ、外部ファイルを開いたときの予期せぬ動作が防止されます。外部参照は無視されるため、予期しないネットワーク呼び出しは発生しません。

ローカルの即時プレビュー

このツールは完全にブラウザ内で実行されるため、ファイルがデバイスから流出することはありません。ローカル処理により、多くのアセットをレビューしている場合でも、プレビューが高速に維持されます。ロックダウンされたネットワークやオフライン環境でもうまく機能します。

SVG ファイルをオンラインで表示する方法

1

SVG を追加する

ファイルをドラッグ アンド ドロップするか、クリックして参照するか、SVG マークアップを貼り付けて、SVG ファイルをオンラインで開きます。 SVG Viewer はソースをローカルにロードし、元の viewBox をそのまま保持します。 SVG でシンボルが使用されている場合は、シンボルを展開して各アイコンを明確にプレビューします。

2

プレビューと検査

SVG ビューアをオンラインで使用して、寸法や viewBox の値を確認しながら、背景をズーム、パン、切り替えます。エクスポートまたは最適化する前に、SVG ファイルをオンラインでプレビューしてレイアウトを確認します。

3

編集またはエクスポート

関連ツールを開いて、アセットを最適化、サイズ変更、または変換します。 SVG Viewer を使用すると、エクスポート手順に進む前に問題を簡単に発見できます。メタデータの問題を早期に修正して、エクスポートの繰り返しを回避します。

SVG ビューアに関するよくある質問

この無料の SVG ビューアをオンラインで簡単に QA するために使用します。SVG ファイルを開いて、viewBox、寸法、透明度を検査し、1 つのローカル ワークフローで編集、最適化、または変換に進みます。

これはオンラインの無料の SVG ビューアですか?
はい。これは、viewBox、寸法、透明度などの SVG ファイルを迅速にプレビューおよび検査できるオンラインの無料 SVG ビューアです。
SVG をプレビューしてから編集または最適化できますか?
はい。ファイルを再アップロードすることなく、最初にプレビューしてから、同じワークフローで編集または最適化に進むことができます。
この SVG ビューアを使用すると、ファイルはアップロードされますか?
いいえ。ファイルはブラウザでローカルに処理されるため、SVG アセットはデバイス上に残ります。
この SVG ビューアでは何を検査できますか?
幅、高さ、viewBox、ファイル サイズ、透明度のコンテキストをチェックして、スケーリングやレイアウトの問題をすぐに発見できます。
エクスポートする前に SVG の透明度を確認できますか?
はい。チェッカーボード、明るい背景、暗い背景を切り替えて、アルファ エッジと隠れたアーティファクトを検証します。
SVG ビューアはスクリプトをどのように処理しますか?
安全でないスクリプトとタグはレンダリング前に削除されるため、サードパーティの SVG ファイルをより安全に検査できます。
SVG コードを直接プレビューできますか?
はい。 SVG マークアップを貼り付けてレンダリングして検査し、ズーム、パン、viewBox と寸法を確認します。
SVG ビューアをダウンロードする必要がありますか?
いいえ。SVGView はブラウザで実行されるため、インストールしたりダウンロードしたりする必要はありません。ファイルはローカルに残ります。
この SVG ビューアをオンラインで使用するにはアカウントが必要ですか?
いいえ。SVGView はサインアップせずにブラウザで実行され、ファイルはローカルに残ります。
この SVG ビューアは大きな SVG ファイルを開くことができますか?
はい、ほとんどのファイルはすぐに読み込まれます。非常に複雑な SVG は、デバイスによってはレンダリングが遅くなる場合があるため、プレビューをよりスムーズに行うために最初に最適化してください。
これは SVG ファイル ビューアですか、それともオンラインの SVG リーダーですか?
はい。 SVGView を使用すると、オンラインで SVG ファイルを開いて、ダウンロードせずに viewBox と寸法をプレビュー、検査、検証できます。
プレビュー後にエクスポートまたは変換できますか?
はい。プレビュー後、再アップロードせずに、同じ SVG の最適化、サイズ変更、変換を続けることができます。

関連する SVG ツール

SVG Viewer とこれらのツールを併用すると、検査後にアセットを最適化、変換、再利用できます。

SVG エディター

SVG Viewer がファイルが正しく見えることを確認した後、編集、最適化、エクスポートを行います。

ツールを開く

SVG オプティマイザー

SVG Viewer がメタデータをチェックした後、アセットを圧縮してサイズを削減します。

ツールを開く

SVG から PNG

スケールと背景のオプションを指定して PNG をエクスポートし、素早いプレビューやドキュメントを作成します。

ツールを開く

SVG to React

検査された SVG を UI プロジェクト用の再利用可能な React コンポーネントに変換します。

ツールを開く

SVGアニメーションプレビュー

モーション アセットを出荷する前に、SMIL または CSS アニメーションを再生してタイミングを確認します。

ツールを開く

関連 SVG ブログ

SVG ワークフロー、トラブルシューティング、本番運用の実践記事を続けて読めます。