SVGについてよく知らなかったので調べてみた

コーディング

今回は、「SVGってなんとなく知ってるけど…ロゴとかに使うんだよね？」「画像のファイル形式はとりあえずPNGかJPEG」という私が、SVGの特徴について調べたことをまとめてみました。

SVGとは何か

SVG(Scalable Vecter Graphics)はファイル形式のひとつで、拡張子は.svgです。（圧縮タイプの.svgzというものも）
PNGやJPEGなど他の画像ファイル形式と大きく異なるのは、SVGはXMLにもとづくマークアップ言語で、テキストベースで画像を描画できたり編集できるという点。

例えば、Webサイトのソースコードを検証ツールで確認してみると以下のようなコードを見かけることがあります。

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#4B4B4B;}
</style>
<g>
	<path class="st0" d="M425.063,374.<!-- （中略：英数字がバーーーーっとならんでいる） -->L423.219,437.82z" style="fill: rgb(75, 75, 75);"></path>
</g>
</svg>

これこそSVGをテキストで表したもの（SVGコード）です。

ちなみに上記のコードはこちらの桃の画像をVS Codeなどのテキストエディタで開いてみると表示されます！
（画像はICOOON MONOさんよりお借りしました）

SVGはテキストベースで座標や計算式などを用いて画像を描画している

SVGの特徴

SVGのメリット

  • ベクター画像なので拡大縮小しても画像が荒れずきれいに表示できる
  • レスポンシブ対応が容易（ひとつのファイルでいろんなサイズに対応できる）
  • テキストベースなのでグラフィックソフトがなくてもテキストエディタで編集可能
  • ファイルサイズが軽量
  • 画像だけでなくホバーエフェクトやアニメーションなどの動的なものも描画できる

SVGを使うと、表現の幅が広がりそうですね！

【補足】ビットマップ画像とベクター画像とは

画像の形式にはビットマップ画像とベクター画像があります。

ビットマップ画像とは、画像を色のついた点の集合体として表現したデータのことです。色を細かく表現できますが、実寸よりも大きく表示するとボケてしまうという特徴があります。
PNGやJPEGといった画像ファイル形式がビットマップ画像に当たります。

一方、ベクター画像は、計算式を用いて画像を描画しているため拡大縮小してもきれいに表示できるという特徴があり、SVGはこちらに該当します。

SVGのデメリット

  • 高画質な写真や、複雑な画像の描画には莫大な計算を必要とするため不向き
  • 古いブラウザやデバイスには対応していないことも
  • SVGを編集したりするには専門の知識が必要

SVGはどんな画像に適している？

色数の少ないシンプルな画像が必要なときは、SVGで作成しましょう！

  • ロゴ
  • アイコン
  • グラフ
  • 図
  • 複雑でないイラスト

あるあるかも？実際にあった失敗例

ここで、私が実際につまづいたSVGファイルを扱う上での失敗例をご紹介します！

【失敗①】ロゴをSVGで書き出したら…ぼやけてる？

サイトのデザイン終わったー！
コーディングに入る前にデザインカンプの画像を書き出すぞ！

企業ロゴはSVGで書き出してっと…

〜コーディング後〜

あれ？スマホでサイトを見るとロゴがぼやけてる！
SVGって拡大縮小してもぼやけないんじゃなかったっけ？

SVGはベクター画像だからぼやけないはず…。なのになぜ、ぼやけて見えたのでしょうか？

原因は書き出す前の画像データにありました！

クライアントから提供されたロゴデータ。ファイル形式は「PNG」でした。
実は、ビットマップ画像であるPNGをそのままSVGとして書き出しても、拡大縮小したときにきれいに表示できないんです。

ビットマップ画像はベクター画像のような座標や計算式のデータを持たないため、たとえSVGとして書き出したとしても、中身は実質ビットマップ画像のままなんですね。

SVGで書き出せばきれいに表示できると思ってた…。

どう対応する？

今回のようなケースの場合、クライアントからSVGやAIファイルなどのロゴデータを提供してもらえればいいのですが、そうではなかったので、PNGの画像を2倍の大きさに書き出して縮小して表示する方法をとりました。（他にもっといい方法があるのかも。）

【失敗②】画像のはずなのにフォントが全く別のものに…

サイトのデザイン終わったー！
コーディングに入る前にデザインカンプの画像を書き出すぞ！

ここのキャッチコピーのフォント、Webフォントじゃないから画像にしよう。
SVGで書き出しっと…

〜コーディング後〜

あれ？Safariで見たらキャッチコピーのフォントが全然違うものになってる！
画像のはずなのに、なんで？

テキストはSVGで書き出しても画像として扱われない

テキストはSVGで書き出したとしてもテキスト情報を保持したまま。
そのため、閲覧するデバイスに該当のフォントが入ってないと、代替のフォントで表示されたり、文字化けをおこしたりします。

どう対応する？

テキストをSVG形式で書き出す場合、テキストはアウトライン化しておけばOK！
SVGを作成するソフトによって「パスに変換」や「アウトラインに変換」といったメニューがあるはずなので、それぞれに合った方法でアウトライン化しましょう。

まとめ

SVG、色々調べてみたら奥が深そう！
今までPNGかJPEGばかり使用していましたが、使用できそうであればSVGも積極的に取り入れて行きたいです。

Webサイトに表示する画像をどのファイル形式で表示するかについては、以下のことに気をつけて選びましょう。

  • 写真かイラストか図形かテキストか？（色数や画像の複雑さ）
  • ファイルサイズ
  • 透過する必要があるか
  • 拡大縮小して表示するか

SVGの画像の編集やアニメーションにもそのうち挑戦してみようと思います〜

コメント

タイトルとURLをコピーしました