こんにちは、ワタナベです！
ついこの間10月になったと思ったらもう10月末です。
びっくりです(;´Д｀)
今回は、最近ちょいちょい使い始めたSVGについて書きますー。
まずはじめに…
SVGって？
簡単にいうと、illustratorのベクターデータです。
拡大縮小してもキレイな鮮明な状態で表示してくれます。
ググったら、2000年前後あたりからあるようで驚きです…(;´Д｀)
ちなみにスケーラブル・ベクター・グラフィックスの略だそう。
スマホ表示の時に、PC表示で使っていたテキストの画像なんかをそのまま使うと、なんかぼやーーーってなってることってありますよね？（血涙）
あの現象を、SVGは解決してくれます。やったね！
サイト名、ロゴ、見出しなどビシッと見せたいところに最適だと思います。
SVG作成方法はいくつかあるようですが、illustratorでの書き出しが一番楽で簡単です♪
ちなみにこのSVG、写真などの画素数が多くて複雑な画像には不向きですのでご注意を…
独特なアニメーションなども出来るのも魅力ですね！
自分はまだまだちんぷんかんぷんですが…(+_+)
自分もまだまだSVG初心者なので、初めてSVGを使う時に気を付けるべきこと、これさえやっとけばとりあえず何とかなるってことをいくつかあげていこうかと思います(∩´∀｀)∩
気を付けること【その１】
テキストデータはアウトライン化すべし
初めてテキストデータを書き出す時、ついつい忘れがちになってしまうのですが、テキストデータを書き出す時は、なにか特別なこと、意図的でない場合は、絶対にアウトライン化してから書き出しを行ってください。
アウトライン化しないで書き出すと、いざコーディングして、imgタグで表示させた時、一部OS、ブラウザでフォントが変わることがあります。誰だお前！
気を付けること【その２】
width・heightとViewBoxの設定をすべし
SVGを書き出して、ファイルをひらくと…
<svg xmlns=”http://www.w3.org/2000/svg” width=”200″ height=”200″ viewBox=”0 0 200 200″><circle cx=”100″ cy=”100″ r=”100″ fill=”blue”></svg>
こんな感じにhtmlタグのようなものが表示されているかと思います。
この場合だと、横200px、縦200pxの青い円が表示されることになります。
width／height ＝ 表示エリア
viewBox ＝ 描画エリア（左上のx座標 左上のy座標 右下のx座標 右下のy座標）
cx ＝ 円の中心の X 座標 cy ＝ 円の中心のY座標 r ＝ 円の半径
多分こんな感じ…だと思う。算数、数学みたいで頭が痛くなりますね…(笑)
ここでは簡単に、書き出したデータをそのまま使いたい！って時に、一部ブラウザで変な余白が付くことがあったので、それの予防策？をひとつ。
<svg xmlns=”http://www.w3.org/2000/svg” width=”200″ height=”200″ viewBox=”0 0 200 200“><circle cx=”100″ cy=”100″ r=”100″ fill=”blue”></svg>
width と、ViewBoxの右下のx座標 、heightと右下のy座標、これを同じにしてください。
これで変な余白がなくなります。バイバイ！
気を付けること【その３】
preserveAspectRatio=”none”を設定すべし
これまた一部のブラウザ（主にAndroid端末？）で起こるようなのですが、書き出したものそのまま使って、cssでwidthとか設定していくと、一部のブラウザでアスペクト比がはちゃめちゃなことになっていることがあります(笑)
そんな時助けてくれるのが、 preserveAspectRatio=”none” です。
この子はcssで設定したサイズを反映してくれるらしいです。
<svg xmlns=”http://www.w3.org/2000/svg” preserveAspectRatio=”none” width=”200″ height=”200″ viewBox=”0 0 200 200″><circle cx=”100″ cy=”100″ r=”100″ fill=”blue”></svg>
widthの前あたりに入れてあげると直ります。最後とかに入れるとダメな時があるみたいなので、多分前の方に入れておくのが無難かと。
以上のことに気を付ければ、誰でも簡単に気軽にSVGを使えます。やったね！
あと気を付けることといったら、対応ブラウザとかですかね。
IEなんかは古いブラウザまで対応させたいって時は特に気を付ける必要がありそうです。（代替画像指定とか）
自分もまだまだ勉強中なので何か間違っていたらこっそり教えてくださいね。
話は変わりますが、最近雨続きでイヤですね…。
今週ガンタンクの塗装を行いたいのですが、予報は雨です！
た、台風ー！(;´Д｀)
それでは今回はこの辺で！
ご閲覧ありがとうございました！
