直接書き出すとえらいことに。

こんにちは。「ふ」です。

webページに貼っても劣化しないSVG画像。素晴らしいですね。以前イラレでベクター画像をSVGで書き出しましたが、ドロップシャドウを使ったものを書き出すとどうなるのでしょうか。

円にドロップシャドウで影を落としたもの。
このベクター画像をSVGで書き出し、テキストエディタで見てみます。

6000行オーバー。

ファイルサイズを調べてみると496KBもあるのだ。 ちなみに.png書き出しだと46KBでした。

グラフィックソフトで単純な画像に影を落としただけでもここまでファイルが肥大化してしまうのです。こりゃあ読み込みに時間が掛かりそうだ。

何か別の方法を考えないと、せっかくwebページを訪れてくれた方をイライラさせてしまいますね。ちなみに「ふ」は10秒以上読み込み時間がかかるページは直帰します（← せっかち）

CSSを使ってみる。

１つ目の方法。

CSSには「filter:drop-shadow」というプロパティが存在します。これは、「透過部分に影を落とす」ことができるものです。
従って.png画像や.svg、また<h1>などのオブジェクトにも適用することができますよ。

便利なプロパティが登場したものですね。これをSVGにも使ってみましょう。

上の画像はただの円をSVGで書き出したものです（ちなみにファイルサイズは4KB。軽い！）。
「id = "kagenasi"」としてCSSを仕込んでみます。

やればできるじゃないか。

ファイルサイズは４KBの軽量なままに、影を落とすことができました。

影を自作。

もう１つの方法。SVGファイルの内容を直接書き換えて、影となる部分を作ってみましょう。
さっきのkagenasi.svgをテキストエディタ（なんでも良い）で開いてみます。

このうち、

この部分が円を描画しているコードとなります。

座標を少しずらして、その下にもう１つ円を描きましょう。class名は「st0」としています。

コードは上から順に実行されていくので、後ろにオブジェクトを置きたいときは元のオブジェクトの上にコードを記述します。

ここでプレビューしてみましょう。

背面に円のオブジェクトを配置することができました。
影として使いたいので、塗りつぶし(fill)は黒にしたい。SVGファイルの<style>〜</style>の中身を設定します。

背面オブジェクトが黒で塗りつぶされました。というか、

SVGファイル内にCSSがある!

扨（さて）、この影にぼかし効果を加えたいと思います。
SVGファイルではfilterを定義し、適用させたいセレクタに対してそのアンカーを指定します。

ファイル内のグローバル部分にfilterを定義します。

効果を適用したい「st0」に対してfilterをアンカーさせます。

ついでに少し透明にしましょう。

できましたな。

どっちを使うべきか。

SVG画像に影を落とす方法、2通り紹介しましたが、どっちを使うと良いのでしょうか。
CSSを使ったやり方は、確かにコーディングも手軽に済みます。

ただ、次のように重なったオブジェクトの場合を考えてみます。

これにCSSで影を落としてみると・・・

不自然だ。

自然に考えれば、全面の青い円の影が後方の緑の円に落ちていないといけません。

CSSでのdrop-shadowは、あくまで「透過部分に影を落とす」 機能なので、前方のオブジェクトの影が背面オブジェクトに落ちることはありません。

ほいじゃあSVGファイルでそれぞれのオブジェクトに対して自作の影をつけてみます。

SVGファイルを直接いじってそれぞれのオブジェクトに影を「自作」すれば、このように後方オブジェクトに前方オブジェクトの影を落とすことができます。

使い分けが肝心。

CSSでのdrop-shadowを使うか、SVGファイルをいじるかはどちらがベスト、というわけではなく、用途によって使い分けるのが良いでしょう。

今後　SVGの仕様が進化してくれればもっと便利になるのでしょうが、現状では以下の使い分けがオススメです。

みんなでSVGを使いまくってメジャー化させれば、CSSのようにどんどんバージョンアップしてくれるかもね ♫