apike.ca
apike.ca

feImage (SVG Filter Effect)

By mbystedt on Mar 3, 2014, 7:02:40 AM

The feImage filter can load an external image such as a svg, jpeg or png. It can also reference and use a fragment in the same document. Firefox does not properly support fragments.

If the xlink:href attribute references an external image file then it acts like the image element. The image is scaled into the filter effect's dimensions with the help of the preserveAspectRatio attribute.

If the xlink:href attribute references an internal fragment then feImage acts like the use element. This usage has problems that the original use element doesn't have. For one, there is no way to translate or scale the referenced object. The x, y, width and height attributes are stolen from the filter effect by the definition of use element. Better still, the x, y, width and height are still initially set to things that make sense for a filter effect. These combined issues can be truly obnoxious. If you reference an SVG element, then set the width and height to 100% or it will look very odd. The position will be set initially to the top-left corner of the filter and will translate the fragment. This could be handy or not. Setting x and y to 0 and positioning the referenced objects themselves could be easier.

<feImage>
Attribute
Comments
preserveAspectRatio
'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. Used with external images only. (Default: 'xMidYMid meet')
xlink:href
A URI reference to the cloned element/fragment or an external image.

See: Filter Effect Common Attributes

<defs>
  <filter id="mergeImagesExt" x="0" y="0" width="100%" height="100%">
    <feImage result="sourceTwo" xlink:href="cat.jpg" preserveAspectRatio="xMidYMid slice" />
    <feComposite in="SourceGraphic" in2="sourceTwo" operator="arithmetic" k1="0" k2=".5" k3=".7" k4="0"/>
  </filter>
 
  <filter id="mergeImagesIntSquash" x="0" y="0" width="100%" height="100%">
    <!-- Demo of odd defaults for width and height -->
    <feImage result="sourceTwo" xlink:href="#useCircleSVG" />
    <feComposite in="SourceGraphic" in2="sourceTwo" operator="arithmetic" k1="0" k2=".5" k3=".7" k4="0"/>
  </filter>
 
  <filter id="mergeImagesInt" x="0" y="0" width="100%" height="100%">
    <feImage result="sourceTwo" xlink:href="#useCircleSVG" width="100%" height="100%" />
    <feComposite in="SourceGraphic" in2="sourceTwo" operator="arithmetic" k1="0" k2=".5" k3=".7" k4="0"/>
  </filter>
 
  <svg id="useCircleSVG" width="100" height="100" viewBox="0 0 50 50">
    <circle id="useCircle" cx="25" cy="25" r="20" fill="blue" />
  </svg>
</defs>
...
<circle cx="100" cy="80" r="60" fill="blue" filter="url(#mergeImagesExt)" />
<rect x="200" y="30" width="100" height="100" fill="green" filter="url(#mergeImagesIntSquash)" />
<rect x="350" y="30" width="100" height="100" fill="green" filter="url(#mergeImagesInt)" />
Example 1. From left to right, the first example loads an external jpeg, the second shows that the defaults working oddly and the last shows the correctly referenced circle. (Download)
Related Topics