【SVG画像とは？】無料ソフトを使って作ってみた
スポンサーリンク
ブログを始めて1か月の初心者ですが、ブログに載せるときに画像がぼやけるのが嫌だなーと思い色々と調べてみると「SVG画像」というものがあることを知りました。
実際にSVG画像を作って表示させてみたのですが、これがとてもきれいなんです！
今回はそんなSVG画像について調べてみましたのでご紹介します。
SVGとは
そもそも
SVGってなに？
っていうところからなのですが、SVGとは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で、
ベクター画像を記述するためのマークアップ言語。PostScriptをもとに開発された。ベクターグラフィックスであるため、解像度にかかわらず、高品質な表示となる。データ形式はXMLをもとにしており、すべてテキストデータで記述される。
出典：ASCII.jpデジタル用語辞典
上に記載のあるベクター画像とは、
線を用いて図形を描画・管理した画像。ベクトル画像、ベクターグラフィックスとも呼ぶ。点の集まりで描画するビットマップ画像とは異なり、図形の拡大や縮小などを行っても、画像が劣化しない。
出典：ASCII.jpデジタル用語辞典
ちなみにビットマップ画像の代表的なファイル形式はJPEG、PNG、GIFなどです。
下の図はイラストの一部分を5倍に拡大したときのJPEG画像とSVG画像の比較です。
つまり、ビットマップ画像であるJPEGやPNG画像は拡大すると粗くなりますが、ベクター画像であるSVGは拡大してもきれいってことですね。
SVG画像を作成できるソフトウェア
SVG画像を作成・編集できるソフトウェアとして最も有名なのはAdobe Illustrator（アドビ イラストレーター）ですが、利用するにはお金がかかります。
「無料がいいよ」という方のために、代替のソフトウェアとして「Inkscape（インクスケープ）」や「Gravit Designer」などがあります。
実際にInkscapeとGravit Designerで下のイラストを作ってみましたが、操作性も悪くないので意外とカンタンに作れました。
Inkscapeで作成
Gravit Designerで作成
はてなブログへ画像を表示させる
作成したSVGファイルをテキストなどで開き、コードを表示させてHTMLに直接コピペすれば完成です。
See the Pen bGNXwMb by matsutarou (@mattunn) on CodePen.
まとめ
SVG画像は劣化が無いのでRetinaディスプレイなどできれいに表示する場合にはとても便利だと思います。
ただ、複雑な画像などはコードがすごく長くなってしまうので、直接HTMLにコピペする方法はちょっと面倒かな、という感想です。
また、はてなブログの見たままモードで編集していたのですが、HTML編集でコードをコピペすると色々不具合が出てしまいました。
とりあえずHTMLモードに切り替えると改善しました。
よく分かりませんが、SVGコードを直接記述する場合は見たままモードは良くないのかも。
もっと勉強が必要です。
ここまでお読みいただきありがとうございました。
