この記事の目次 開く・閉じる
24pxと192pxを切り替えてみる
この確認環境ではSVGが212バイト、生成PNGが445バイトでした。PNGの容量はブラウザの書き出し方でも変わります。この小さな図の数値を、写真や複雑なSVGへ当てはめることはできません。
保存して、通信を切っても試せる
PCとブラウザがあれば試せます。編集する場合だけテキストエディタを使います。アカウントや追加ソフトのインストールは不要です。
- 比較画面の「表示サイズ」で24pxを選び、同じ大きさの図を見る。
- 192pxへ変更し、斜め線と角の輪郭を見比べる。
- 「24pxのPNGを保存」で画像を保存する。192px表示中でも、保存する画像は24×24px。
- 「SVGを保存」でも保存し、二つのファイルを残す。
サンプル全体を保存する場合はZIPを新しいフォルダーへ展開し、index.htmlを開きます。READMEも同梱しています。PNGは元のSVGからブラウザ内で作るため、通信を切っても比較できます。
小さな画面で横に並ばない
スマホ幅では上下へ並びます。画像の表示サイズは変えず、図を見る場所を確保するためです。ページの横にはみ出す構成にはしていません。
表示サイズと、画像そのものの大きさは別
const canvas = document.createElement("canvas");
canvas.width = canvas.height = 24;
canvas.getContext("2d").drawImage(vector, 0, 0, 24, 24);
canvas.toBlob(blob => { /* PNGとして保存・表示 */ }, "image/png");これは変換部分の抜粋です。全体はZIPにあります。24×24のCanvasにSVGを描き、その画素をPNGへ書き出しています。その後、画像の表示幅を192へ変えても、保存済みの画素は増えません。
実験ではブラウザ標準の拡大補間を使い、ドット絵向けのimage-rendering: pixelatedは指定していません。画面の密度やブラウザでも見え方は変わります。「必ずこのぼやけ方になる」という見本ではありません。
ぼやけたPNGをSVGへ入れれば直る？
直るとは限りません。SVGは画像を内側へ埋め込めるため、中身が小さなビットマップなら、その画素数の制約は残ります。今回のSVGは写真を埋め込まず、線の形をpathで記述しています。
ロゴやアイコンは形、写真は画素数を見る
線や単純な図形なら、形を保ったSVGを候補にできます。写真や細かな濃淡のある画像では、必要な表示幅と画面密度に見合う元画像を用意するほうが先です。低解像度の画像を大きくするだけでは、失われた細部は戻りません。
書き出したら実際の掲載サイズで確認します。素材を使う前には形式だけでなく、ライセンスと必要なクレジットも確かめます。公開前の容量や操作の伝わり方はSVGアイコンの公開前チェック、図を描く手順はMethod Draw、最適化の操作はSVGOMGで紹介しています。
出典・配布条件・確認範囲
形式と描画はMDNのSVG資料、Canvasで画像を描く資料を参照。自作コード・家の図・READMEはCC0です。記事本文や第三者素材には適用しません。
2026年10月10日に24pxと192pxの切り替え、SVG・PNGの保存、PNGの元寸法、390px幅の表示、ZIP展開後のオフライン動作を確認しました。スマホ実機、全ブラウザ、印刷、速度比較は未検証です。X検索は取得できず、最近の流行は確認できていません。外部記事の転載ではなく、同じ自作図による比較です。