どーも！
たかぽんです！
今回はsvg画像について調べてみようと思います...!
svg画像って何？
先日業務でデザイナーさんにいただいていた画像をいじりたいなぁ〜と思ったのですが、ファイルの中身にhtmlらしきコードがあるんですね...
普通のpngやjpg画像だと画像が表示されるはずなんですが、そこで調べてみるとsvg画像と言うらしいじゃないですか...!
幸い、svg画像の加工では画像に表示している文字を書き換えるだけで良くて、htmlのtext要素っぽいものをいじるだけで済みました。
ただ、画像の背景とかどうやってやってるんだろ・・・？って気になったので少し詳しく調べてみようと思いました...!
まず簡単にsvg画像とは...?
ベクター画像と言われる種類に分類され、画像の見た目をそのまま保存するのではなく、その画像を描画するための線や面の情報を数値化したデータで保存して、数式として保存しているようです。
そのため、俗に言うjpgやpngなどのビットマップ画像でのボコボコは発生しません。
例えばbitマップの画像だと、以下のように離れてみると線に見えていても、実際は四角いマスの集まりで表現されています。
ところが、ベクター画像だとbitで表していないので、曲線も綺麗に描けたり、数式ベースなので、サイズを変えても劣化がおきないわけですね...!
（学校で学んだ数学にて、円を表す数式等があったと思います。そのサイズが倍になるようにxを設定すれば円がそのまま大きくなるイメージです！）
ただし...!
写真で撮影した外の風景等には複雑な図形がめちゃくちゃたくさんあります...
葉っぱの形が無数にあったり、木の幹に縦横無尽に走る木目があったり...
木一本でもそんなに複雑なんです。
そういったものに対してはベクター画像は向いていないようです（数式に直すのがめちゃくちゃ難しくなるだろうなぁ...というのはなんとなく感じますね...）
そのため、ロゴマーク等、円、楕円、線、四角形や三角形といった図形での描画が特に相性がいいと言われているようです。
さて、svg画像のイメージはなんとなくつきました...!
それでは試しに作ってみようと思います！
svg画像を作ってみる
手作りで文字や図形のsvg作るのは難しそう(adobe irustrater等でできそう？）なので、photoshopで既存の写真の一部を切り取って試しました...！
svgのプレビューに関してはM1のmacではまだうまく動作しないようでした...
プレビューだけサポートされてないなさそうなので試してみたらちゃんと作ることができました...!
svgの画像
png画像
ちゃんと作ることはできているはずなんですが...
svgの画像がうまく表示されていない気が...w
ちょっと原因はわかりません...orz
svgの画像（多分真っ白に見える）を右クリックで別タブで開けば同じ画像が見えるかと思います。
筆者もそれで見比べてみましたが、正直違いは大してわからず...
もともと写真で撮った一部のため微妙な感じになってるのかな....と。
ちょっとまともな使い方も時間がある時に見てみたい気はしますが...
いったんはsvgがなんとやらを理解できたので満足です...
こう言う知識ってどうやってつければいいかわかんないんですよね...