SVG
フィルタ

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
サーチ…


構文

  • フィルタ宣言： <filter id="filter-id" > ...子プリミティブのリスト... </filter>
  • SVG属性を使用してフィルタを適用する： <elementname filter="url(#filter-id)" ... />
  • CSSプロパティを使用してフィルタを適用する： （-prefix- ）filter：url（ "＃filter-id"）;

パラメーター

要素の属性詳細
フィルタ領域フィルタ要素は、フィルタ効果の出力の位置、寸法、分解能、および単位を任意に定義することができる。フィルターの位置と寸法は、x、y、幅、高さのパラメーターを使用して指定できます。デフォルト値は直感的ではなく 、x：-10％y：-10％幅：120％高さ：120％
フィルタ解像度 filterRes属性はSVG 1.1のオプションの属性で、フィルタの処理の解像度を指定するために使用できます。この属性には不均一なサポートがあり、現在のブラウザでは非推奨です。
フィルターユニットデフォルトでは、フィルタ要素のフィルタ効果領域（x、y、幅、高さ）の単位と座標系は、フィルタを参照する要素の境界ボックスを基準として設定されます。 SVG用語では、これは "objectBoundingBox"と呼ばれます。 x = "50％"と書くと、 "参照元の境界ボックスの左側にあるフィルタ領域の開始位置x +要素の幅の50％"を設定することを意味します。しかし、filterUnitsプロパティを設定することによって、単位と座標を明示的に指定することもできます。 2つの選択肢は、 "objectBoundingBox"（ここで説明したデフォルト）または "userSpaceOnUse"です。 userSpaceOnUseは、フィルタリング単位と座標系を、参照元のキャンバスに設定するか、またはSVG用語で「userSpaceOnUse」に設定します。
プリミティブユニットフィルタ自体の単位システムに加えて、primitiveUnits属性を使用してフィルタの子フィルタプリミティブが使用する単位システムを指定することもできます。もう一度、userSpaceOnUseとobjectBoundingBoxの間で選択します。これらは、filterUnitsと同じ方法で、フィルタプリミティブの0,0座標と単位値に影響します。
色空間 SVGフィルタのデフォルトの色空間は、linearRGBです。オプションのcolor-interpolation-filters属性をsRGBに設定すると、色空間を従来のsRGB領域に変更できます。

備考

ほとんどのフィルタ属性は<animate>要素で<animate>できますが、IEで "fakeSMIL"ライブラリを使用して同じ結果を得る必要があります。 SMILアニメーション（ <animate>要素）は、新しいWeb Animations仕様を支持して廃止されます。これは2016年中頃のサポートが非常に限られています。

Filter要素の子要素 ​​- フィルタプリミティブ - には、色補間計算が実行される色空間を指定する2つのオプションの属性があります。色補間と色補間フィルタです。前者のデフォルトはsRGBで、後者のデフォルトはlinearRGBです。 （feColorMatrixまたはfeComponentTransferを使用して）色空間を反転する操作は、CSS sRGBカラースペースに使用されている場合には直感的ではありません。たとえば、linearRGBのグレースケール画像をカラー反転すると、より白いトーンに向かって顕著にシフトします。これはプリミティブの値をsRGBに設定することで修正できます。これらの属性は、個々のフィルタプリミティブに設定することも、フィルタ要素自体から継承することもできます。

他の入力が指定されていないが、1つが必要な場合は、フィルタ内の最初のフィルタプリミティブは、入力として参照要素のラスタライズ（ビットマップ）されたバージョンを取ります。入力を期待する後続のフィルタプリミティブは、直前のフィルタプリミティブの結果を入力として取ります。

複雑なフィルタでは、暗黙のうちに入力と出力を追跡（およびデバッグ）するのが困難になることがあります。各プリミティブの入力と出力を明示的に宣言することが望ましい方法です。

SVGフィルタプリミティブは、入力、変換、照明効果、および組み合わせに大別して分類できます。

入力：

feFlood：カラーフィールドを生成する

feTurbulence：さまざまなノイズ効果を生成します。

feImage：外部画像参照、データURIまたはオブジェクト参照から画像を生成する（12月中旬の時点でオブジェクト参照はFirefoxではサポートされていない）

変換：

feColorMatrix：RBGAピクセルの入力値を出力値に変換する

feComponentTransfer：個々のカラーチャンネルのカラーカーブを調整する

feConvolveMatrix：各ピクセルを、現在のピクセルを基準とする領域のピクセル値から計算された新しいピクセルに置き換えます。

feGaussianBlur：現在のピクセルを、ピクセルの周りの領域のピクセルの加重平均で置き換えます

feDisplacementMap：別の入力グラフィックのR、G、またはB値に基づいて各ピクセルを現在の位置から移動します。

