SVG - Filtreler

SVG, filtreleri tanımlamak için <filter> öğesini kullanır. <filter> öğesi, onu benzersiz şekilde tanımlamak için bir id niteliği kullanır. Filtreler, <def> öğeleri içinde tanımlanır ve daha sonra, kimliklerine göre grafik öğeleri tarafından referans alınır.

SVG, zengin bir filtre seti sağlar. Yaygın olarak kullanılan filtrelerin listesi aşağıdadır.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - alt gölgeler için filtre
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Beyanname

Aşağıdaki sözdizimi beyanıdır <filter>öğesi. Yalnızca ana nitelikleri gösterdik.

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

Öznitellikler

Sr.No.	İsim & Açıklama
1	filterUnits- filtre efekti bölgesini tanımlayan birimler. Filtre içindeki çeşitli uzunluk değerleri ve filtre alt bölgesini tanımlayan özellikler için koordinat sistemini belirtir. FilterUnits = "userSpaceOnUse" ise değerler, 'filtre' öğesi kullanıldığında geçerli kullanıcı koordinat sistemindeki değerleri temsil eder. FilterUnits = "objectBoundingBox" ise, değerler, 'filtre' öğesi kullanıldığında, referans öğesindeki sınırlayıcı kutunun kesirleri veya yüzdeleri cinsinden değerleri temsil eder. Varsayılan userSpaceOnUse şeklindedir.
2	primitiveUnits- filtre efekti bölgesini tanımlayan birimler. Filtre içindeki çeşitli uzunluk değerleri ve filtre alt bölgesini tanımlayan özellikler için koordinat sistemini belirtir. FilterUnits = "userSpaceOnUse" ise değerler, 'filtre' öğesi kullanıldığında geçerli kullanıcı koordinat sistemindeki değerleri temsil eder. FilterUnits = "objectBoundingBox" ise, değerler, 'filtre' öğesi kullanıldığında, referans öğesindeki sınırlayıcı kutunun kesirleri veya yüzdeleri cinsinden değerleri temsil eder. Varsayılan userSpaceOnUse şeklindedir.
3	x- filtre sınırlama kutusunun x ekseni koordinatı. Varsayılan 0.
4	y- filtre sınırlama kutusunun y ekseni koordinatı. Varsayılan 0'dır.
5	width- filtre sınırlama kutusunun genişliği. Varsayılan 0'dır.
6	height- filtre sınırlama kutusunun yüksekliği. Varsayılan 0'dır.
7	filterRes - filtre bölgelerini temsil eden sayılar.
8	xlink:href - başka bir filtreye başvurmak için kullanılır.

Misal

testSVG.htm

<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

Filter1 ve filter2 olarak tanımlanan iki <filter> öğesi.
feGaussianBlur filtre efekti stdDeviation kullanarak bulanıklaştırma efektini bulanıklık miktarı ile tanımlar.
in = "SourceGraphic", efektin tüm öğe için geçerli olduğunu tanımlar.
FeOffset filtre efekti gölge efekti oluşturmak için kullanılır. in = "SourceAlpha", efektin RGBA grafiklerinin alfa kısmı için geçerli olduğunu tanımlar.
<rect> öğeleri, filtre özelliğini kullanarak filtreleri bağladı.

Çıktı

Chrome web tarayıcısında textSVG.htm dosyasını açın. SVG görüntüsünü herhangi bir eklenti olmadan doğrudan görüntülemek için Chrome / Firefox / Opera'yı kullanabilirsiniz. Internet Explorer 9 ve üstü, SVG resim oluşturmayı da destekler.

Gölge efektli filtre

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

Çıktı