QRコードにSVGを使うべき理由：ベクターQRコードの7つのメリット

2026年3月更新 · 6分で読める

完璧な名刺をデザインしました。隅にLinkedIn QRコードも配置しました。すると印刷会社から電話が — 「QRコードがこのサイズだとぼやけてしまいます。」心当たりがあるなら、SVGが必要だったのにPNGをダウンロードしてしまったのかもしれません。ここでは、QRコードにSVGが適している理由と、PNGの方が良い場面について詳しく解説します。

SVG QRコードとは？

SVGはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略です。PNG（画像を色のついたピクセルのグリッドとして保存する形式）とは異なり、SVGは画像を数学的な図形 — 線、長方形、パスとして記述します。QRコードの場合、パターンを構成する各モジュール（小さな四角形）が、ピクセルの集合ではなく、正確な幾何学的図形として定義されます。

実用的な意味：SVG QRコードは、名刺上の2センチでも展示会バナーの2メートルでも、まったく同じ品質で表示されます。数学的な定義はスケールしますが、ピクセルはスケールしません。

SVG QRコードの7つのメリット

1. 無限のスケーラビリティ

これが最大のメリットです。1024×1024ピクセルのPNGは名刺サイズでは完璧に見えますが、ポスターサイズに拡大すると個々のピクセルが目に見えるようになります。SVGにはピクセルの制限がなく、ビルボードサイズに拡大しても、すべてのエッジがシャープなままです。標準的な名刺より大きな印刷物には、SVGがより安全な選択です。

2. ファイルサイズが小さい

一般的なLinkedIn QRコードをSVGで保存すると5〜15 KBです。同じコードを高解像度PNGにすると50〜150 KB。10倍もの差があります。Webサイトではファイルが小さいほどページの読み込みが速くなります。メールでは添付ファイルのサイズを気にせずに済みます。デザインファイルでもプロジェクトを軽量に保てます。

3. CSSやコードでのスタイリング

SVGはXMLベースのため、Web開発者はCSSで操作できます。ホバー時にQRコードの色を変えたり、ページ読み込み時にアニメーションを加えたり、2つ目のファイルを生成せずにダークモード版を適用したりできます。QRコードをWebサイトで使用する場合、SVGはPNGでは実現できないクリエイティブなコントロールを提供します。

4. デフォルトで透過背景

SVGファイルは明示的に追加しない限り背景がありません。つまり、QRコードをどんな色の面にも — 青い名刺、柄のあるポスター、テクスチャのあるWebサイト背景にも — シームレスに配置できます。PNGも透過をサポートしていますが、多くのツールはデフォルトで白背景のPNGを出力するため、除去するためのひと手間が必要です。

5. プロフェッショナルデザインツールでのネイティブサポート

Adobe Illustrator、Figma、Sketch、InDesign、Affinity Designer、InkscapeはすべてSVGをネイティブに扱えます。グラフィックデザイナーはファイルを開き、レイアウトに配置し、ラスタライズのアーティファクトなしに調整できます。プロの印刷デザイナーと仕事をする場合、SVGを送るとプロフェッショナルとして一目置かれます。

6. RetinaおよびHiDPIディスプレイ対応

iPhoneのRetinaディスプレイ、MacBook Proのパネル、4Kモニターなど、現代のスクリーンは標準ディスプレイよりもはるかに高い画素密度を持っています。通常のスクリーンでは問題なく見えるPNGも、高密度ディスプレイではわずかにぼやけて見えることがあります。SVGはブラウザがディスプレイの実際の解像度に合わせてベクターを再計算するため、どの画面密度でも完璧に描画されます。

7. ダウンロード後の色変更が簡単

QRコードを黒からブランドのネイビーブルーに変更したい場合、SVGならテキストエディタでファイルを開き、塗りの色の値を見つけて置き換えるだけです。QRコードを最初から再生成する必要はありません。PNGの場合、色の変更はコードの再生成か、Photoshopでの手間のかかるピクセル編集が必要になります。

PNGの方が適している場面

SVGが常に優れているわけではありません。PNGが有利な場面を紹介します。

• メールの添付やメール署名：多くのメールクライアント（Outlook、古いバージョンのGmail）はインラインSVGをレンダリングできません。PNG画像はどの受信トレイでも正しく表示される、普遍的な対応形式です。
• SNSへのアップロード：Instagram、LinkedInの投稿、Twitter/Xはいずれもアップロードされた画像をラスター形式に変換します。SVGをアップロードしても結局PNG/JPEGに変換され、予期しない結果になることもあります。
• 技術に詳しくない相手への共有：SVGファイルの開き方を知らない人もいます。PNGはどのデバイスのどの画像ビューアでも、手間なく開けます。
• 標準的な名刺印刷：多くのオンライン印刷サービス（Vistaprint、Mooなど）はPNGとJPEGを受け付けますが、SVGは非対応です。当ジェネレーターは1024×1024pxのPNGを出力し、300 DPIのどの標準的な名刺にも十分な解像度です。

SVG QRコードの使い方

ダウンロード

無料ジェネレーターでLinkedIn QRコードを生成し、「Download SVG」をクリックします。ファイルはすべてブラウザ内で作成され、サーバーにデータが送信されることはありません。

デザインに配置

SVGをデザインツール（Illustrator、Figma、InDesign）で開き、レイアウトに配置します。自由にスケーリングしても、コードはどのサイズでもクリアなままです。クワイエットゾーン（コード周囲の余白）は維持してください。削除するとスキャンに支障をきたす場合があります。

Webで使用

SVGを<img>タグとして埋め込むか、SVGコードをHTMLに直接インライン展開します。インラインSVGなら色やサイズをCSSで完全にコントロールできます。アクセシビリティのために「LinkedIn QR Code for [あなたの名前]」のようなaltテキストを追加しましょう。

他のフォーマットに変換

印刷会社が別のフォーマットを求める場合、SVGからPDF（ベクターを維持）や任意のDPIの高解像度PNGに変換できます。Inkscape（無料）やAdobe Illustratorなら、ワンクリックで変換できます。

クイック比較表

まとめ

デザイナーと仕事をする場合、大判印刷物を制作する場合、またはWebサイトでQRコードを使用する場合は、SVGをダウンロードしてください。メールでQRコードを送る場合、SNSにアップロードする場合、または標準的な印刷サービスを利用する場合は、PNGをダウンロードしてください。迷ったら？両方ダウンロードしましょう — どちらも無料で、数秒で生成でき、どんな状況にも対応できるフォーマットが手元に揃います。