feMorphology：各ピクセルを、そのピクセルの周りの矩形領域内のすべてのピクセルの最大値または最小値から計算された新しいピクセルに置き換えます。

feOffset：入力を現在の位置から移動する

照明効果：

feSpecularLighting：「輝く」2Dまたは擬似3D照明効果を提供します

feDiffuseLighting：「マット」2Dまたは擬似3D照明効果を提供します。

feDistantLight：鏡面反射または拡散照明のための遠隔光源を提供する

feSpotLight：鏡面または拡散照明用の円錐断面光源を提供します。

fePointLight：鏡面反射または拡散照明のための点光源を提供する

組み合わせ：

feMerge：複数の入力から以前のフィルタ入力を含むシンプルなコンポジットを作成します。

feBlend：混合ルールを使用して複数の入力を混合する

feComposite：アルファ値を考慮して、設定された組み合わせルールを使用して複数の入力を組み合わせます。

feTile：入力を繰り返して繰り返しパターンを作成する

その他の注意事項

SVGはベクトルグラフィックステクノロジですが、SVGフィルタはすべての入力（SVGシェイプを含む）でピクセルレベルの操作を実行し、指定された解像度レベルでラスタライズされた（ビットマップ化された）出力を生成することを強調することが重要です。通常の画面解像度でフィルタリングされたプレーンなSVG曲線に10倍のスケール変換を適用すると、元のグラフィックのアンチエイリアスがフィルタによってピクセルに変換されてスケールアップされるため、ピクセル化されたエッジが生成されます。 （これが仕様に準拠しているのか、現在の実装に制限があるのか​​は不明です）

SVGはフィルタを書くときにXMLであることを忘れないでください。すべてのタグを閉じ、多くのプロパティと属性を明示的に指定する必要があります。そうしないと、フィルタは実行されません。

フィルタエレメントは決して直接レンダリングされません。これは、フィルタが適用される要素のfilterプロパティを使用してのみ参照されます。 displayプロパティはフィルタ要素には適用されず、displayプロパティが "none"以外の値に設定されていても、要素は直接レンダリングされません。逆に、フィルタ要素またはその祖先の表示プロパティが「none」に設定されている場合でも、参照用にフィルタ要素を使用できます。

SVGフィルタはCSSフィルタを介して参照することができますが、2016年半ばには、このメカニズムでプリミティブのサブセットのみがサポートされています。このメカニズムはMicrosoftのブラウザではサポートされていません。

ぼかしフィルタ：feGaussian Blur（ベーシック）

<svg width="900px" height="400px" viewBox="0 0 900 400">
   <defs>
      <filter id="basicGaussian">
         <feGaussianBlur stdDeviation="5"/>
      </filter>
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#basicGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>

ここに画像の説明を入力
（ Daderotによるソースイメージ 、Wikimedia Commons）

ぼかしフィルタ：feGaussianBlur（x軸とy軸のぼかしを別々に設定）

<svg width="900px" height="400px" viewBox="0 0 900 400">
   <defs>
      <filter id="xAxisGaussian">
         <feGaussianBlur stdDeviation="5 0"/>
      </filter>
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#xAxisGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>

ここに画像の説明を入力
（ Daderotによるソースイメージ 、Wikimedia Commons）

ぼかしフィルタ：ハードエッジと100％不透明度を持つfeGaussianBlur

<svg width="900px" height="400px" viewBox="900 400">
   <defs>
      <filter id="GaussianHardEdge" x="0%" y="0%" width="100%" height="100%">
         <feGaussianBlur stdDeviation="5"/>
         <feComponentTransfer>
           <feFuncA type="table" tableValues="1 1"/>
         </feComponentTransfer>
      </filter>
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>

ここに画像の説明を入力
（ Daderotによるソースイメージ 、Wikimedia Commons）

ぼかしフィルタ：ボックスぼかし

<svg width="900px" height="400px" viewBox="900 400">
   <defs>
      <filter id="GaussianHardEdge" >
         <feConvolveMatrix order="3" kernelMatrix=" 1 1 1
                                                    1 1 1
                                                    1 1 1"/>
      </filter>
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>

ここに画像の説明を入力
（ Daderotによるソースイメージ 、Wikimedia Commons）

ぼかしフィルタ：Bokehぼかし（3レイヤ、クリップ）

<svg width="900px" height="400px" viewBox="0 0 900 400">
   <defs>
