SVGファイルを無料で作る方法はありますか

執筆: Bulk Qr Code Generator Editorial Team · editor@bulk-qr-code-generator.net

結論

はい、無料で作れます。方法は主に4つあり、テキストエディタでSVGコードを手書きする、無料のオンラインSVGエディタで描く、PNG・JPG画像をトレースして変換する、生成ツールのSVG書き出しを使う、という流れです。QRコードやバーコードのように規格が決まった図版を大量に用意する場面では、CSV・Excel・Googleスプレッドシートのデータから一括生成してSVGで書き出す方法が最も現実的です。

無料でSVGを作る4つのルート

SVGはテキスト形式のベクター画像なので、高価なデザインソフトがなくても作成できます。まずは自分がどのルートに向いているかを判断してください。以下の4系統が無料で完結する現実的な選択肢です。

ルート向いている人・用途必要なもの主な注意点
方法1：テキストエディタでコードを書く単純な図形・アイコン・ロゴを正確に作りたい。ファイルを軽く保ちたいメモ帳などのテキストエディタとブラウザXMLの文法ミスがあると表示されない
方法2：無料のオンラインSVGエディタで描くコードを書かずに、図形やパスをマウスで描きたいブラウザのみ（登録要否はツールによる）保存形式がSVGか、書き出し機能の有無を事前確認
方法3：PNG・JPGから変換・トレースする手元のラスタ画像をベクター化したい変換・トレース機能のある無料ツール写真は再現度が低く、輪郭がギザつきやすい
方法4：生成ツールのSVG書き出しを使うQRコード・バーコードなど規格に沿った図版を、1件でも大量でも正確に用意したいブラウザと元になるデータ（CSV・Excel・スプレッドシートなど）SVG出力に対応しているか、余白や規格の設定を確認

迷ったら、簡単な図形なら方法1、自由な絵やロゴなら方法2、既存画像の再利用なら方法3、QRやバーコードなど定形の図版なら方法4を選ぶと失敗が少ありません。方法1と方法2は組み合わせも可能で、エディタで書き出したSVGコードをテキストエディタで微調整する使い方も実用的です。

方法1：テキストエディタでSVGコードを直接書く

最も確実で、追加ソフトも登録も不要なのがこの方法です。SVGはXML形式のテキストなので、メモ帳などのテキストエディタで記述し、拡張子を.svgにして保存すれば完成します。以下はコピーして使える最小の雛形です。

<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"> <rect x="20" y="20" width="160" height="160" fill="#4a90d9" /> <circle cx="100" cy="100" r="50" fill="#ffffff" /> </svg>

各要素の役割は次のとおりです。svgタグは描画領域全体を定義し、xmlnsはSVGの名前空間を示します。widthとheightは表示サイズ、viewBoxは内部座標の範囲を決める重要な属性です。rectは四角形、circleは円、pathは任意の曲線や直線を描きます。

viewBoxを設定しておくと、表示サイズを変えても図形の比率が崩れません。たとえばviewBox="0 0 200 200"のままwidthを400に変えれば、図形は2倍に拡大されます。座標はviewBoxの値で指定するため、widthとheightだけを変更しても位置関係は保たれます。

保存手順は、テキストエディタで「ファイル名.svg」として保存するだけです。文字コードはUTF-8を選んでください。Windowsのメモ帳では保存時に「ファイルの種類」を「すべてのファイル」にしないと、末尾に.txtが付いてしまう点に注意します。保存したSVGはブラウザにドラッグ&ドロップすれば表示を確認できます。

表示されない場合は、タグの閉じ忘れ、属性値のダブルクォート漏れ、XML宣言の書き誤りを疑ってください。ブラウザで開いて真っ白なときは、まずfillの色指定とviewBoxの数値を確認すると原因を切り分けられます。

方法2：無料のオンラインSVGエディタで描く

コードを書かずに、キャンバス上で図形ツールやパス編集を使って描く方法です。ブラウザ完結型のツールならインストール不要で、登録不要のものも多くあります。作業の流れは、新規キャンバスを作成し、四角形・円・線などの図形ツールで形を置き、必要ならパス編集で頂点を追加・調整し、最後にSVG形式でエクスポートする、という順序です。

無料ツールを選ぶ際は、次の点を確認してください。

