[70-2] SVGフィルターを使ってみた

最終更新日:2017年03月27日  (初回投稿日:2017年02月23日)

前回 HTMLに直接 SVGを埋め込む方法をやりました。
SVGには「ぼかし」とか「色変換」などのたくさんの種類のフィルタエフェクトが用意されています。

せっかくSVGを使うなら「SVGフィルター」も使えると便利だろうな〜 と思い、私のようなノンプログラマーでも簡単に使えそうなフィルターを探してサンプルを作ってみました。

SVG画像そのものは Illustratorなどのベクター描画ソフトに書き出して、HTMLに貼り付けたあとで<filter>要素を使ってSVG画像にフィルターをかけます。

今回のサンプルはこちら。(クリックでサンプルページが別ウィンドウで開きます)

今回使用する要素 <filter> 〜 </filter>

<filter>要素だけじゃなく、参照したい定義をまとめる要素 <defs>要素も使っています。
そのほか、ぼかしのためには <feGaussianBlur>、色変換なら <feColorMatrix>といった フィルタエフェクトのための要素も使います。

本日のINDEX
  1. ガウスのぼかしフィルターで雲をぼかしてみる
  2. モノクロ(白黒)のフィルター
  3. 色相変換フィルター
  4. 2つのフィルターで手書きのクレヨン画っぽく
  5. SVGのフィルタ エフェクトの種類(すっごいいっぱいあるよ)

ガウスのぼかしフィルターで雲をぼかしてみる

では早速サンプルファイルの一番上の部分を見てみましょう。
空と雲のイラストを Illustratorで描いて SVGで出力し、HTMLに貼り付けたあとで「雲」の部分だけに「ぼかし」フィルターを追加しました。
(クリックでサンプルページが別ウィンドウで開きます)

ちなみにフィルター無しのSVGはこちら。ここまでを Illustratorで描きました。

<svg> 〜 </svg> 内に フィルターの記述をします。

<svg id="skyandcloud" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 310">
<g id="sky2">  <!--空のグラデーション部分-->
 <defs>
  <linearGradient id="gra1" gradientUnits="userSpaceOnUse" x1="450" y1="180" x2="450" y2="310">
   <stop  offset="0" style="stop-color:#9DD3EA"/>
   <stop  offset="1" style="stop-color:#FFFFFF"/>
  </linearGradient>
 </defs>
 <rect y="170" fill="url(#gra1)" width="900" height="140"/>
</g>

<g id="sky">  <!--空のベタ塗り部分-->
 <rect fill="#9DD3EA" width="900" height="175"/>
</g>

<g id="cloud" filter="url(#cloudgauss)">  <!--雲の部分-->
 <path fill="white" d="(長いので略)" />
 <path fill="white" d="(略)"/>
 <path fill="white" d="(略)"/>
 <path fill="white" d="(略)"/>
</g>

<defs>
 <filter id="cloudgauss">  <!--ぼかしフィルター-->
  <feGaussianBlur stdDeviation="6"></feGaussianBlur>
 </filter>
</defs>
</svg>

ぼかしはかなり簡単に使えますね。Illustrator上でぼかすより、フィルターを使ったほうが、あとでいくらでも編集できて便利ですね。

サンプルコードの24〜26行の部分がぼかしフィルターです。
フィルターは<filter>要素内に使用します。
ぼかしは <feGaussianBlur> を使用。ぼかし具合は stdDeviation属性で指定します。

このぼかしフィルターにIDを付け(24行目)、ぼかしをかけたい雲の部分の <g>要素に filter属性を使って「filter="url(#ID名)"」で適用しています。(16行目)

filter属性は <path>要素にも <rect>要素にも、<svg>要素にだって使えます。
このサンプルでは雲だけにぼかしをかけたいので、雲の画像をまとめた <g>要素にだけ使いました。

<filter>要素は さらに <defs>要素で囲んでいます(23と27行)。
<defs>は「definition(デフィニション)」の略。「定義」という意味です。
「フィルタ」「パターン」「グラデーション」など、まずその内容を定義し、あとで参照したい時に使う要素だそうです。パターンで使う図形などは <defs>要素で囲むと描画されません。

ただ、上のサンプルでは <defs>要素が無くても問題なく表示しましたので必須ではないようです。
が、定義のための記述は <defs>要素内に書くよう推奨されているそうです。

モノクロ(白黒)のフィルター

