魔法の効果 - SVGフィルター入門
SVGフィルターは、図形やテキスト、画像などのSVG要素に対して、ぼかし、影付け、色の変更、テクスチャの合成といった、まるで魔法のような高度な視覚効果を適用するための強力な仕組みです。Photoshopなどの画像編集ソフトで使うフィルターレイヤーやエフェクトをイメージすると分かりやすいかもしれません。
フィルター効果は、<defs> 要素の中に <filter> 要素として定義し、ユニークな id を付けます。そして、効果を適用したい要素から、CSSの filter プロパティ (例: filter: url(#myFilterId);) やSVGの filter 属性 (例: filter="url(#myFilterId)") を使って参照します。
<filter> 要素の基本構造
<filter> 要素は、一つ以上の「フィルタープリミティブ」と呼ばれる具体的な効果を持つ要素を内包するコンテナです。
<filter> の主な属性:
id: フィルターを識別するためのID。x, y, width, height: フィルター効果が適用される領域。デフォルトでは、対象オブジェクトのバウンディングボックスより少し広めに設定されます。パーセンテージや数値で指定可能。filterUnits:x, y, width, heightの単位系。userSpaceOnUse(現在の座標系) またはobjectBoundingBox(対象オブジェクトの境界を基準、デフォルト)。primitiveUnits: フィルタープリミティブ内部の座標や長さの単位系。userSpaceOnUse(デフォルト) またはobjectBoundingBox。
フィルタープリミティブ (例: <feGaussianBlur>, <feOffset>) の主な属性:
in: このプリミティブへの入力元を指定します。特別なキーワード (SourceGraphic: 元の図形そのもの,SourceAlpha: 元の図形のアルファチャンネル(透明度情報),BackgroundImage,BackgroundAlpha,FillPaint,StrokePaint) や、他のプリミティブのresult属性で付けた名前を指定します。result: このプリミティブの処理結果に名前を付けます。この名前を他のプリミティブのin属性で参照することで、効果を連鎖させることができます。
主要なフィルタープリミティブ
よく使われるフィルタープリミティブをいくつか見ていきましょう。
<feGaussianBlur> - ぼかし
入力画像（またはアルファチャンネル）にガウスぼかしを適用します。
stdDeviation: ぼかしの強さ。X方向とY方向の値をスペースで区切って指定可能 (例:"5"や"10 2")。数値が大きいほど強くぼけます。
<feGaussianBlur> デモ
フィルター構造:
<feOffset> - オフセット (移動)
入力画像をX方向、Y方向にずらします。影を作る際の基本的な部品となります。
dx: X方向のオフセット量。dy: Y方向のオフセット量。
<feOffset> デモ (影風)
フィルター構造 (SourceAlphaをずらして影に):
ドロップシャドウ (複数のプリミティブを組み合わせる)
<feGaussianBlur> (ぼかし), <feOffset> (ずらし), <feFlood> (色付け), <feComposite> (合成), <feMerge> (重ね合わせ) などを組み合わせて、一般的なドロップシャドウ効果を作成できます。
手順例:
- 元の図形のアルファチャンネル (
SourceAlpha) を取得。 <feGaussianBlur>でアルファチャンネルをぼかす。<feOffset>でぼかしたアルファをずらす (これが影の形になる)。<feFlood>で影の色を定義。<feComposite operator="in">で、ずらした影の形 (3) に色 (4) を付ける。<feMerge>で、色付きの影 (5) と元の図形 (SourceGraphic) を重ねて表示。
ドロップシャドウ デモ
フィルター構造:
<feColorMatrix> - 色変換
入力画像の色やアルファチャンネルを、行列演算や定義済みの操作 (彩度変更、色相回転など) を使って変換します。
type: 変換のタイプ。matrix(5x4の行列を指定),saturate(彩度),hueRotate(色相回転),luminanceToAlpha(輝度をアルファに)。values:typeに応じた値。例えばtype="saturate"なら彩度(0-1)、type="hueRotate"なら回転角度(度)。
<feColorMatrix> デモ
フィルター構造:
他にも <feBlend> (ブレンドモード), <feImage> (外部画像読み込み), <feComposite> (画像合成), <feTurbulence> (ノイズ生成), <feDisplacementMap> (変位マップ) など、多くの強力なプリミティブがあります。これらを組み合わせることで、非常に多彩な表現が可能です。
Did you know? SVG filters can be chained together by using the `result` attribute of one filter primitive as the `in` attribute of another. This allows for incredibly complex and customized visual effects, similar to a node-based compositing system.
知っていましたか？SVGフィルターは、あるフィルタープリミティブの `result` 属性の値を、別のプリミティブの `in` 属性として使うことで、連鎖させることができます。これにより、ノードベースのコンポジットシステムのように、信じられないほど複雑でカスタムされた視覚効果を作り出すことができます。
まとめ
SVGフィルターは、基本的な図形やテキストに、ぼかし、影、色の調整といったプロフェッショナルな視覚効果を加えるための強力なツールセットです。各プリミティブの役割と、それらをどのように組み合わせるかを理解することで、SVGの表現力を飛躍的に高めることができます。
ただし、複雑なフィルターはブラウザの描画パフォーマンスに影響を与える可能性があるため、特にアニメーションと組み合わせる際には注意して使用しましょう。
次は、SVGを動的に変化させる「動き出すSVG - アニメーション入門」について学びます。
このページの要約
日本語
SVGフィルターは、<filter>要素内に定義された一連のフィルタープリミティブを使って、SVG要素に高度な視覚効果を適用します。主なプリミティブには、<feGaussianBlur>（ぼかし）、<feOffset>（移動）、<feMerge>（重ね合わせ）、<feColorMatrix>（色変換）などがあります。これらを組み合わせることで、ドロップシャドウなどの複雑な効果も作成可能です。フィルターは<defs>に定義し、filter属性またはCSSで適用します。入力(in)と結果(result)を繋いで効果を連鎖させることができます。
English
SVG filters apply advanced visual effects to SVG elements using a series of filter primitives defined within a <filter> element. Key primitives include <feGaussianBlur> (blur), <feOffset> (offset), <feMerge> (merge layers), and <feColorMatrix> (color transformation). Combining these allows for complex effects like drop shadows. Filters are defined in <defs> and applied via the filter attribute or CSS. Effects can be chained by connecting the input (in) and result (result) of primitives.
Español
Los filtros SVG aplican efectos visuales avanzados a los elementos SVG mediante una serie de primitivas de filtro definidas dentro de un elemento <filter>. Las primitivas clave incluyen <feGaussianBlur> (desenfoque), <feOffset> (desplazamiento), <feMerge> (fusionar capas) y <feColorMatrix> (transformación de color). La combinación de estas permite efectos complejos como sombras paralelas. Los filtros se definen en <defs> y se aplican mediante el atributo filter o CSS. Los efectos se pueden encadenar conectando la entrada (in) y el resultado (result) de las primitivas.
中文
SVG滤镜通过在<filter>元素内定义的一系列滤镜基元，将高级视觉效果应用于SVG元素。关键基元包括<feGaussianBlur>（高斯模糊）、<feOffset>（偏移）、<feMerge>（合并图层）和<feColorMatrix>（颜色转换）。组合这些基元可以实现复杂的效ว果，例如投影。滤镜在<defs>中定义，并通过filter属性或CSS应用。可以通过连接基元的输入(in)和结果(result)来链接效果。