エクスポート後にコードを開き、widthとheightに固定値が入っている場合は、viewBoxと合わせて数値が整合しているか確認します。ツールによっては不要なメタデータやグループ化タグが付くことがあるため、配布や埋め込みに使う場合はテキストエディタで整理するとファイルを軽くできます。

方法3：PNG・JPG画像からSVGに変換・トレースする

手元のラスタ画像をベクター化する方法です。自動トレースは輪郭をなぞってパスに変換する仕組みで、ロゴや線画、アイコンなど色数が少なく輪郭がはっきりした画像ほど向いています。一方、写真やグラデーションの多い画像はパスが大量に生成され、ファイルが重くなるうえ再現度も下がります。

変換前に知っておきたいのは、トレースは元画像を完全に復元するものではないという点です。色数を減らす、背景を透過または単色にする、解像度を上げて輪郭をはっきりさせる、といった前処理を行うと結果が安定します。変換後は不要なパスの結合や頂点の削除を行い、パス数を減らすと表示も軽くなります。

変換結果の確認では、拡大したときに輪郭がギザついていないか、意図しない隙間や塗り残しがないか、色が元画像と大きくずれていないかを見ます。用途が印刷であれば、変換後のSVGをそのまま入稿せず、必要に応じてパスの整理や色指定の見直しを行ってください。

なお、SVG形式での入稿や入稿先の対応可否はサービスごとに異なります。バーコードやラベルのように規格が決まった図版を扱う場合は、変換ではなく専用の生成ツールを使うほうが正確です。当サイトでも用途別の生成ツールを公開しています。たとえばバーコード形式ガイドでは各形式の特徴を、Excel用バーコード一括作成ツールでは表データからの一括生成手順を確認できます。

方法4：生成ツールのSVG書き出しを使う（QR・バーコード例）

デザインをする必要がなく、QRコードやバーコードの「SVGファイルそのもの」が欲しい実務シーンでは、生成ツールのSVG書き出し機能を使うのが最短ルートです。オンラインのQRコード・バーコード生成ツールに内容を入力し、出力形式でSVGを選ぶだけで、パスで構成されたベクター形式のファイルが得られます。

たとえば商品ラベル用のJANコードや社内管理用のCODE39を10件分まとめて用意する場合、1件ずつ画像ソフトで作るより、データを貼り付けて一括生成し、SVGで書き出すほうが作業漏れも少なくなります。SVGは拡大しても輪郭がぼやけないため、名刺サイズのQRからA4ラベル、大型の掲示物まで同じファイルを流用できるのが実務上の利点です。

入力から出力までの流れは次のとおりです。

  1. 生成ツールでコードの種類（QRコード、JAN、CODE39、ITF14など）を選ぶ
  2. URLや数字列などの内容を入力する。一括生成なら表形式でまとめて貼り付ける
  3. 出力形式でSVGを選択し、サイズや余白（クワイエットゾーン）を指定する
  4. ダウンロードした.svgファイルを、必要ならテキストエディタで開いてviewBoxや色を微調整する

注意点として、SVG書き出しに対応していない生成ツールもあります。その場合はPNG出力しか選べないことがあるため、事前に出力形式の選択肢を確認してください。また、印刷用に使う場合は、生成時の余白設定が規格に合っているかを必ず確認します。バーコードの桁数や規格の考え方はバーコードの桁数について、形式ごとの違いはバーコードフォーマットガイドで確認できます。実際に一括生成を試すなら無料バーコード作成・一括生成ツールが入口になります。

大量のSVGを無料で用意する：QRコードの一括生成

SVG作成の需要が特に大きいのが、QRコードを「必要な数だけ、無料で、正確に」揃えたい場面です。イベント受付、商品タグ、名簿ごとのリンク配布など、数十〜数百件のQRコードをSVGで用意するとき、1件ずつエディタで作るのは現実的ではありません。ここでは一括生成の代表的な入力元と、それぞれの使い分けを整理します。

CSVから一括生成する（bulk qr code generator from csv）

最も汎用性が高いのがCSV入力です。1行に1件の内容（URL、テキスト、管理番号など）を並べたCSVを用意し、生成ツールに読み込ませて一括生成します。Excelやスプレッドシート、基幹システムから出力したデータをそのまま流用できるため、既に一覧表がある場合はこの方法が最短です。列の順序や文字コード（UTF-8推奨）を事前に揃えておくと、読み込み時のエラーを減らせます。

