SVG画像に影を落とす。

〽️ 読み込みspeedを速めたい。





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

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

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

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

テキストエディタ







6000行オーバー。

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

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

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



CSSを使ってみる。

1つ目の方法。

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

HTML

フーノページ

CSS

h1 { filter: drop-shadow(3px 3px 5px cyan); }

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

kagenasi.svg

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

HTML

CSS

#kagenasi { filter: drop-shadow(3px 3px 5px #000); }

ブラウザ

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

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



影を自作。

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

kagenasi.svg

このうち、

<circle class="st0" cx="420.9" cy="250.5" r="166.6"/>

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

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

「「3//ベクターオブジェクトを追加」」 「「1<circle class="st0" cx="440" cy="270" r="166.6"/>」」 <circle class="st1" cx="420.9" cy="250.5" r="166.6"/>

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

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

ブラウザ

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

ブラウザ

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

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




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

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

「「3//filterを定義」」 「「1 」」

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

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

<circle class="st0" cx="440" cy="270" r="166.6" 「「1opacity "0.8"」」 /> <circle class="st1" cx="420.9" cy="250.5" r="166.6"/>


できましたな。



どっちを使うべきか。

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

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

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


◼︎CSSでの影指定




不自然だ。





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



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

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

◼︎SVGファイルで編集


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

使い分けが肝心。



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

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



SVGに影を落とす場合
◼︎全体に影を落としたいだけならCSSでやるのが簡単。

◼︎コーディングの手間はかかるが、オブジェクトごとに影を落としたり、凝った処理をしたい場合はSVGで自作する。

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













「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