---
title: in
slug: Web/SVG/Attribute/in
tags:
  - Filters
  - NeedsCompatTable
  - SVG
  - SVG Attribute
---
{{SVGRef}}

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 {{SVGAttr("result")}} attribute value within the same {{SVGElement("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 {{SVGAttr("result")}} appears multiple times within a given {{SVGElement("filter")}} element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute {{SVGAttr("result")}}.

You can use this attribute with the following SVG elements:

*   {{SVGElement("feBlend")}}
*   {{SVGElement("feColorMatrix")}}
*   {{SVGElement("feComponentTransfer")}}
*   {{SVGElement("feComposite")}}
*   {{SVGElement("feConvolveMatrix")}}
*   {{SVGElement("feDiffuseLighting")}}
*   {{SVGElement("feDisplacementMap")}}
*   {{SVGElement("feDropShadow")}}
*   {{SVGElement("feGaussianBlur")}}
*   {{SVGElement("feMergeNode")}}
*   {{SVGElement("feMorphology")}}
*   {{SVGElement("feOffset")}}
*   {{SVGElement("feSpecularLighting")}}
*   {{SVGElement("feTile")}}

## Usage notes

<table class="properties">
  <tbody>
    <tr>
      <th scope="row">Value</th>
      <td>
        <code>SourceGraphic</code> | <code>SourceAlpha</code> |
        <code>BackgroundImage</code> | <code>BackgroundAlpha</code> |
        <code>FillPaint</code> | <code>StrokePaint</code> |
        <code>&#x3C;filter-primitive-reference></code>
      </td>
    </tr>
    <tr>
      <th scope="row">Default value</th>
      <td>
        <code>SourceGraphic</code> for first filter primitive, otherwise result
        of previous filter primitive
      </td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
  </tbody>
</table>

*   `SourceGraphic`
    *   : This keyword represents the graphics elements that were the original input into the {{SVGElement("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 {{SVGAttr("fill")}} property on the target element for the filter effect. In many cases, the `FillPaint` is opaque everywhere, but that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts.
*   `StrokePaint`
    *   : This keyword represents the value of the {{SVGAttr("stroke")}} property on the target element for the filter effect. In many cases, the `StrokePaint` is opaque everywhere, but that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts.
*   `<filter-primitive-reference>`
    *   : This value is an assigned name for the filter primitive in the form of a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same filter element. If no value is provided, the output will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its in attribute.

## Workaround for BackgroundImage

`BackgroundImage` is not supported as a filter source in modern browsers (see the [feComposite compatibility table](/en-US/docs/Web/SVG/Element/feComposite#browser_compatibility)). We therefore need to import one of the images to blend inside the filter itself, using an `<feImage>` element.

> **Note:** Firefox [Bug 455986](https://bugzilla.mozilla.org/show_bug.cgi?id=455986) means that `feImage` cannot load partial images, including circles, rectangles, paths or other fragments defined in the document. So that this example works on more browsers, a full external image of the logo is loaded.

### HTML

```html
<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="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="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

{{EmbedLiveSample("Workaround_for_BackgroundImage")}}

## Specifications

<table class="no-markdown">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        {{SpecName("Filters 1.0", "filters.html#FilterPrimitiveInAttribute", "in")}}
      </td>
      <td>{{Spec2("Filters 1.0")}}</td>
      <td>No change</td>
    </tr>
    <tr>
      <td>
        {{SpecName("SVG1.1", "#element-attrdef-filter-primitive-in", "in")}}
      </td>
      <td>{{Spec2("SVG1.1")}}</td>
      <td>Initial definition</td>
    </tr>
  </tbody>
</table>