次は、<feColorMatrix>要素で色変換してみます。
「type="saturate"」で彩度の変更ができ、「values="0"」で彩度0(モノクロ)になります。
(クリックでサンプルページが別ウィンドウで開きます)

Photo credit: Life is food!!! via Visualhunt.com / CC BY-NC-SA

<svg id="fruits" width="320" height="213" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
 <filter id="black">
  <feColorMatrix type="saturate" values="0" />
 </filter>
</defs>
<image x="0" y="0" width="320" height="213" xlink:href="img/fruits.jpg" />
</svg>

サンプルページでは、CSSによるフィルターのある・なしの切り替えをやっています。
HTML上で定義したフィルター(このサンプルでは id="black")を、相対パスを使って 外部CSSで呼び出しています。

svg#fruits{filter: url(../index.html#black)}
svg#fruits:hover{filter:none; cursor:pointer}

フィルタの指定(CSSの1行目)は、ID名を付けたフィルタのパスを書いて呼び出します。
CSSをインライン(HTML上に <style>要素で書く)にした場合は、フィルタのIDだけを書けばいい(このサンプルなら #blackだけ。../index.htmlとかいらない)というわけです。

PCブラウザの古めのものでは、「外部CSSファイル」から「フィルタのURL」が拾えないようで、フィルタが掛かりません。CSSをインラインでHTML上に書いたほうが良いようです。
また、フィルタをかけたい <image>要素に「filter属性」で直接フィルタを指定しておき、CSSではマウスオーバー時の「filter: none」だけを指定する手もあります。
こちらはサンプルページにコードを書いておきましたのでご覧ください。

色相変換フィルター

同じ <feColorMatrix>要素を使って「色相」を変えてみます。
「type="hueRotate"」を使います。「values="0"」で元の色相です。
サンプルでは「values="30"」にして、黄色っぽい色相に変換してみました。
(クリックでサンプルページが別ウィンドウで開きます)

Photo credit: Life is food!!! via Visualhunt.com / CC BY-NC-SA

<svg id="fruits3" width="320" height="213" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
 <filter id="hrotate">
  <feColorMatrix type="hueRotate" values="30"/>
 </filter>
</defs>
<image x="0" y="0" width="320" height="213" xlink:href="img/fruits.jpg" />
</svg>
<style>
svg#fruits3{filter: url(#hrotate)}
svg#fruits3:hover{filter: none; cursor:pointer}
</style>

2つのフィルターで手書きのクレヨン画っぽく

SVGのフィルタエフェクト用の要素のうちの パーリンノイズ(雲とか大理石のようなモヤ〜っとしたゆらぎ)をかける <feTurbulence> と、画像をずらす <feDisplacementMap> を組み合わせると、クレヨンで描いたような手書き風のフィルタをかけられます。

サンプルはこちら。
(クリックでサンプルページが別ウィンドウで開きます)

<svg id="cloud" filter="url(#yugami)" version="1.1" xmlns="http://www.w3.org/2000/svg" width="320px" height="213px">
<g id="sky">
 <rect fill="#9BCDE2" width="320" height="213"/>
</g>
<g>
 <path fill="white" d="(長いので略)"/>
 <path fill="lightcyan" d="(同じく略)"/>
</g>
<defs>
 <filter id="yugami" filterUnits="userSpaceOnUse" x="0" y="0" width="320" height="213">
  <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/>
  <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="B" scale="15"/>
 </filter>
</defs>
</svg>

上のサンプルでは、SVG全体にフィルタを適用していますが、例えば白い雲(<path>要素のfill="white" になってるやつ)だけにフィルタを適用することもできます。下のようになります。

<svg id="cloud" version="1.1" xmlns="http://www.w3.org/2000/svg" width="320px" height="213px">
<g id="sky">
 <rect fill="#9BCDE2" width="320" height="213"/>
</g>
<g>
 <path fill="white" filter="url(#yugami)" d="(長いので略)"/>
 <path fill="lightcyan" d="(同じく略)"/>
</g>
<defs>
 <filter id="yugami" filterUnits="userSpaceOnUse" x="0" y="0" width="320" height="213">
  <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/>
  <feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="B" scale="15"/>
 </filter>
</defs>
</svg>

SVGのフィルタ エフェクトの種類(すっごいいっぱいあるよ)

SVGのフィルタ効果について、まとめられたサイトをピックアップしておきます。

まずは、
W3C勧告の SVG 1.1 (Second Edition) – 16 August 2011 内の 15 Filter Effects で、どんなフィルタがあるか確認できます。
これは日本語訳ページがありました。ありがたい〜! コチラです↓

翻訳元・日本語訳版を見比べてみると「Filter primitive」を「原始フィルター」と翻訳しているのがわかります。primitiveは「原初の,最も早い」という意味だそうです)
原始フィルター(Filter primitive)」は、今回のサンプルで使った <feColorMatrix>要素などのように、あたまに「fe」がついたフィルタ用の要素群です。
そのほか「光源要素(Light source elements)」も あたまに「fe」がついています。

