QRコードのSVGとベクターファイル：サンプルをダウンロードし、中身を見て、どこでも使う

サンプルのSVG QRコードをダウンロードする

まずはファイルそのものからです。サンプルのSVG QRコードをダウンロードしてください。6,355バイト、41×41モジュールのバージョン6のシンボルで、誤り訂正レベルはH、このページのアドレスを符号化しています。KoloQRがブラウザーで使うのと同じエンコーダーで生成し、公開前の2026年9月22日にjsQRデコーダーで確認したので、スキャンできます。用途ごとにSVG、PNG、PDF、EPSのどれをダウンロードすべきかはQRコードのSVG・PNG・PDF・EPSの比較をご覧ください。このページは、SVGそのものを入手し、読み、使うことについてのページです。

サンプルは意図的に、QRコードとして考えうる最も素朴なSVGにしてあります。白い背景に黒い正方形のモジュール、4モジュールのクワイエットゾーン、ロゴなし、フレームなし、角丸なし、そしてwidth属性もheight属性もありません。そのためデザインツールは自分の既定のサイズで開き、ファイルはそこからきれいに拡大縮小できます。ジェネレーターで作ったスタイル付きのコードは、部品が多く、より長いファイルになります。SVGのQRコードとは実際に何なのかが問いなら、テキストエディターで開くべきなのはこのサンプルです。

サンプルに関する唯一のルールは、それが何を符号化しているかです。スキャンするとこのガイドが開き、IllustratorでもFigmaでも他のどのツールでも、別のものを開かせることはできません。モジュールのパターンがアドレスそのものだからです。本物のコードがまだ決まっていないあいだ、モックアップ、テンプレート、印刷レイアウトの仮置きとして使い、何かを印刷する前に、本当の遷移先から生成したコードに差し替えてください。

サンプルSVGファイルの中身を、要素ごとに

サンプルSVGは6行からなります。XML宣言、コメント、viewBoxを持つsvg要素の開始タグ、白い背景の矩形、すべての暗いモジュールを収めた1本の黒いパス、そして閉じタグです。それがファイルの全体で、それぞれの部分には、スキャナーかデザインツールが頼りにする役割があります。

パスのデータはモジュール単位で読みます。M4 4h7v1H4zの意味は、列4・行4に移動し、右へ7単位、下へ1単位描き、列4まで戻って閉じる、です。これは左上の位置検出パターンの上辺で、4モジュールのクワイエットゾーンのすぐ内側にあります。すべてのサブパスは、数値の違う同じ形です。1つの行で隣り合う暗いモジュールは、1つずつの正方形として描くのではなく1本の連続にまとめられていて、これでファイルが少し小さくなり、スキャナーが見るジオメトリは何も変わりません。

他のジェネレーターのQRコードSVGは細部が違います。モジュールごとに1つの矩形、行ごとのグループ、viewBoxのオフセットの代わりにtransform、など。そしてその違いは、どれもスキャナーにとって意味がありません。大事なのは表にあるものです。viewBox、クワイエットゾーンの下の明るい背景、そしてストロークのない塗りの図形としての暗いモジュールです。

ベクターQRコードとは何か、なぜパターンがデータなのか

ベクターファイルとは、画像をピクセルではなく形と座標として保存したもので、どんなサイズにも輪郭の精度を失わずに描き直せます。したがってベクターQRコードは、格子の上に並んだ塗りの図形の集まりであり、その格子がメッセージです。スキャナーはどのセルが暗くどのセルが明るいかを読み、その並びをアドレスに戻します。

モジュールとは、QRコードのデータを担う小さな明暗の正方形のひとつで、スキャナーが解像しなければならない最小の単位です。サンプルには1,681のモジュール位置があり、そのうち823が暗いモジュールです。どの823かは、テキスト、誤り訂正レベル、マスクパターンからエンコーダーが決めます。だからこそ、どのデザインツールにもアドレスを打ち込める欄がないのです。アドレスは絵の隣に保存されているのではなく、アドレスが絵そのものなのです。

