図形とピクセルの違い
PNGはピクセルのグリッドを保存します。拡大すると、ソフトウェアがピクセルの間を補完するため、すべての輪郭がぼやけます。SVGは「ここにこのサイズ、この色で正方形を描く」という命令を保存します。2cmでも2mでも、指定すればそのまま鮮明に描画されます。
QRコードが写真よりシビアな理由
スキャナーはグリッドをサンプリングし、各セルが明るいか暗いかを判定してQRコードを読み取ります。輪郭がぼやけるとセルが中間のグレーに近づき、中間に近いセルほどデコードに失敗しやすくなります。少しぼやけた写真はそれでも写真に見えますが、少しぼやけたQRコードはQRコードとして機能しなくなります。
密度の高いシンボルではこの問題がさらに深刻になります。vCardのレコードやパラメーター付きのURLのような長いペイロードは、同じ物理サイズの正方形により多くのモジュールを必要とするため、各モジュールが小さくなり、ぼやけた輪郭がモジュールに占める割合も大きくなります。
用途で選ぶ
| コードの用途 | 形式 | 理由 |
|---|---|---|
| 名刺、チラシ、パッケージ | SVG | 印刷会社がレイアウトに合わせて拡大縮小しても劣化しません |
| ポスター、ウィンドウステッカー、看板 | SVG | 大きなサイズこそPNGが破綻する場面です |
| ベクター編集ソフトのデザインファイル | SVG | 図形を編集でき、色も変更でき、再サンプリングも不要です |
| メール署名 | PNG | メールソフトはラスター画像のほうがはるかに安定して扱えます |
| スライド資料やスクリーンショット | PNG | 表示サイズが固定されており、拡大縮小は発生しません |
| 他社のCMSのアップロード欄 | PNG | システムによっては方針としてSVGのアップロードを拒否します |
SVGを扱う
- 配置する。スクリーンショットを貼り付けない ファイルをレイアウトツールに読み込んでください。プレビュー画像をコピーするとベクターデータが失われ、結局ピクセルに戻ってしまいます。
- 慎重に色を変更する どのベクター編集ソフトでもモジュールの色を変更できます。明るい背景に暗いモジュールを配置してください。反転したコードやコントラストの低いパステルカラーの組み合わせは、実際の読み取り機で失敗します。
- 片方の軸だけ引き伸ばさない 縦横を同じ比率で拡大縮小してください。引き伸ばされたコードはグリッドが崩れており、誤り訂正機能でも形状のゆがみは直せません。
- クワイエットゾーンを確保する 余白はシンボルの一部です。モジュールぎりぎりまでトリミングすることが、見た目の良いレイアウトが読み取れなくなる最も多い原因です。
PNGを使わざるを得ない場合
最終的なレイアウトに必要なピクセルサイズ、またはそれ以上のサイズで書き出し、後から拡大しないでください。縮小はたいてい安全ですが、拡大するとぼやけの原因になります。
PNGを非可逆圧縮にかけないでください。JPEGのアーティファクトは白黒のはっきりした輪郭の周辺に集中しますが、QRコードはまさにそうした輪郭だらけです。ファイルを小さくしたい場合は、画像圧縮がPNGを可逆的に再エンコードし、実際に小さくならなければ結果を破棄します。
両方の形式に対して行われる検証
VaultaireはPNGとSVGを同じペイロードから生成し、完成した各ファイルを別のリーダーで再度デコードします。デコードしたテキストが確認した内容と一致した場合にのみ、ダウンロードが可能になります。これにより、破損したレンダリングが印刷に回る前に検出できます。ただし、最終レイアウトで余白(クワイエットゾーン)が保たれているかまでは分かりません。実際に印刷見本をスキャンして確認してください。
SVGとPNGに関するよくある質問
SVGかPNGか?
印刷するもの、サイズを変更する可能性があるもの(ポスター、パッケージ、カード、看板、デザインファイル)にはSVGを。メール署名やスライドのように画面上のサイズが固定された用途にはPNGを。
SVG形式のQRコードのほうが高品質ですか?
そもそも解像度という概念がありません。モジュールを図形として記述し、指定したサイズでそのまま描画されます。PNGは固定のピクセルグリッドを持ち、それを超えるとぼやけます。
色を変更できますか?
はい、どのベクター編集ソフトでも変更でき、ファイルの鮮明さは保たれます。明るい背景に暗いモジュールを配置してください。反転したコードやコントラストの低いコードは、形式にかかわらず一部の読み取り機で失敗します。
印刷したコードがぼやけて見えるのはなぜですか?
PNGがピクセルグリッドを超えて拡大され、プリンターがモジュールの端で細部を補完したためです。SVGを印刷するか、レイアウトに必要な正確なサイズでPNGを書き出してください。
印刷会社はSVGを受け付けますか?
ほとんどの印刷会社は受け付けており、どのレイアウトツールでも読み込めます。印刷会社がPDFやEPSを求める場合は、SVGをデザインツールに配置してそこから書き出してください。図形はそのまま保たれます。
後からPNGをSVGに変換できますか?
ラスターのコードをベクターにトレースし直しても、すでにぼやけた輪郭を推測することになります。代わりにペイロードからSVGを生成してください。数秒で済み、形状も正確です。