概要

SVGビューアーは、SVGコードのリアルタイムプレビューとPNG画像への変換をオンラインで行えるツールです。キャンバスサイズ・背景色・スケール・オフセットを設定しながらプレビューし、PNG形式でダウンロードできます。

使い方

1. 「SVGコード」エリアにSVGコードを貼り付けるか、サンプルを選択します。
2. 「Canvas設定」でキャンバスの「幅」・「高さ」（ピクセル）を設定します。
3. 「背景色」を指定するか、「背景を透過」を有効にします。
4. 「SVG設定」で「拡大率」と「X座標」・「Y座標」（描画位置のオフセット）を調整します。
5. プレビューを確認し、「PNG形式でダウンロード」をクリックして画像を保存します。

仕様・用語解説

• SVG（Scalable Vector Graphics）: XMLベースのベクター画像形式（W3C標準）です。数式で図形を表現するため解像度に依存せず、どのサイズでも鮮明に表示されます。
• PNG変換の仕組み: ブラウザのCanvas APIを使用してSVGをラスタライズします。drawImage()でSVGをCanvasに描画し、toDataURL('image/png')でPNGデータに変換します。
• 「拡大率」: SVGを拡大・縮小して描画する倍率です。100%がデフォルトで、Retinaディスプレイ向けに200%で出力することもできます。
• 「X座標」・「Y座標」: SVGの描画位置をX・Y方向にずらすピクセル数です。キャンバス内の配置調整に使用します。
• 透明背景: PNG形式はアルファチャンネル（透明度）をサポートするため、透明背景のアイコンやロゴの出力が可能です。
• キャンバスサイズ: 出力PNGのピクセルサイズを決定します。デフォルトは256×256ピクセルです。

ユースケース

• デザインツールで作成したSVGアイコンをPNGに変換する場合。
• OGP画像・faviconなどの素材を作成・確認する場合。
• SVGパスやアニメーションのプレビュー・デバッグ。