クワイエットゾーンとは、スキャナーが記号のどこが始まりでどこが終わりかを判別するためのQRコードの周囲の空白の余白で、規格は四辺すべてに4モジュールと定めています。ベクターファイルではクワイエットゾーンを失いやすく、見えているアートワークに合わせて切り抜くツールは、暗いモジュールに合わせて切り抜いて余白を捨ててしまいます。サンプルが余白をviewBoxの内側に保ち、白く塗っているのはそのためです。失われるとどうなるかはQRコードのクワイエットゾーンで扱っています。

KoloQRのSVG書き出しに入っているもの

KoloQRのSVGダウンロードは、qr-by-koloqr-com.svgという名前の1つのファイルで、コードを個別に名前の付いたベクターの部品として持っています。背景、モジュール、3つの位置検出パターン（目）、選んでいればフレーム、追加していればロゴ、そしてすでにアウトライン化されたラベルの文字です。円形やカスタムの形のQRコードを作れる無料のQRコード作成ツールであるKoloQRは、そのファイルをブラウザーで書き、何も付け加えません。透かしも、トラッキング用の要素も、アカウントもありません。

ダウンロードの瞬間に書き出しのコードが行うことを、その順番で挙げます。

• ラベルをアウトライン化する。 QRコードのフレームにSCAN MEのような文字があれば、書き出しはラベルのフォントの読み込みを待ち、シリアライズの前に各ラベルをパスとして描き直します。そのためファイルには、後工程でフォントのインストールを必要とするtext要素が決して含まれません。
• アートワークをシリアライズする。 画面にあったsvg要素がviewBoxごと書き出され、XML宣言がまだなければファイルに追加されます。
• 明示的なwidthとheightを追加する。 この2つの属性はviewBoxから複製されます。これを読むデザインツール、とくにFigmaが、既定のボックスではなく本来のサイズでコードを配置するためです。
• 参照されるidを固有にする。 ファイル内の何かが指しているid——クリップパスや、曲線のラベルが沿う不可視の弧——には、その書き出しに固有の接頭辞が付きます。そのため1つの文書に落とした2つのコードが互いをクリップすることはありません。BackgroundやLogoのようにレイヤーの名前にしかなっていないidは、読める形のまま残ります。

デザインツールのレイヤーパネルに表示される部品は、ファイルそのものから来ています。ルート要素の名前はby KoloQR.com。背景はBackgroundという名前の矩形で、背景を透明にすると省かれます。データのモジュールは前景色で塗られたグループに入り、各モジュールがそれぞれの図形——正方形、円、あるいはピルのパターンが連続をまとめたときのカプセル——です。各位置検出パターンは1本のパスで、穴は奇偶塗りで抜いてあるので、ワンクリックで色が変わります。デザインされたフレームは本物の穴の開いた1本のパスです。ロゴはLogoという名前のグループに入ります。縮尺は1モジュールあたり10単位に固定されていて、形式のガイドがすでにそこからPNGとPDFの数値を導いているので、ここでは繰り返しません。

Copy to Figmaがクリップボードに載せるのも同じマークアップです。コピーされたテキストとダウンロードされたファイルの違いは、どこに届くかだけです。だからこそQRコードをFigmaにコピーするガイドは、貼り付けで生まれるレイヤーを、まさに上の言葉で説明しています。

KoloQRでQRコードをSVGとして入手する方法

SVGの入手は、ジェネレーターへの1回の訪問と1回のダウンロードで済みます。内容を入力し、デザインが求めるならコードにスタイルを付け、ダウンロードメニューでSVGを選び、デザインツールでファイルを開き、校正をスキャンする。アカウントも、メールの手順も、ファイルのサイズ制限もありません。