Excelデータから一括生成する（bulk qr code generator from excel）

Excelファイル（.xlsx）を直接読み込めるツールなら、CSVに書き出す手間すら省けます。セルに内容を並べてアップロードするだけで、行数分のQRコードをまとめて生成し、SVGで書き出せます。社内の台帳や商品マスタがExcelで管理されている場合は、この経路がもっとも自然です。数式で内容を組み立てている場合は、生成前に値として貼り付けておくと意図しない参照を防げます。

Googleスプレッドシートで一括生成する（bulk qr code generator in google sheets）

チームでデータを管理しているなら、Googleスプレッドシートを入力元にする方法が便利です。シートをCSVとしてダウンロードして生成ツールに読み込むか、スプレッドシートのデータをコピーして貼り付ける形で一括生成します。複数人で内容を更新しながら、必要なタイミングでまとめてSVGを書き出せるのが利点です。共有設定や編集権限は、生成前に整理しておきましょう。

テキストをまとめて貼り付けて生成する（bulk qr code generator with text）

表形式にまとまっていない場合でも、改行区切りのテキストを貼り付けるだけで一括生成できるツールがあります。案内文、Wi-Fi設定情報、連絡先テキストなど、短い文字列を複数用意する場面に向いています。CSVやExcelほど厳密な形式を求められないぶん、手軽に試せるのが特徴です。

無料・オンライン・モバイルでの一括生成（free / online / mobile）

一括生成は、無料のオンラインツールでも基本的な件数であれば対応しているものが多くあります（件数の上限や透かしの有無はツールごとに異なるため、利用前に規約を確認してください）。また、モバイルのブラウザからでも、CSVやテキストを貼り付けてSVGを書き出す操作は可能です。外出先で急ぎのラベルを用意したいときは、スマホ対応の生成ツールを選ぶと作業が止まりません。大量件数を扱う場合は、PCでデータを整えてから生成するほうが確認作業は楽になります。

128件規模の一括生成（bulk qr code generator 128）とExcelデータからの無料オンライン生成

「128件」のように、中規模のまとまった件数を一度に用意したいケースもよくあります。この規模になると、1件ずつの確認は現実的でないため、生成後にファイル名や内容の対応表を残しておくことが重要です。無料のオンライン一括生成ツールでExcelデータを読み込み、SVGで書き出したうえで、元データと生成ファイルを突き合わせて件数と内容を検証する、という流れが安全です。件数が多いほど、生成前のデータ整形と生成後のチェックに時間を割く価値があります。

入力元・条件向いている場面事前に整えるもの注意点
CSV（bulk qr code generator from csv）既存の一覧表やシステム出力がある1行1件の形式、文字コードUTF-8列の順序とヘッダーの有無を揃える
Excel（bulk qr code generator from excel）社内台帳や商品マスタがExcelにある値の貼り付け、不要列の削除数式は値に変換しておく
Googleスプレッドシートチームでデータを共有・更新している共有範囲と編集権限生成前にCSV書き出しまたはコピーで渡す
テキスト貼り付け（with text）短い文字列を複数まとめて作りたい改行区切りの整理空行や重複がないか確認
モバイル（mobile）外出先で少数〜中規模を用意したいブラウザで開けるデータ大量件数はPCで作業するほうが確認が楽
128件規模の一括生成イベント受付や配布物の中規模ロット元データと生成ファイルの対応表生成後の件数・内容の突き合わせ

無料SVG作成手段の比較表

ここまでの4ルート（コード手書き、オンラインエディタ、画像トレース、生成ツールの書き出し）を、選び方の判断軸で横断比較します。自分がどの状況にいるかを照らし合わせて、最初に試す手段を決めてください。

