• HOME
  • コンセプト
  • ブランドストーリー
  • 言葉の地図
  • ガイドマップ

SVG– Canva実務の言葉|言葉の地図(用語集)GLOSSARY –

SVGとは

SVGとは、Scalable Vector Graphics の略で、拡大や縮小をしても品質が落ちにくい画像形式です。CanvaのSVG関連ページでも、SVGは点や線を使うベクター形式で、どの解像度まで拡大しても品質に影響しにくいと説明されています。

PNGやJPGがピクセルベースの画像として使われやすいのに対して、SVGはロゴ、アイコン、イラスト、図版のように、形そのものをきれいなまま扱いたい場面と相性がよい形式です。特に、同じロゴを小さくも大きくも使いたいとき、印刷サイズや画面サイズが変わっても整ったまま見せたいときに向いています。

SVGをひとことで言うなら、「ロゴやアイコンを、荒れにくいまま使い回したいときに向いている形式」です。

ただし、SVGも万能ではありません。写真のような画像をそのまま扱う感覚とは少し違いますし、相手や使う場所によってはPNGのほうが扱いやすいこともあります。なのでSVGは、「きれいそうだから選ぶ形式」ではなく、「サイズ変更に強い状態で使いたい」ときに選びやすい形式として見ておくと整いやすくなります。

Canvaではどこにある?

CanvaでSVGを書き出すときは、エディター右上の「共有」から「ダウンロード」を開き、ファイル形式の中からSVGを選びます。Canvaのダウンロード形式の案内では、透過PNGやSVGはCanva Pro向け機能として記載されています。

また、CanvaのSVG関連ページでも、「Share > Download から SVG を選ぶ」という流れで保存できると説明されています。

操作だけ見るとPNGと似ていますが、意味合いは少し違います。PNGが「画像として見せる」方向に近いのに対して、SVGは「形をきれいなまま保つ」方向に強い形式です。なので、ここは保存ボタンというより、「このロゴやアイコンをどんな状態で残すか」を決める場所として見るとわかりやすくなります。

とりあえずPNG、の落とし穴

「とりあえず画像だからPNGで保存しよう」とするのが、最もよくある制作の状態です。

しかし、後から別のサイズや印刷物で同じロゴを展開したくなかった時、PNGしか持っていないと致命的です。

無理に引き伸ばすことで画質が粗くなり、使い物にならなくなってしまいます。

「元データ」と「掲載用」の役割分担

ブログやSNSに投稿する最終画像まで、すべてをSVGにする必要はありません。

実務では「元データとして保管するSVG」と「最終的な出口である掲載用としてのPNG」。

このように、用途と出口に応じて役割を明確に分けることが、スムーズで事故のない制作のコツです。

なぜ重要なのか

拡大しても荒れない耐性

SVGの最大の強みは、どれだけ拡大しても境界線が絶対に崩れないことです。

ブランドロゴやアイコンは、名刺のような極小サイズから、ポスターや看板のような巨大なサイズまで幅広く使われます。SVGを持っていれば、あらゆる使用環境に完璧に対応できるのです。

ブランド管理の中核として

Canvaでは、ブランドロゴのアップロード形式としてSVGを公式にサポートしています。

SVGは単なる「書き出しの選択肢」ではありません。

「ブランドの視覚的資産を、常に正しい高品質な状態で管理する」という、実務の根幹に直結する極めて重要なフォーマットです。

サイズ変更のたびに困らない

「あのロゴ、もう少し大きくしたいけど画質が粗くなるかも…」という日々の小さなトラブルを未然に防ぎます。

SVGを基準にしていれば、サイズ変更のたびに生じる画質確認の手間や、解像度不足による作り直しのコストを大幅に削減できます。

長く使い続けるための資産

ロゴやアイコンは、一度作って終わりではありません。何年にわたって様々な場所、媒体で使い回していくものです。

「形をきれいに保ったまま、長く使い続けたい」そんな長期的な視点に立った場面でこそ、SVGはその真価を発揮します。

崩れる/誤解される瞬間

「すべてSVGにすればきれい」という誤解

「きれいに見せたいなら、写真もすべてSVGで書き出せばよい」と思ってしまうのは大きな誤解です。

写真や複雑なテクスチャを含む画像をSVGにしても、データが重くなるだけで意味がありません。

SVGが向いているのは、あくまでロゴや図版などの「ベクター(線画)要素」のみです。

「PNGの上位互換」という見方

「高画質なPNGのさらに上がSVG」という捉え方も危険です。拡大耐性では慣れていますが、両者は得意分野が異なります。

完成したビジュアルをWebサイトに載せる時などは、データ容量が軽く、どの環境でも表示が安定するPNGの方が圧倒的に扱いやすい場面が多々あります。

「ロゴはPNGがあれば十分」という短期思考

「今のSNSアイコン用にPNGがあれば十分」と考えてしまうこともあります。

短期的には足りますが、将来的に印刷物や別媒体で大きく展開する時、必ず「高解像度のデータがない」という壁に激突します。

最初からSVGを用意しておくことが、未来の自分を助けます。

「画像」として捉えてしまうこと

根品的な誤解は、SVGを単なる「超高画質画像」として扱ってしまうことです。

SVGの本質は「形式データ(指示書)」です。ここを理解すると、「なぜ写真には向かないのか」「なぜ拡大に強いのか」というすべての理由が腑に落ち迷いがなくなります。

用途の混同によるトラブル

SVGの強みと本質を理解せずに運用すると、実務での思わぬトラブルに直結します。

「重い写真を無理やりSVGにする」「Webサイトのレイアウトに直接SVGを多用して表示崩れを起こす」など、適材適所を見誤ると、かえって制作のフローを破壊することになります。

この言葉が使われる場面

SVGという言葉は、Canva実務ではこんな場面でよく出てきます。

  • ロゴをきれいなまま保存しておきたいとき
  • サイト用アイコンをサイズ違いで使いたいとき
  • 図形ベースのパーツを荒れにくい状態で持っておきたいとき
  • ブランドロゴをCanvaのブランド機能に登録したいとき
  • 印刷サイズや表示サイズが変わっても整えて使いたいとき

こうして見ると、SVGは「形をきれいなまま残しておきたい出口」でよく登場します。

なのでSVGは、単なる画像形式の名前として覚えるより、「ロゴやアイコンを長く使いたい」「拡大しても荒れにくい状態を保ちたい」という条件がそろう場面で使いやすい言葉として理解しておくと扱いやすくなります。

SVGを書き出す前に、次の3つだけ見てみてください。

  • これはロゴやアイコンのように、形そのものをきれいに保ちたいデータか
  • 今後サイズ違いで使う可能性があるか
  • 掲載用画像ではなく、元データとして持っておく価値があるか

この3つに当てはまるなら、SVGはかなり相性がよい形式です。

次に進む小さな一歩

今Canvaで使っているロゴやアイコンをひとつ選んで、「これは掲載用画像なのか、それとも元データとして持っておきたいのか」を先に言葉にしてみてください。

そのうえで、「サイズ変更の予定はあるか」「PNGだけで足りるか」「SVGも残しておくと後で楽か」を確認してから書き出すと、SVGをなんとなくではなく判断で使いやすくなります。

一度だけこの整理をしておくと、掲載用の画像と、長く使うための元データの違いがかなり見えやすくなります。