1. ジェネレーターを開いて内容を入力する. ジェネレーターを開き、URL、Wi-Fiの情報、テキストなどの内容を入力します。内容の入力欄に何か入るまでダウンロードボタンは無効のままなので、入力前に表示されているスタイル付きのプレースホルダーが誤って書き出されることはありません。
2. 書き出す前にコードにスタイルを付ける. 形、モジュールのパターン、目のスタイル、色、フレーム、ロゴは、デザインツールではなくここで設定します。SVGはプレビューのスナップショットであり、ジェネレーターのコントラストバッジが、ファイルに確定する前に色の組み合わせを確認します。
3. ダウンロードメニューでSVGを選ぶ. Downloadの横の矢印をクリックしてSVGを選びます。qr-by-koloqr-com.svgというファイルがダウンロードフォルダーに届きます。同じメニューにあるCopy to Figmaは、代わりに同一のマークアップをクリップボードに載せます。
4. デザインツールでファイルを開くか配置する. Illustrator、InDesign、AffinityにSVGを配置するか、FigmaやInkscapeのキャンバスにドラッグするか、Canvaにアップロードします。比率をロックしてサイズを変え、クワイエットゾーンをアートワークの内側に残してください。
5. 校正をスキャンする. 配置したコードを100%の画面から、印刷なら最終サイズで印刷した校正から、iPhoneとAndroidのスマートフォンでスキャンします。開くアドレスが手順1で入力したものであることを確認してください。

Illustrator、Figma、Inkscape、AffinityでQRコードのSVGを使う方法

4つのベクター編集ソフトはいずれもQRコードのSVGを編集可能な図形として開き、作業の進め方はどれも同じです。ファイルを取り込み、モジュールのジオメトリには触れず、色は塗りで変え、比率ロックをオンにしてサイズを変える。以下のメニュー名は一般的なもので、バージョンによって変わるので、探すべきものの目安として読んでください。

• Adobe Illustrator。 ファイル、次に配置を使うか、SVGを直接開きます。配置したSVGはたいていリンクまたは埋め込みのグループとして届きます。部品ごとに塗りを変える必要があれば一度グループ解除し、モジュールの図形を選んで塗りを設定します。拡張の手順は不要です。モジュールはすでにライブ効果ではなくパスだからです。Shiftを押しながら、または変形パネルで比率ロックをオンにして拡大縮小します。
• Figma。 .svgファイルをキャンバスにドラッグするか、クリップボードから生のSVGマークアップを貼り付けます。Figmaのヘルプセンターによれば、SVGファイルを読み込むと画像としては扱われなくなり、編集可能なベクターレイヤーに変換されます。手順の全体、届くレイヤー名、安全な編集はQRコードをFigmaにコピーする方法にあります。
• Inkscape。 ファイル、次に開くで、SVGを文書として開きます。ファイル、次にインポートでは、SVGを編集可能なオブジェクトとして取り込むかリンクした画像として取り込むかをたいてい尋ねられるので、編集可能を選びます。Inkscape独自のSVGはこのファイルの上位互換なので、あとでプレーンSVGとして保存すれば持ち運びやすいままです。
• Affinity Designer。 ファイル、次に配置、またはファイル、次に開く。配置したSVGはたいてい、その場で編集もグループ解除もできる埋め込み文書として届きます。塗りはカラーパネルから変え、変形パネルには比率を保った拡大縮小のためのロックがあります。

4つのどれでも、つい試したくなる編集は、すべて選択してストローク、エフェクト、グラデーションを適用することです。ストロークは静かに失敗するもので、そのジオメトリは二つ先のセクションで説明します。色を変えるのは塗り、そして塗りだけにしてください。

Canva、InDesign、Word、PowerPointにQRコードのSVGを入れる方法

レイアウトソフトとオフィスソフトはSVGを、編集可能な図形としてではなく画像として受け取ります。QRコードにはそれで十分です。コードは配置してサイズを決める必要はあっても、描き直す必要はないからです。Canvaはアップロードし、InDesignは配置し、Microsoft 365のWordとPowerPointは画像メニューから挿入します。