SVGフィルタの種類をざっと書き出してみました。詳しい内容は上記サイトを見てください。
この表で言う「画像」とは、ラスター画像も SVG画像も含みます。

原始フィルタ
(基本フィルタ)
feBlend 画像の合成用フィルタ(乗算とか比較暗、比較明とか Photoshopでおなじみのアレね)
mode="normal" 通常
mode="multiply" 乗算
mode="screen" スクリーン
mode="darken" 比較暗
mode="lighten" 比較明
feColorMatrix 色変換フィルタ(今回のサンプルで使用)
type="matrix" rgba(3原色と透明度)の行列演算を指定
type="saturate" 彩度の変換
type="hueRotate" 色相の変換
type="luminanceToAlpha" 透明度の変換
feComponentTransfer 色変換。rgba(3原色と透明度)ごとに変換関数を指定
type="discrete" 減色の変換
type="linear"  ネガポジ変換
type="gamma" ガンマ補正
feComposite 2つの図形の重なった部分をどう描画するかを指定
(canvasでの globalCompositeOperationプロパティと似てます)
operator="over" 最初の画像を優先に表示
operator="in"  2画像の重なった部分の最初の画像を表示
operator="out" 最初の画像をあとの画像でくり抜く
operator="atop" あとの画像に最初の画像を重ねる
operator="xor" 重なった部分のみ削除
operator="arithmetic" 2つの画像を合成
feFlood フィルタ範囲を単色で塗りつぶす。透明度も指定できる
feGaussianBlur ガウスぼかし(今回のサンプルで使用)
stdDeviation="5 10"といったかんじで x軸、y軸別々に指定もできる
feImage 外部の画像を挿入。xlink:href="画像のパス" で呼び出し
feMerge 子要素 feMergeNode も使って画像を重ねる順番を指定
feOffset 画像を元の位置からずらす
feTile feImageで読み込んだ画像をタイル状に敷き詰める
原始フィルタ
(拡張フィルタ)
feConvolveMatrix 画素の色を抽出して、エンボス、輪郭抽出、ぼかし、シャープネスなどの処理ができる
feDisplacementMap 画像をずらす。均等なズレでなく変異(Displacement)の計算式なので歪みなども表現できる(今回のサンプルで使用)
feMorphology 画素の明るいところを広げたり、暗いところを広げたり
feTurbulence パーリンノイズ(雲とか大理石のようなモヤ〜っとしたゆらぎ)をかける(今回のサンプルで使用)
原始フィルタ
(照明効果)
feDiffuseLighting 画像を立体とみなし光源から光を当てた結果を表示。光が当たらない部分は黒で表示
feSpecularLighting 画像を立体とみなし光源から光を当てた結果を表示。光が当たっている部分を光源色の透明度で表示
光源要素
(照明効果の原始フィルタの子要素として使う)
feDistantLight 平行光源(太陽光のような平行な光の照明効果)
fePointLight 点光源(点の光源から放射状の照明効果)
feSpotLight スポットライト

SVGフィルタの使い方詳細がわかるサイト

SVGフィルタの種類がいっぱいあるのはわかったけど、それぞれどうやって使うねん?
ということで、わかりやすくまとめてくださっているサイトがありました。サンプルも豊富で非常〜に詳しいです。
svg要素の基本的な使い方まとめ | 11.画像効果

こちら↑は defghi1977さんがまとめてくださっています。
こちらを読んでみると SVGフィルターはかなり複雑なことができるのがわかります。

次回予告

SVGはベクター画像なので、アニメーションも滑らかで美しいんです。
ちょっと難しそうだけど、SVGアニメーション用の jsライブラリもたくさんあるようですし、
次回はSVGアニメーションをやってみようと思います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.