どんなときも美しい画像形式「SVG」

公開日:2020.11.07

スケーラブルなベクターのグラフィック

SVGとは?

「SVGってなあに?」「Scalable Vector Graphics(ネイティブな発音)」「いや、分からんよ」「スケーラブルなベクターのグラフィックだよ」。かつて、こんなやり取りが世界のどこかで行われたかもしれません。

その名の通りの存在ですが、画像形式としては比較的新しく、なおかつ、馴染みがない方も多いのではないかと思います。私はレスポンシブデザインなウェブ制作に着手するまで知りませんでした。

そもそもベクターって何ぞ? という方に向けてざっくり説明すると、拡大・縮小が無限にできる形式です。企業や商品などのロゴは基本的にベクターデータで作られています。データ作成に使われるアプリケーション(ソフト)は『Illustrator』が主流です。

Illustratorの形式のひとつであるAI形式はウェブ上で使用できませんが、SVG形式はAI形式と同じ特徴を持ちながらウェブ上で使用できるんです。ある意味、JPGやPNGの仲間ですが、こちらはピクセルデータ。SVGはベクターデータなので、それらとは使用される場面や目的が異なります。

SVGが使われるようになった理由

SVGが使われるようになった理由

SVG形式が使用されているのは、ウェブサイトのロゴやメニューなどのアイコンがほとんどかと思います。では、何故これらにJPGやPNGではなく、SVGが使用されるようになったのでしょうか。ウェブは専門ではありませんが、どうやら技術の進化やそれに伴う変化が関係しているようです。

私個人が異変に気付いたのは、2018年にiMacを買い替えたとき。その頃、既にiPhoneやMacなどはRetinaディスプレイが採用されていました。それまで数年使っていた古いiMacと同じサイトを見ていて「なんか汚い」と感じ、調べてみたところ、画像の元の大きさがウェブ上で表示している2倍でないと画像がぼやけて見えることが判明。表示サイズ=実際のサイズだと2倍に引き伸ばしている状態で、これをどうにかしたくても、ページを見ているユーザー側ではどうすることもできません。

私のような経験をして解決策を探した方も、その事実に早い段階で気付いて対策をした方もいらっしゃるのではないかと思います。それに加えて、最近のウェブサイトはレスポンシブデザインが当然といった感じ。大きな画面でも小さな画面でもキレイに表示されるSVG形式が注目され、使用されるようになったのではないでしょうか。

どうやって作るの?

SVGデータはどうやって作る?

Illustratorの場合、普段通りに制作して最終的にSVG形式で書き出すだけ。書き出したものはもちろんIllustratorで開いたり編集ができて、なんと、テキストエディタでも開けてしまいます。

SVGデータをテキストエディタで開いてみると、HTMLやCSSのような記述がされています。うーん、なんだか分かりそうで分からない。どう考えても、文字を打つよりイラレで作ったほうが速い。たったこれだけのものを表すのに何文字使うんだよ、なんて思ってしまいますが、画像を作る・イラストを描くというのは、それだけ複雑な作業であるとも言えますね。

ちなみに、PNG形式などベクターデータではない画像をIllustratorで開いた場合でも、SVG形式で書き出すことができます。こんな使い方をする機会はないはずですが、試してみたところ、元のPNGデータよりかなり大容量のデータになりました。なんでもSVGにすればいいわけではないので、画像の内容や用途にあった保存形式を選んでください。

SVGデータ制作の注意点

SVGデータ制作の注意点

私の制作時の経験として、Illustratorで制作したものを書き出しても、アプリケーション上と同じ見た目のSVGデータができなかったことがあります。

該当データは「パスの変形」を適用したオブジェクトで、書き出したらなんと、変形の適用前とすら違う状態に。アピアランスを分割したら解決しました。こういった自体も考えられるので、書き出した後は必ずデータを確認したほうがいいかもしれません。

また、上でも少し触れましたが、データによっては他の保存形式のほうが適している場合もあります。今回の例(本館『まにまにスタジオ』)のようなシンプルなメニューアイコンではないのなら、一旦、他の保存形式の使用も検討してみてください。

厳選お品書き

Graphic/YouTube
2020.11.21
Graphic/Movie
2020.11.07

メモを書いた人

さかがわまな[Mana SAKAGAWA]

当サイトで使用している挿絵や図はすべてさかがわまなの制作物であり、それらに登場しているキャラクターはさかがわまなの創作作品の登場人物です。創作作品については本館『まにまにスタジオ』をご覧ください。

ご意見・お問い合わせなどはinfo★mana-s.com(★を@に変えてください)、またはX(旧Twitter)までお願いいたします。