• Canva。 アップロードパネルからSVGをアップロードし、デザインにドラッグします。CanvaはSVGのアップロードを受け付け、ファイルサイズの上限はヘルプセンターがプランごとに示しています。QRコードのSVGは数キロバイトなので、上限は問題になりません。問題になるのは、そのプランでアップロードが許可されているかどうかで、それを確かめる場所はCanva自身のアップロード要件のページです。SVGのアップロードが拒否されたら、代わりに最終的な印刷サイズで書き出したPNGをアップロードしてください。CanvaでQRコードを作るが全体の手順を扱い、KoloQRとCanvaの比較は、Canva自身のSVG書き出しがなぜ難しい道なのかを説明しています。
• Adobe InDesign。 ファイル、次に配置で、クリックかドラッグでフレームを決めます。InDesignは配置したSVGをグラフィックとして扱い、塗りの色はたいてい変えられないので、色は書き出す前に決めてください。縮尺は両軸とも100%に保つか、変えなければならないときは幅と高さを同じパーセントで変えます。
• WordとPowerPoint。 SVG画像の編集に関するMicrosoftのサポートページによれば、Windows、Mac、Android、Windows Mobile向けのMicrosoft 365のWord、PowerPoint、Outlook、Excelは、挿入、次に画像、次にこのデバイスからSVGファイルを挿入します。古い買い切り版はまちまちで、相手のバージョンが分からないときにPNGのほうが安全な添付である理由がこれです。グラフィック形式タブの図形に変換オプションはコードを編集可能な断片に分解しますが、QRコードでそれを使う理由はありません。
• GoogleドキュメントとGoogleスライド。 執筆時点ではどちらもSVGを読み込めないので、PNGを挿入してください。高精細な画面でも鮮明なままにするために、表示サイズの2倍で書き出します。

ツールが何であれ、サイズの確認は同じです。印刷されたQRコードは、読み取り距離10cmごとにおよそ1cmの幅を必要とし、印刷サイズ計算ツールが読み取り距離を幅に換算します。配置したSVGを比率をロックしてその幅にし、クワイエットゾーンが配置したフレームに切り取られず、その内側に収まっていることを確認してください。

ウェブページと印刷所でQRコードのSVGを使う方法

ウェブページでは、widthとheightを付けたimg要素からSVGを参照すれば、どのディスプレイでも鮮明に描画されます。印刷所には、SVGを受け付けると言われないかぎりPDFを送ってください。PDFはほとんどの入稿フォームが名指しする形式で、ベクターのまま保たれるPDFの作り方は姉妹ガイドが説明しています。

• 画像として。 .svgファイルを指すimgタグが最も簡単な道です。ブラウザーが拡大縮小し、width属性もheight属性もないviewBoxは、タグが与えるサイズを埋めます。サンプルは、タグの幅が196ピクセルのとき1モジュールあたり4CSSピクセルで描画され、これは画面からスキャンされるコードの妥当な下限です。
• インラインで。 SVGのマークアップをHTMLに貼り付けると、CSSでパスの色を変えられます。これは、暗い背景に明るいモジュールへ反転しなければならないダークモードのデザインで役立ちます。その組み合わせはスマートフォンの標準カメラはたいてい読めますが、古いスキャナーは読めないことが多いので、テストしてください。インラインにすると、ファイルは別にキャッシュされず、ページと一緒にダウンロードされることにもなります。
• coverやcontainを使った背景画像としては使わない。 どちらもコードの入るボックスを切り取ったり歪めたりすることがあり、切り取られたクワイエットゾーンは、一部のスマートフォンでだけ現れる失敗です。

印刷では、問題は印刷所の作業手順が何を配置するかです。ほとんどはPDFを名指しし、一部はSVGを受け付け、少数の古い制作システムはEPSを求めます。SVGを完全なベクターのPDFにする手順と、EPSが正解になるのはいつかは、SVG・PNG・PDF・EPSの比較にあります。印刷チェックリストは、ファイルが本刷りに回る前にサイズ、コントラスト、用紙を順番に確認します。レーザー彫刻機には、SVGそのものを背景なしで書き出して渡します。設定はQRコードのレーザー彫刻にまとめています。

編集後もベクターQRコードをスキャンできる状態に保つルール

ベクターQRコードは、モジュールの格子とそのコントラストに触れない編集ならどれにも耐え、そうでない編集ではどれでも失敗します。安全な操作は4つ。パス全体の色を変える、比率をロックしてサイズを変える、移動する、回転する。以下の一覧の残りは避けるべきことで、それぞれがコードを壊す理由を添えています。