<filter id="BokehBlur" color-interpolation-filters="sRGB">
      <feGaussianBlur stdDeviation="2" result="blurSource"/>
      <feColorMatrix type="luminanceToAlpha"/>
      <feComponentTransfer result="brightness-mask" >
        <feFuncA type="discrete" tableValues="0 0 0 1 1"/>
        </feComponentTransfer>

      
     <!--bokeh Layer 1 -->
     <feTurbulence type="fractalNoise" seed="1" baseFrequency=".67" numOctaves="3"/>
    <feColorMatrix type="luminanceToAlpha"/>
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 0 0 1"/>
     </feComponentTransfer>
      <feComposite operator="in" in="brightness-mask"/>
      <feComposite operator="in" in="blurSource"/>

      <feMorphology operator="dilate" radius="5"/>
      <feGaussianBlur stdDeviation="8"/>
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                           0 0 0 9 0" /> 
      <feComponentTransfer result="bokeh1">
        <feFuncA type="linear" slope=".5" />
     </feComponentTransfer>  
      
      
      
      <!--bokeh Layer 2 -->
     <feTurbulence type="fractalNoise" seed="49" baseFrequency=".67" numOctaves="3"/>
    <feColorMatrix type="luminanceToAlpha"/>
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 0 0 1"/>
     </feComponentTransfer>
      <feComposite operator="in" in="brightness-mask"/>
      <feComposite operator="in" in="blurSource"/>

      <feMorphology operator="dilate" radius="10"/>
      <feGaussianBlur stdDeviation="12"/>
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                           0 0 0 15 0" /> 
      <feComponentTransfer result="bokeh2">
        <feFuncA type="linear" slope=".3" />
     </feComponentTransfer>  
      
    <!--bokeh Layer 3 -->
      
    <feTurbulence type="fractalNoise" seed="44" baseFrequency=".67" numOctaves="3"/>
    <feColorMatrix type="luminanceToAlpha"/>
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 0 0 1"/>
     </feComponentTransfer>
      <feComposite operator="in" in="brightness-mask"/>
      <feComposite operator="in" in="blurSource"/>

      <feMorphology operator="dilate" radius="10"/>
      <feGaussianBlur stdDeviation="18"/>
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 
                                           0 0 0 15 0" /> 
      <feComponentTransfer result="bokeh3">
        <feFuncA type="linear" slope=".2" />
     </feComponentTransfer>  
      
    <!--Merge -->
     <feBlend mode="multiply" in="bokeh3" in2="bokeh2"/>
     <feBlend mode="lighten" in2="bokeh1"/>
      
      <feMorphology operator="erode" radius="0" result="bokeh"/>   
      <feGaussianBlur stdDeviation="9" in="SourceGraphic"/>
      <feComposite operator="over" in="bokeh"/> 
      <feComposite operator="in" in2="SourceGraphic"/>

    </filter>
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#BokehBlur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>

ここに画像の説明を入力
（ Daderotによるソースイメージ 、Wikimedia Commons）

シャドウフィルタ：基本的なドロップシャドウ

<svg width="800px" height="600px">
<defs>
  <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
    <feOffset dx="5" dy="5" result="offsetblur"/>
    <feFlood flood-color="red"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter> 
  </defs>
  
  <text filter="url(#drop-shadow)" x="30" y="100" font-size="80">SVG Filters</text>
  
</svg>

シャドウフィルタ：インナーグロー

<svg width="800px" height="600px">
<defs>
  <filter id="inner-glow">
    <feFlood flood-color="red"/>
    <feComposite in2="SourceAlpha" operator="out"/>
    <feGaussianBlur stdDeviation="2" result="blur"/>
    <feComposite operator="atop" in2="SourceGraphic"/>
</filter> 
  </defs>
  
  <text filter="url(#inner-glow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
  
</svg>

シャドウフィルタ：複雑なドロップシャドウ（輪郭付き、ノイズの多い、シェイプされた）

<svg width="800px" height="600px">
<defs>
<filter id="complex-shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">

<!-- Take source alpha, offset it by angle/distance and blur it by size -->
<feOffset id="offset" in="SourceAlpha" dx="11" dy="6" result="SA-offset"/> 
<feGaussianBlur id="blur" in="SA-offset" stdDeviation="4" result="SA-o-blur"/>

<!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->

<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN"> 
  <feFuncA id="contour" type="table" tableValues="0 1 .3 .1 0.05 .1 .3 1 "/> 
</feComponentTransfer>

<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>

<!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd"> 
  <feFuncA id="spread-ctrl" type="linear" slope="2.8"/> 
</feComponentTransfer>

<!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier --> 
<feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0.945 0 0 0 0 0.137 0 0 0 0 0.137 0 0 0 0.49 0" result="SA-o-b-c-s-recolor"/>

<!-- Generate a grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 --> 
<feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/> 
<feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/> 
<feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0.67" k2="0.33" result="SA-o-b-c-s-r-mix"/>

