Webサイトをリニューアルするとき、制作会社から「ロゴのSVGデータはありますか」と聞かれることがあります。
しかし、手元に残っているのはPNGやJPGだけ。会社設立時に作ったAIデータは見つからず、どのようにSVGを用意すればよいのか分からないケースもあります。
PNGロゴからSVGを用意する方法は、大きく分けて自動変換とベクター化の2つです。
単純な図形ならオンライン変換で対応できることもあります。一方、会社や店舗の正式なロゴとして長く使う場合は、元画像を確認しながらIllustratorで形を整え、ベクターデータとして作り直す方法があります。
PNGやJPGしか残っておらず、Webサイト用のSVGや印刷用AIデータをまとめて用意したい場合は、画像からのベクターデータ作成を依頼できます。
PNGとSVGは何が違うのか
PNGとSVGは、どちらもWebサイトで画像を表示するために使われますが、データの仕組みが異なります。
PNGはピクセルで構成されるラスター画像です。
一方、SVGはXMLベースのマークアップ言語で二次元のベクターグラフィックを記述する形式です。MDNでは、SVGはさまざまなサイズで鮮明にレンダリングでき、CSSやDOM、JavaScriptなどのWeb標準と連携できる形式として説明されています。
違いを簡単に整理すると次のとおりです。
| 項目 | PNG | SVG |
|---|---|---|
| データ形式 | ラスター画像 | ベクター形式 |
| 拡大 | 大幅な拡大で粗さが出ることがある | サイズ変更に強い |
| 写真 | 向いている | 基本的に不向き |
| ロゴ・アイコン | 使用可能 | 特に相性がよい |
| Webでの利用 | 一般的 | Web標準として利用可能 |
| 編集 | 画像編集ソフト | Illustratorなどのベクター編集ソフト |
ロゴやアイコンのように、線や図形で構成されたデザインはSVGと相性がよい用途です。Adobeも、SVGはサイズ変更が必要なロゴやグラフィックに適した形式と説明しています。
PNGロゴをSVGにする3つの方法
PNGからSVGを用意する方法は一つではありません。
目的と元画像の状態によって、適した方法が変わります。
オンライン変換ツールを使う
PNGをアップロードしてSVGへ変換するサービスがあります。
Adobe ExpressにもPNGからSVGへ自動変換する機能があり、画像をアップロードして変換する手順が提供されています。
向いているのは次のようなケースです。
- シンプルな図形
- 単色のマーク
- 一時的にSVGが必要
- 自分で変換後のデータを確認できる
操作が簡単なのが利点です。
ただし、会社や店舗の正式なロゴとして使う場合は、変換後の線や曲線、細かな抜き部分などを確認してから使用する必要があります。
Illustratorなどで自分でベクター化する
ベクター編集ソフトを持っている場合は、自分でパスを作成してSVGとして書き出す方法があります。
この方法なら、形を確認しながら修正できます。
ただし、複雑なロゴでは次の作業が必要になります。
- 曲線の調整
- 線幅の統一
- 不要なポイントの整理
- 色の確認
- 文字部分の処理
- 背景の削除
- SVG書き出し後の表示確認
今後も頻繁にベクターデータを作成するなら、ソフトの操作を覚える価値があります。
一度だけ必要な場合や、公開中のWebサイトで使う正式なロゴの場合は、作業時間と精度を比較して外注を検討します。
トレースを外注する
PNGロゴを見本として、Illustrator上でベクターデータを作成してもらう方法です。
特に次のような状態では外注を検討しやすくなります。
- 元画像が小さい
- 輪郭がぼやけている
- ロゴを長期運用したい
- SVGとAIの両方が必要
- Webと印刷の両方で使いたい
- 自分でIllustratorを操作できない
- 納期が決まっている
送客先サービスでは、粗い画像や写真しか残っていないロゴのトレース、PNGからAIへのベクター化、Web用SVGなどに対応しています。
拡張子をSVGに変えるだけではベクターデータにならない
注意したいのが、「ファイル名を変更すればSVGになる」という誤解です。
PNGとSVGは内部構造が異なります。
W3CのSVG仕様では、SVGはXMLを基礎として二次元のベクターグラフィックなどを記述する形式として定義されています。
そのため、
logo.png
を
logo.svg
という名前に変更するだけでは、PNG画像の構造がベクターグラフィックへ変換されるわけではありません。
必要なのは、変換ツールを利用するか、元画像を基に線や図形をベクターとして作成する作業です。
Web制作会社からSVGを求められた場合は、「SVGという名前のファイル」ではなく、実際に利用できるデータが必要かを確認してください。
WebサイトでSVGロゴを使うメリット
SVGの大きな特徴は、画面サイズが変わってもロゴを鮮明に表示しやすいことです。
現在のWebサイトは、同じページをさまざまな画面サイズで表示します。
- 大型デスクトップモニター
- ノートパソコン
- タブレット
- スマートフォン
SVGはベクター形式のため、異なる表示サイズへ対応しやすい特徴があります。MDNでも、SVGは任意のサイズで品質を損なわずにレンダリングできる形式として説明されています。
また、SVGはWeb標準としてCSSやJavaScriptなどとの連携も考慮された形式です。
ただし、すべての画像をSVGへ変更すればよいわけではありません。
写真や非常に複雑な画像では、PNGやJPEGなど別の形式が適している場合があります。SVGは特に、ロゴ、アイコン、図形中心のイラストなどで検討しやすい形式です。
SVGが必要でもAIデータを一緒に作る価値がある
Webサイト用にSVGだけ必要な場合でも、今後の運用を考えるならAIデータも保管しておくと便利です。
会社や店舗のロゴは、Webサイト以外にも使われる可能性があります。
- 名刺
- チラシ
- パンフレット
- 店舗看板
- ステッカー
- パッケージ
- ユニフォーム
- SNS画像
- イベント装飾
Web用SVGだけを持っている状態より、編集・印刷用のマスターデータも管理しておくほうが、将来の展開に対応しやすくなります。
送客先サービスは、SVGに加えてAI、PDF、PNG、JPG、PSD、EPSなどの形式に対応しています。
依頼時には、現在必要なSVGだけでなく、今後の使用予定も伝えて納品形式を相談すると無駄がありません。
PNGロゴのベクター化を依頼するときに伝えること
見積もりを依頼する際は、PNG画像だけを送るより、用途を一緒に伝えたほうがスムーズです。
最低限、次の内容を整理します。
- 元のPNGまたはJPG画像
- SVGの使用目的
- Webサイトのロゴとして使うこと
- AIデータも必要か
- 印刷物でも使用する予定があるか
- 希望納期
- 元画像から形を調整したいか
- 背景透過データが必要か
たとえば次のように伝えます。
「現在PNGしかありません。会社サイトのリニューアルでSVGが必要です。今後は名刺と看板にも使う予定なので、印刷用データについても相談したいです」
これだけでも、単純な形式変換を求めているのか、長期利用するロゴデータを作成したいのかが伝わります。
トレースとロゴの作り直しは別の作業
依頼前に区別しておきたいのが、トレースとデザイン変更です。
トレース
現在のロゴを基に、形状をベクターデータとして作成します。
元のデザインを維持したい場合に向いています。
調整を含むデータ化
元の形を基準にしながら、曲線や線幅などを整えます。
古いロゴや手書きロゴなど、細部の調整が必要な場合に使われます。
ロゴの再デザイン
マークの形、書体、配置、配色などを変更し、新しいロゴとして設計します。
これは単純なトレースとは異なる作業です。
送客先サービスでは、単純な画像のトレースと、調整を伴う作業で料金目安が分けられています。また、手書きロゴの形を整えるデータ化や、長期運用を考えたロゴデータ作成も相談対象です。
自動変換と外注は目的で使い分ける
無料のSVG変換ツールと専門家への依頼は、どちらか一方が常に正解というものではありません。
目的で選びます。
| 状況 | 選択肢 |
|---|---|
| とりあえずSVGを試したい | 自動変換 |
| シンプルな図形を変換したい | 自動変換を試す |
| 正式な企業ロゴとして使う | トレースを検討 |
| 元画像が極端に粗い | 個別相談 |
| SVGと印刷用AIが必要 | 外注を検討 |
| ロゴの形も調整したい | 調整対応可能な制作者へ相談 |
| 急ぎで必要 | 納期を確認して依頼 |
Adobe ExpressのようにPNGからSVGへ変換できるツールは存在するため、まず試してみる方法もあります。
その結果を見て、
- 曲線が不自然
- 小さな文字が崩れる
- 不要な部分まで変換される
- 正式なロゴデータとして保管したい
- Web以外でも使いたい
といった事情がある場合は、ベクター化の外注を検討します。
SVG納品後に確認するポイント
SVGを受け取ったら、Webサイトへ掲載する前に確認します。
主な確認項目は次のとおりです。
- PCで正常に表示されるか
- スマートフォンで正常に表示されるか
- 小さく表示しても形が崩れていないか
- 大きく表示しても鮮明か
- 背景色を変更したときに問題がないか
- ロゴ周囲に不要な余白がないか
- 制作会社が扱える形式になっているか
SVGはWeb向けのベクター形式ですが、実際のサイトでの使い方は制作環境によって異なります。
Web制作会社が決まっている場合は、「SVGをください」と言われた段階で必要条件を確認し、その情報をデータ作成者へ共有すると進めやすくなります。
24時間以内の納品が必要な場合は最初に伝える
Webサイト公開日が迫っている場合、ロゴデータだけが不足して制作が止まることがあります。
このようなときは、見積もり時点で納期を明確に伝えます。
送客先サービスでは、単純な画像のトレースについて、急ぎの場合は24時間以内の納品も可能と案内されています。複雑な図案や調整が必要な作業は内容によって見積もりとなるため、元画像を添えて早めに確認する必要があります。
急ぎの依頼では、次の情報を最初にまとめます。
- 元画像
- 必要な形式
- 使用目的
- 納品希望日時
- 修正の有無
- Web制作会社からの指定事項
情報を後から小出しにすると確認の往復が増えるため、最初にまとめて伝えます。
著作権を確認してからトレースを依頼する
画像を持っているからといって、すべて自由にトレースできるわけではありません。
他者が権利を持つキャラクター、イラスト、企業ロゴなどを無断で複製する依頼は避ける必要があります。
送客先サービスでも、他者に著作権がある画像のトレースは受け付けないと明記されています。
依頼前に確認したいのは次の点です。
- 自社が権利を持つロゴか
- 制作者との契約でデータ利用が認められているか
- 第三者の画像を無断使用していないか
- 生成AI画像の場合、利用するサービスの条件に問題がないか
会社の正式なロゴを長く使う場合ほど、データ形式だけでなく権利関係も整理しておく必要があります。
PNGしかなくてもWeb用SVGは準備できる
手元にPNGロゴしかなくても、Webサイトのリニューアルを止める必要はありません。
まずは次の順番で進めます。
- AIやSVGなど元データが本当に残っていないか探す
- 過去のデザイナーや制作会社へ確認する
- 手元で最も高解像度のPNGやJPGを用意する
- Web制作会社へ必要形式を確認する
- 自動変換で足りるか判断する
- 必要ならベクター化を依頼する
- SVGと将来使うマスターデータを保管する
SVGはWebサイトで使いやすいベクター形式で、異なるサイズでも鮮明に表示しやすい特徴があります。
一方で、ロゴはWebサイトだけで終わるデータではありません。
今後、名刺、看板、ステッカー、パッケージなどへ展開する可能性があるなら、SVGだけでなく印刷や編集に使える形式も含めて準備しておくと便利です。
PNGやJPGしか残っておらず、自分でベクター化できない場合は、元画像と使用目的を送ってSVG作成が可能か確認できます。
