in

The in attribute identifies input for the given filter primitive.

The value can be either one of the six keywords defined below, or a string which matches a previous result attribute value within the same <filter> element. If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.

If the value for result appears multiple times within a given <filter> element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.

Usage context

SourceGraphic

This keyword represents the graphics elements that were the original input into the <filter> element.

SourceAlpha

This keyword represents the graphics elements that were the original input into the <filter> element. SourceAlpha has all of the same rules as SourceGraphic except that only the alpha channel is used.

BackgroundImage

This keyword represents an image snapshot of the SVG document under the filter region at the time that the <filter> element was invoked.

BackgroundAlpha

Same as BackgroundImage except only the alpha channel is used.

FillPaint

This keyword represents the value of the fill property on the target element for the filter effect. In many cases, the FillPaint is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.

StrokePaint

This keyword represents the value of the stroke property on the target element for the filter effect. In many cases, the StrokePaint is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.

Workaround for BackgroundImage

Instead of using in="BackgroundImage", we need to import one of the images to blend inside the filter itself, using an <feImage> element.

HTML Content

<div style="width: 420px; height: 220px;">
<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="backgroundMultiply">
      <!-- This will not work. -->
      <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" />
</svg>

<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="imageMultiply">
      <!-- This is a workaround. -->
      <feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/>
      <feBlend in2="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/>
</svg>
</div>

Result

Elements

The following elements can use the in attribute

• <feBlend>
• <feColorMatrix>
• <feComponentTransfer>
• <feComposite>
• <feConvolveMatrix>
• <feDiffuseLighting>
• <feDisplacementMap>
• <feGaussianBlur>
• <feMorphology>
• <feOffset>
• <feSpecularLighting>
• <feTile>