SVGビューアー–プレビュー・ズーム・出力
SVGビューアーは、SVGマークアップがブラウザでどうレンダリングされるかを確認するSVGプレビューツールです。SVGコンテンツを貼り付けると、スクリプトが除去された完全なサンドボックス化iframeで表示されます。ズームイン・ズームアウトし、チェッカーボード背景を切り替えて透明度を確認した後、SVGをダウンロードするか、キャンバス経由でPNGをエクスポートします。
SVGビューアーは、SVGマークアップをレンダリングしてブラウザで結果を確認できる、オンラインのSVGプレビューツールです。ソーステキストだけに頼るのではなく、SVGコンテンツを貼り付けて文書の見え方を確認します。プレビューは完全なサンドボックス化iframeで表示され、スクリプトは除去されます。
ズームイン・ズームアウトして異なるスケールでレンダリングされた画像を確認したり、チェッカーボード背景を切り替えて透明な領域をより明確に見たりできます。完了したら、SVGをダウンロードするか、キャンバス経由でPNGとしてエクスポートします。これらのコントロールにより、オンラインでSVGをプレビューし、次のタスクに合った出力を選ぶのが簡単になります。
SVGはベクター画像形式、PNGはラスター画像形式です。ベクタードキュメントが必要な場合はSVGのままにし、プレビューのラスター版が欲しい場合はPNGをエクスポートします。このビューアーはSVGのダウンロードとPNGのエクスポートの両方に対応しているため、ソース形式を確認し、必要なときにPNG出力を作成できます。
SVGビューアーは完全にブラウザ上で動作します。入力はお使いのデバイス上で処理され、サーバーにアップロード・保存・送信されることはありません。ページを読み込んだ後は、サーバーへの依存なしでオフラインでも動作します。自分が作成していないSVGを確認したり、レンダリングの見え方をチェックしたり、入力を他の場所に送信せずにPNGをエクスポートしたりする必要がある開発者やDevOpsエンジニアに役立ちます。
手順1: SVGマークアップを貼り付けるか、SVGファイルをこのツールにドロップして、プレビュー用に読み込みます。
手順2: プレビューでレンダリングされたSVGを確認し、図形やテキストの見え方をチェックします。
手順3: ズームイン・ズームアウトして、異なるスケールでSVGを調べます。
手順4: チェッカーボード背景を切り替え、透明な領域を見やすくします。
手順5: SVGファイルをダウンロードするか、プレビューをキャンバス経由でPNGとしてエクスポートします。
用途: 自分が書いていないSVG文書を、マークアップを読むだけでは理解しにくい場合に確認します。
用途: 文書を消費・表示するコードで使う前に、SVGのレンダリングを確認します。
用途: マークアップのどの部分を確認・編集すべきかを調べながら、大きなSVGを視覚的に確認します。
用途: 初期スケールでは全体の評価が難しい場合に、ズームインしてSVGの詳細を調べます。
用途: チェッカーボード背景をオンにして、透明な領域をチェックします。
用途: 元のベクタードキュメントではなくラスター画像が必要な場合に、SVGプレビューをPNGとしてエクスポートします。
用途: ブラウザで確認した後にSVGをダウンロードします。