手段無料範囲登録要否スマホ対応商用利用学習コスト出力品質向く用途
テキストエディタでコード手書き完全無料不要△（アプリ次第）自分の著作物として扱いやすい高（構文の理解が必要）軽量で高精度アイコン、簡単な図形、ロゴの調整
オンラインSVGエディタ基本機能は無料が多い不要〜任意○（ブラウザ完結型）ツールの規約に従う低〜中パス編集次第で高い図形・イラスト・バナー制作
画像トレース（ラスタ→ベクター）無料枠ありツールによる△〜○元画像の権利に注意低元画像の解像度に依存手書きスケッチやロゴの取り込み
生成ツールのSVG書き出し無料（件数上限はツール次第）不要のものが多い○規約とコード規格の確認が必要とても低い規格どおりで安定QR・バーコード、定形コードの量産

判断の目安はシンプルです。「見た目を自分でデザインしたい」ならオンラインエディタ、「既存画像をベクター化したい」ならトレース、「コード規格に沿ったSVGを大量に用意したい」なら生成ツール、「数個の図形を軽く作りたい」ならコード手書き、という順で検討すると迷いません。スマホだけで完結させたい場合は、インストール不要のブラウザ完結型か生成ツールを選ぶのが現実的です。商用利用の可否はツールごとに規約が異なるため、利用前に必ず各ツールの利用条件を確認してください。

無料ツールで作ったSVGでも、実装や印刷に渡す前に確認すべき点は共通です。次の4項目を1つの図版でチェックすると、ツールの違いを実務の判断に落とし込めます。

確認項目確認する内容問題が出たとき
viewBox座標系と表示領域が意図どおりか余白や切れを修正してから再書き出し
文字使用フォントとアウトライン化の要否代替フォントまたはアウトライン版を用意
stroke拡大縮小時の線幅と線端表示サイズ別に24px・32pxで確認
用途別サイズナビ、ボタン、カードでの見え方同じ素材を複数画面で表示して比較

QRコードやバーコードのSVGでは、これに加えて余白（クワイエットゾーン）と規格の桁数を確認します。拡大しても輪郭が保たれるのがSVGの利点なので、小さな表示サイズで読み取りやすさを確認しておくと安心です。

よくあるつまずきと対処（間違い早見表）

SVGはテキスト形式のファイルなので、少しの記述ミスで表示が崩れます。作成後に起こりがちな失敗と、その原因・対処をまとめました。

症状よくある原因対処
ブラウザで真っ白になるviewBoxの欠落、または座標が描画範囲外svg要素にviewBox="0 0 幅 高さ"を追加し、図形の座標が範囲内か確認する
画像をSVGにしたのに粗い拡張子を変えただけ、または埋め込み画像のままトレースでパス化する。埋め込みラスタ画像が残っていないか確認する
文字が別のフォントや記号になるフォント未指定、文字コードの不一致font-familyを指定し、ファイルをUTF-8で保存する。環境依存を避けるなら文字をパス化する
一部の図形が欠けるパスが閉じていない、fillやstrokeの指定漏れパスの始点と終点を一致させ、fill="none"とstrokeを明示する
ファイルが異常に重い画像のインライン埋め込み、不要なメタデータやパス点の過多埋め込み画像を外部参照にし、不要なグループや属性を削除する
編集ソフトで開くと表示が違うツール独自の属性やCSSに依存している標準的な属性に置き換え、styleはインライン属性で指定する

特に多いのが「PNGの拡張子を.svgに変えただけ」というケースです。これは中身がラスタ画像のままなので、拡大するとぼやけます。SVGの利点である拡大耐性を得るには、パスで構成されているか（テキストエディタで開いてpath要素があるか）を確認してください。真っ白表示の多くはviewBoxの欠落で解決できます。書き出したファイルは、ブラウザと編集ソフトの両方で開いて表示を比べると、環境依存の崩れを早く見つけられます。

よくある質問（FAQ）

あります。コード手書き、無料のオンラインエディタ、画像トレース、生成ツールのSVG書き出しの4系統で、費用をかけずに作成できます。QRコードやバーコードなら、一括生成ツールでデータを読み込み、出力形式でSVGを選ぶのが最短です。

インストール型の無料ソフトとしてはInkscapeが代表格で、本格的なベクター編集ができます。インストールしたくない場合は、ブラウザで動く無料のオンラインSVGエディタを選べば、OSを問わず使えます。

アイコンやイラストのSVG素材を配布しているサイトは多数あります。利用時はライセンス（商用利用の可否、クレジット表記の要否）を必ず確認し、素材を加工した場合は規