QRコードはSVGで書き出す。ラップされたビットマップではなく

01

ファイルの中に実際に入っているもの

書き出されるのは、幅と高さが明示され、viewBoxがモジュール単位で測られた単一のSVG要素です。暗いモジュールはそれぞれ整数座標上の1×1の矩形で、3つの位置検出パターンは独立した図形になっています。だから角のスタイルは、モジュールが四角でも角丸でもドットでも影響を受けません。ビットマップから起こしたものは一切ありません。そもそもビットマップだったことがないからです。

クワイエットゾーンは後から思い出すものではなく、キャンバスの一部です。viewBoxはコードに、選んだ余白を足したもの。既定で4モジュール、最大16まで。背景を透明にすると背景矩形そのものが書かれません。色紙の上に白い箱なしで置けるのはこのためです。

• 1モジュールにつき1矩形、整数座標で
• クワイエットゾーンはviewBoxに含まれる
• 前景色と背景色は6桁の16進数値
• 背景が透明なら背景矩形は書かれない

02

ベクターの本質はファイルサイズではなくエッジ

読み取り機が読むのは、暗いモジュールと明るいモジュールの境界です。小さなPNGを拡大するとその境界がすべてぼやけ、ぼやけた境界は曖昧なデータになります。引き伸ばしたコードが、同じコードをベクターで書き出せば問題なく通るサイズで失敗するのはこのためです。SVGにはそもそも失うべき解像度がありません。

1つのファイルであらゆる配置をまかなえるのも同じ理由です。招待状に載るものがそのままポスターに載る。印刷所が拡大しても、モジュールのエッジは図形が置いた位置から動きません。

03

デザインしたカードが純粋なベクターでなくなる場所

素のコードは最後までベクターです。カードも、ベクターでいられるところはベクターのまま。マトリクスは図形を保ち、シェイプ、背景、グラデーションも図形のままです。

ただし2つだけは持ち越せません。写真やアップロードしたロゴにベクター形式は存在しないので、SVGの中を高解像度のラスター画像として運ばれます。テキストはフォントファミリー名を持った生きたテキストのまま残るため、そのフォントがない環境では別のフォントに置き換わり、行の幅が変わります。文字組みを正確に決めたいときは、レイアウトソフトで組み、コードは単体で書き出してください。

PDFで書き出したカードはページ上の1枚の高解像度画像に統合されます。写真で構成されたものは他になりようがありません。ただしMosaqoはA4で300 dpiを大きく上回る解像度で描画するため、いずれにせよ入稿できる品質です。ページに図形として届くのは、SVGでもPDFでも素のコードだけです。

• QRマトリクス：ベクター図形
• アップロードした写真・ロゴ・ステッカー：埋め込みラスター
• テキスト：生きたテキスト。フォントを添えるか、レイアウト側で組む

04

PNGとPDFの書き出しは何のためにあるか

PNGは画面、メール、スライドに向いています。サイズがすでに分かっていて、一度だけ配置する場面です。余裕をもって大きく書き出し、あとから拡大しないでください。

PDFは同じ図形をページに載せたものです。コードはラスタライズされず描かれたまま、A4の中央に配置され、そのまま印刷にも受け渡しにも使えます。こちらにも解像度という概念がないので、ページを拡大してもエッジは一切ぼやけません。他の人が管理するレイアウトに、その人しか知らないサイズで入れる場合はSVGを送ってください。

05

ファイルの色を変える、置く

ファイルがテキストである以上、色はデザインソフトを開かなくても編集できます。モジュールの塗りが選んだ前景色、背景矩形が背景色です。明るい地に暗いモジュールという慣習は守ってください。反転したコードは多くの読み取り機が読めますが、すべてではありません。印刷物では賭けになります。

配置するときはクワイエットゾーンを空けたままにし、エッジをぼかす効果は避けてください。ドロップシャドウ、描画モード、賑やかな絵柄の上での透過。写真の上に立つコードは、ぼやけたコードと同じ理由で読めなくなります。

06

プレビューではなく、書き出したファイルを試す

書き出したSVGを開き、実際のレイアウトに最終サイズで配置し、本番の用紙に1枚刷って、読む人が持つ距離から、その場所に実際にある明かりの下で、2台の別々のスマートフォンでスキャンしてください。

エディターは作業中もコントラスト、クワイエットゾーン、データ密度を確認しており、その確認が印刷所に届く前にほとんどの問題を捕まえます。見えないのはニス、折り、そして部屋の明かりです。