なんだか使いやすいだろうと考えて使ってみたSVGファイル。
きれいにできると期待したものの、
文字の部分が何故か作っていた時と全然違うフォントになっていました!

この現象、なんだか前にも何もあったような…
SVGについてもう一度おさらいです。

SVGについて

SVGファイルでは、コンピューターが「この場所にこの色の線を引いて、この場所には丸を描いて」といったように、
絵を作るための指示を「文字」で書いています。

絵のサイズを変えても、きれいなままで見えることです。
たとえば、風船を大きく膨らませても、しわができないで丸い形のままですよね？
それと同じで、SVGファイルの絵も大きくしたり小さくしたりしても、ぼやけずにきれいに見えるのです。

SVGの特徴

• ベクター画像:
  SVGは「ベクター画像」と呼ばれる形式で、絵や図を「線や点の集まり」として記録。これにより、画像をどれだけ拡大しても、ぼやけたり崩れたりすることがありません。
• テキストで記述:
  SVGファイルの中身は、実はテキスト（文字）で書かれています。たとえば、「ここに丸を描く」とか「この線は赤くする」といった指示が、コードのように書かれているのです。
• 軽量でウェブに最適:
  SVGファイルは比較的小さなサイズで保存できるため、ウェブページに使うときにとても便利。また、どのデバイス（スマホやパソコンなど）でもきれいに表示できます

「ベクターデータ」ということは

「テキストで記述されたデータ」「ベクター画像」と聞いてなんとなく思い出しました…
Illustratorでフォントがないと表示されないあの現象っ！
フォントがデバイスに入っていないあの現象が起こっていました!!
（PCやスマホに「同じフォント入っていない」とその画像の文字は読み込めないことがあります。）

ロゴなど文字を出力する時は、イメージ通りに表示するため必ず
「アウトライン」をかけましょう。

SVGの便利な使い方

ただキレイに表示出来るだけでなく、他にも便利な部分がありますよ！

• 輪郭をなぞるようなアニメーションを作成するときとても便利!!
  コードでできているため、それを活かして動きの指示もできるようになる。(JavaScriptなど)
• デザインツールからファイルを開かなくても、直接エディタからコードを調整することもできます。

結構便利なようなSVGですが、デメリットとして
「文章」と呼べる量のテキストデータや「リアル環境で撮影した画像」をSVGで読み込ませると、ユーザが閲覧できるまで相当な時間がかかってしまいます。
…複雑な画像にはSVGにしないようにしたほうがいいですね。