インラインSVGについて、ぼーっと考えてみた

　どうも！LSSです！！

　SVG、特にインラインSVGという「文字なのに自由に画像を表現できる」技法について、色々考えてました。

メリットとデメリット

まぁ、あの意味不明な文字の羅列を見た事がある人はまず、
「めっちゃ面倒くさそう。画像を貼り付けたらいいだけの話でなんでこんな面倒な事すんの？」
って思われるかな？とは、いつも思いますｗ

デメリット：面倒くさい

でも、それを上回るメリットもあります！

メリット：文字列なのでプログラムから加工しやすい

ただし、これはこのメリットをどう活かすか？を考える方がちょっと面倒くさそうでもありますがｗ

んでも、画像ファイルでは決して真似のできない事ができる重要ポイントでもありますね。

つまり「座標1,1」から

のような場合分けをする必要があった場合に、画像ファイルを用意して実現するなら、「全てのパターン」分の画像を用意しないといけないところが、JavaScriptでSVGを書き出すなら無限数のパターンを用意に実現できる！というのがあります。

他にも…

メリット：HTTPリクエスト回数が少なくて済む

ブログでも、Webサイトでも「アドレス欄に見たいページのURLを打ち込む」または「見たいページへのリンクをクリックする」事でWebページが表示されます。

この時、「対象URLのHTMLファイルがまずダウンロードされ、その内容をブラウザが解釈して表示」される事になります。

そのHTMLファイル内に、背景画像だったり、imgタグによるページ内画像だったりが指定されていた場合。

HTMLファイルとは別のファイルを差し込むために、ブラウザは再度、サーバにファイルダウンロードのリクエストを送り、ダウンロードして、HTMLファイルで指定された方式で差し込んで表示、という事が行われています。

これが、HTMLファイル内に書かれたインラインSVGコードだと、最初にダウンロードしたHTMLファイル内に必要なデータが揃っているため、「再度リクエストしてダウンロードする手間が省ける」という利点があるんですね^^

また、テキストコードによる指定なので、たいていの場合は画像ファイルよりもデータ量が少なくて済み、またもし同じデータ量だったとしても、再度リクエストが生じない分、高速に処理される事になります！

「面倒くさい」はついてまわりますねｗ

SVGはベクター形式の画像ですが、例えていえば「絵描き歌」みたいなもので、

「まーるかいてちょん、まーるかいてちょん」みたいな「描き方の指示」が書かれているというのが基本である以上、写真画像などを表示するのは不向きである、というのは常について回ります。

「ラスターグラフィック」と「ベクターグラフィック」の違いは？という問いには、
「『写真』と『絵』の違い」と答えるのが、もっとも正確で分かりやすいのかも？

SVGは画像、CSSはWebページの装飾、と全く存在意義は異なります。

が、CSSにも画像的な様々な表現ができるところから、「CSSで出来る事・出来ない事」を考えてみました。

CSSでも出来る事

四角形の描画
そもそもHTML自体、要素を四角形としてとらえているので、四角形まわりはバッチリです！
菱形や台形となるとちょっと…ですが、transformを使うとなんとかできなくもないですね。
円の描画
背景の描画として、であれば、radial-gradientを使う事で、円でも楕円でも描画できます。

CSSが苦手な事

四角形以外の多角形（三角形・五角形など）
三角形の描画は本当にCSSは不向きですねｗ
一応、borderの変わった使い方をする事で、できなくもない、って程度です。
線の描画。特に曲線の描画
垂直線・真横の線、はなんとか。あとそれにtransformで角度をつけるか、linear-gradientを工夫してナナメの線を描画する事まではできても、曲線はホントに苦手ですね。
こちらもborderとborder-radiusを「変わった使い方」する事でできる部分もありますが、円の一部を90度単位で切り出したようなものに限られそうです。

これらの描画が、SVGだとかなり自由に描画できる！という利点があります！！

先に書いた通り、別物なんですがｗ

CSS内でSVGを利用する事もできるので、それぞれの長所短所をカバーしあえるような使い方ができれば、可能性が大きく広がりそうですね^^

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^