• パスのノードを動かしたり削除したりしない。 暗いモジュールはすべてデータで、すべてのノードはそのどれかに属しています。半セル右にドラッグされたモジュールは2つの誤ったセルとして読まれます。削除された連続は削除されたデータで、誤り訂正は、現実世界の傷ではなくその損失に予算を使うことになります。
• 選んだモジュールではなく、パス全体の色を変える。 モジュールの色が2つあるコードは、スキャナーには暗い色1つと明るい色1つとして読まれ、どちらがどちらになるかはスマートフォンが選ぶしきい値次第です。暗い色1つと明るい色1つを選び、その組み合わせをQRコードのコントラストチェッカーで確認してください。
• クワイエットゾーンを保つ。 ISO/IEC 18004は四辺すべてに4モジュールの空白の余白を定めています。アートボードを暗いモジュールに合わせて切り抜いたり、フレームや写真を余白に食い込ませたりすると、スキャナーが探す境界がなくなります。
• モジュールにストロークを付けない。 ストロークはパスの輪郭を中心に描かれるので、1モジュールの10分の1のストロークは、すべての暗いモジュールを両側に10分の1ずつ太らせ、すべての明るい隙間を5分の1縮めます。これは好みの問題ではなくジオメトリです。半モジュールのストロークでは、2つの暗いモジュールに挟まれた明るいセルがすべて完全に閉じ、コードは格子ではなくなります。
• モジュールにグラデーションや透明を使わない。 グラデーションは一部のモジュールを他より明るくしますが、スキャナーは各モジュールがしきい値の暗い側にはっきり落ちることを必要とします。透明は背景を透けさせ、別の経路で同じ問題を起こします。
• 片方の軸だけ拡大縮小しない。 4%の引き伸ばしは画面では見えず、位置検出パターンを正方形でなくします。それはデコーダーが最初に確かめるものです。ハンドルに触れる前に比率をロックしてください。

2つの確認で締めくくります。完成したアートワークをQRコードバリデーターに落として、スタイル付きのコードがまだデコードできるか、何にデコードされるかを確かめ、そのうえで実際の出力の校正——100%の画面、または最終サイズで印刷したシート——をスマートフォンでスキャンします。スタイリングがスキャンを良くすることは決してありません。これらのルールの目的は、編集したコードを元の素朴なコードと同じくらいスキャンできる状態に保つことで、それができたと確認できるのはスキャンだけです。

無料のベクターQRコードのダウンロードがつまずくところ

ストックサイトやアイコンサイトの無料のQRコードSVGは、間違った場所を指す動くコードで、どれだけ編集しても指す先は変えられません。3つの失敗のパターンは、ダウンロードする前に知っておく価値があります。どれもプレビューでは問題なく見え、スキャナーか顧客のところで失敗するからです。

• ストックのSVGは他人のアドレスを符号化している。 ほとんどのストックQRコードは、https://example.com、作者のポートフォリオ、あるいはストックサイト自体を持っています。モジュールのパターンがそのアドレスなので、色を変えても、形を変えても、ラベルを変えても、そこを指したままです。メニューに印刷されたストックのコードは、客を見知らぬ人のサイトに送ります。
• ベクター化したPNGはきれいな格子ではない。 自動トレースにかけたラスターのQRコードは、角が丸く、セルのサイズがわずかに不揃いで、輪郭がもうモジュールの格子に乗っていない図形として戻ってきます。そのどれもが、デコーダーが照明と角度のために持っている余裕を食いつぶします。トレースより作り直しが勝る理由はSVGとPNGの比較が説明しています。
• コードがストロークや、撮影された線の太さを持っている。 一部のベクターQRコードは、写真や印刷されたコードのスキャンから描かれていて、モジュールは元の印刷のインクの広がりを持っています。スキャナーには最初から、暗いモジュールが太く、明るいモジュールが細く見え、そこに次の印刷がさらに広がりを足します。

判断のルールは短いものです。モックアップのプレースホルダーが必要なら、このページのサンプルを使ってください。きれいで、スキャンでき、どこを指すかが明記されています。自分のページを指すコードが必要なら、生成してください。静的QRコードは数秒で作れ、アカウントなしでSVGに書き出せ、入力したアドレスをそのまま符号化します。静的と動的のどちらを生成するかは別の判断で、静的QRコードと動的QRコードの比較が扱っています。KoloQRが作るのは静的コードだけです。