info概要

SVGビューアーは、SVGコードのリアルタイムプレビューとPNG画像への変換をオンラインで行えるツールです。キャンバスサイズ・背景色・スケール・オフセットを設定しながらプレビューし、PNG形式でダウンロードできます。すべての変換処理はブラウザ内で完結するため、SVGファイルの内容が外部サーバーに送信されることはありません。アイコン素材の書き出しやOGP画像の作成など、デザインデータをラスター画像に変換したい場面で利用できます。

checklist使い方

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

menu_book仕様・用語解説

• 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内で外部画像を<image>タグのhrefで参照している場合や、Webフォントを外部CSSで指定している場合、ブラウザのセキュリティ制約により読み込めないことがあります。画像はBase64のData URIとして埋め込み、フォントは<text>要素にインラインのstyle属性で指定することを推奨します。
• 出力解像度の考え方: PNGの実ピクセルサイズは「キャンバスサイズ × 拡大率」で決まります。SVGはベクター形式のため、拡大率を上げても輪郭のぼやけは発生しませんが、キャンバスサイズ自体を大きくしないと最終的な出力ピクセル数は増えません。

lightbulbユースケース

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

quizよくある質問

SVG内の外部画像参照やWebフォントは変換結果に反映されますか

ブラウザのCanvas APIの制約上、外部URLへの画像参照やCSSで指定した外部Webフォントは読み込まれない場合があります。確実に反映させるには、画像はBase64形式でSVG内に埋め込み、文字はアウトライン化するか標準的なシステムフォントを使用してください。

出力されるPNGの解像度はどう決まりますか

「幅」「高さ」で指定したキャンバスサイズに「拡大率」を掛け合わせた値が実際の出力ピクセル数になります。Retinaディスプレイ向けに高解像度で書き出したい場合は、拡大率を200%に設定してください。

背景を透過したPNGとして出力できますか

はい。「背景を透過」を有効にすると、背景色を塗らない状態でPNGに書き出されます。PNG形式はアルファチャンネルに対応しているため、アイコンやロゴを透明背景で出力する用途に適しています。

サイズの大きいSVGファイルでも変換できますか

処理はブラウザ内のCanvas APIで行われるため、極端に複雑なパスや非常に大きなキャンバスサイズを指定すると、ブラウザやデバイスの性能によって描画に時間がかかったり失敗したりすることがあります。必要な範囲でキャンバスサイズを調整してください。

SVGのアニメーションはPNGに反映されますか

PNGは静止画形式のため、SMILやCSSアニメーションによる動きは反映されず、変換時点（プレビュー表示時）の静止した状態がそのまま書き出されます。動きのある画像として保存したい場合は、GIFや動画形式への変換を別途検討してください。

貼り付けたSVGコードは保存されますか

いいえ。入力したSVGコードやプレビュー・変換処理はすべてブラウザ内で完結し、サーバーへ送信・保存されることはありません。タブを閉じたり再読み込みしたりすると入力内容は破棄されます。