SVG
फिल्टर

वाक्य - विन्यास

• फ़िल्टर घोषणा: <filter id="filter-id" > ... बाल आदिम की सूची ... </filter>
• SVG विशेषता के माध्यम से फ़िल्टर लागू करें: <elementname filter="url(#filter-id)" ... />
• CSS संपत्ति के माध्यम से फ़िल्टर लागू करें: (-prefix- ) फ़िल्टर: url ("# फ़िल्टर-आईडी");

पैरामीटर

टिप्पणियों

धुंधला फिल्टर: feGaussian कलंक (मूल)

<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>

^{(विकिमीडिया कॉमन्स पर दादरोत द्वारा स्रोत छवि )}

ब्लर फिल्टर: feGaussianBlur (एक्स-एक्सिस और वाई-एक्सिस ब्लर अलग से सेट)

<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>

^{(विकिमीडिया कॉमन्स पर दादरोत द्वारा स्रोत छवि )}

ब्लर फिल्टर: हार्ड किनारों और 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>

^{(विकिमीडिया कॉमन्स पर दादरोत द्वारा स्रोत छवि )}

ब्लर फिल्टर: बॉक्स ब्लर

<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>

^{(विकिमीडिया कॉमन्स पर दादरोत द्वारा स्रोत छवि )}

ब्लर फिल्टर: बोकेह ब्लर (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>

^{(विकिमीडिया कॉमन्स पर दादरोत द्वारा स्रोत छवि )}

छाया फिल्टर: बेसिक ड्रॉपशेडो

<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>

^{(विकिमीडिया कॉमन्स पर दादरोत द्वारा स्रोत छवि )}

रंग हेरफेर फिल्टर: ग्रेस्केल (केवल ग्रीन चैनल)

<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>

^{(विकिमीडिया कॉमन्स पर दादरोत द्वारा स्रोत छवि )}

रंग हेरफेर फिल्टर: मोनोटोन

<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>

^{(विकिमीडिया कॉमन्स पर दादरोत द्वारा स्रोत छवि )}

ब्लर फिल्टर: फोकस ब्लर (गाऊसी)

<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>

^{(विकिमीडिया कॉमन्स पर दादरोत द्वारा स्रोत छवि )}

रंग हेरफेर फिल्टर: पोस्टरिंग

<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>