SVG HTML

Image Filter

This SVG example illustrates how to apply an image filter.

ImageFilter.svg

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="idImageFilter">
    <feImage href="Christ.png"
    	result="imgImage"/>
    <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="imgBlur" />
    <feComposite in="imgImage" in2="imgBlur" operator="in" result="imgComp"/>
  </filter>
  <!-- Original Version -->
  <circle cx="100" cy="100" r="85" fill="yellow" stroke="none" stroke-width="10"></circle>
  <!-- Filtered Version -->
  <g style="filter: url(#idImageFilter)" transform="translate(200, 0)">
    <circle cx="100" cy="100" r="85" fill="yellow" stroke="none" stroke-width="10"></circle>
  </g>
</svg>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.