<!-- Merge the shadow with the original --> 
<feMerge> 
  <feMergeNode in="SA-o-b-c-s-r-mix"/> 
  <feMergeNode in="SourceGraphic"/> 
</feMerge> 
</filter> 
  </defs>
  
  <text filter="url(#complex-shadow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
  
</svg>

カラー操作フィルタ：基本グレースケール

<svg width="800px" height="600px">
   <defs>
     <filter id="greyscale">
     <feColorMatrix type="matrix"
             values="0.2126  0.7152  0.0722  0 0
                     0.2126  0.7152  0.0722  0 0
                     0.2126  0.7152  0.0722  0 0
                     0 0 0 1 0"/>
     </filter> 
   </defs>
        
   <image 

xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>

ここに画像の説明を入力
（ Daderotによるソースイメージ 、Wikimedia Commons）

カラー操作フィルタ：グレースケール（グリーンチャネルのみ）

<svg width="800px" height="600px">
   <defs>
     <filter id="greyscale">
     <feColorMatrix type="matrix"
             values="0  1  0  0 0
                     0  1  0  0 0
                     0  1  0  0 0
                     0 0 0 1 0"/>
     </filter> 
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>

ここに画像の説明を入力
（ Daderotによるソースイメージ 、Wikimedia Commons）

カラー操作フィルタ：モノトーン

<svg width="800px" height="600px">
   <defs>
     <filter id="greyscale">
     <feColorMatrix type="matrix"
             values=".2  .2  .2  0 0
                     .6  .6  .6  0 0
                     .2  .2  .2  0 0
                     0 0 0 1 0"/>
     </filter> 
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>

ここに画像の説明を入力
（ Daderotによるソースイメージ 、Wikimedia Commons）

ぼかしフィルタ：フォーカスブラー（ガウス）

<svg width="800px" height="600px">
   <defs>
  <filter id="focus-blur" >
    <feDiffuseLighting result = "diffOut" diffuseConstant = "1" lighting-color="white">
       <feSpotLight id="spotlight" x = "500" y = "100" z = "150" pointsAtX = "500" pointsAtY = "100" pointsAtZ = "0" specularExponent ="12" limitingConeAngle="70"/>
    </feDiffuseLighting>

     <feColorMatrix in="diffOut" result="alphaMap" type="luminanceToAlpha"/>
     <feComponentTransfer in="alphaMap" result="invertlight">
        <feFuncA type="table" tableValues="1 0 0"/>
     </feComponentTransfer>
          
     <feGaussianBlur in="invertlight" result="featherspot" stdDeviation="5"/>
     <feComposite operator="xor" result="infocus" in2="SourceGraphic" in="featherspot"/>
     <feGaussianBlur in="SourceGraphic" result="outfocus" stdDeviation="2"/>
     <feComposite operator="over" in="infocus" in2="outfocus"/> 
    <feComposite operator="in" in2="SourceGraphic"/>       
</filter>
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#focus-blur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>

ここに画像の説明を入力
（ Daderotによるソースイメージ 、Wikimedia Commons）

カラー操作フィルタ：ポスタリゼーション

<svg width="800px" height="600px" >
   <defs>
     <filter id="posterize" color-interpolation-filters="sRGB">
     <feComponentTransfer>
       <feFuncR type="discrete" tableValues="0 0.25 0.75 1.0"/>
       <feFuncG type="discrete" tableValues="0 0.25 0.75 1.0"/>
       <feFuncB type="discrete" tableValues="0 0.25 0.75 1.0"/>
     </feComponentTransfer>
     </filter> 
   </defs>
        
   <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="20px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet" />
   <image filter="url(#posterize)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="340px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet"/>
</svg>

ぼかしフィルタ：ハイライトぼかし

このフィルタは、元のグラフィックの高輝度部分のみを選択し、内容をぼかし、元の部分の上にぼかした内容を合成します。 

<svg width="800px" height="600px">
    <defs>
        <filter id="highlightblur" color-interpolation-filters="sRGB">
           <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="lumMap"/>
           <feComponentTransfer in="lumMap" result="highlightMask">
              <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1"/>
           </feComponentTransfer>
           <feComposite operator="in" in="SourceGraphic" in2="highlightMask" result="highlights"/>
           <feGaussianBlur in="highlights" stdDeviation="3" result="highBlur"/>
           <feComposite operator="over" in="highBlur" in2="SourceGraphic" result="final"/>
        </filter>
     </defs>

    <image filter="url(#highlightblur)" x="0" y="-40" width="780" height="600" preserveAspectRatio="true" xlink:href="http://i554.photobucket.com/albums/jj424/allbowerpower/Christmas%202009/ChristmasTablesetting016b.jpg"
    />
</svg>


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow