The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend in="BackgroundImage" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend in="FillPaint" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend in="myresult" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend in="SourceAlpha" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend in="SourceGraphic" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend in="StrokePaint" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="BackgroundAlpha" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="BackgroundImage" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="FillPaint" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix result="myresult" values="0 1 1 0 0 1 0 1 0 0 1 1 0 0 0 0 0 0 1 0"/>
<feColorMatrix in="myresult" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="SourceAlpha" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="SourceGraphic" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="StrokePaint" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feComponentTransfer in="BackgroundAlpha">
<feFuncR/>
<feFuncG/>
<feFuncB/>
<feFuncA/>
</feComponentTransfer>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feComponentTransfer in="BackgroundImage">
<feFuncR/>
<feFuncG/>
<feFuncB/>
<feFuncA/>
</feComponentTransfer>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feComponentTransfer in="FillPaint">
<feFuncR/>
<feFuncG/>
<feFuncB/>
<feFuncA/>
</feComponentTransfer>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feComponentTransfer result="myresult">
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
<feFuncA type="table" tableValues="1 0"/>
</feComponentTransfer>
<feComponentTransfer in="myresult">
<feFuncR/>
<feFuncG/>
<feFuncB/>
<feFuncA/>
</feComponentTransfer>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feComponentTransfer in="SourceAlpha">
<feFuncR/>
<feFuncG/>
<feFuncB/>
<feFuncA/>
</feComponentTransfer>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feComponentTransfer in="SourceGraphic">
<feFuncR/>
<feFuncG/>
<feFuncB/>
<feFuncA/>
</feComponentTransfer>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feComponentTransfer in="StrokePaint">
<feFuncR/>
<feFuncG/>
<feFuncB/>
<feFuncA/>
</feComponentTransfer>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="BackgroundAlpha" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="BackgroundImage" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="FillPaint" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="myresult" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="SourceAlpha" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="StrokePaint" in2="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="BackgroundAlpha" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="BackgroundImage" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="FillPaint" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix result="myresult" kernelMatrix="-1 0 0 0 0 0 0 0 1"/>
<feConvolveMatrix in="myresult" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="SourceAlpha" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="SourceGraphic" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feConvolveMatrix in="StrokePaint" kernelMatrix="1 0 0 0 0 0 0 0 -1"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDiffuseLighting in="BackgroundAlpha">
<fePointLight z="100"/>
</feDiffuseLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDiffuseLighting in="BackgroundImage">
<fePointLight z="100"/>
</feDiffuseLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDiffuseLighting in="FillPaint">
<fePointLight z="100"/>
</feDiffuseLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDiffuseLighting result="myresult">
<fePointLight z="10"/>
</feDiffuseLighting>
<feDiffuseLighting in="myresult">
<fePointLight z="100"/>
</feDiffuseLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDiffuseLighting in="SourceAlpha">
<fePointLight z="100"/>
</feDiffuseLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDiffuseLighting in="SourceGraphic">
<fePointLight z="100"/>
</feDiffuseLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDiffuseLighting in="StrokePaint">
<fePointLight z="100"/>
</feDiffuseLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="BackgroundAlpha" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="BackgroundImage" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="FillPaint" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="myresult" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceAlpha" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="SourceGraphic" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feDisplacementMap in="StrokePaint" in2="SourceGraphic" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="BackgroundAlpha"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="BackgroundImage"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="FillPaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="-10" dy="-10" result="myresult"/>
<feDropShadow dx="10" dy="10" in="myresult"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="SourceAlpha"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feDropShadow dx="10" dy="10" in="StrokePaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feGaussianBlur in="BackgroundAlpha" stdDeviation="10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feGaussianBlur in="BackgroundImage" stdDeviation="10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feGaussianBlur in="FillPaint" stdDeviation="10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feGaussianBlur result="myresult" stdDeviation="100"/>
<feGaussianBlur in="myresult" stdDeviation="10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feGaussianBlur in="StrokePaint" stdDeviation="10"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feMerge>
<feMergeNode in="myresult"/>
<feMergeNode in="BackgroundAlpha"/>
</feMerge>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feMerge>
<feMergeNode in="myresult"/>
<feMergeNode in="BackgroundImage"/>
</feMerge>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feMerge>
<feMergeNode in="myresult"/>
<feMergeNode in="FillPaint"/>
</feMerge>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feMerge>
<feMergeNode in="SourceGraphic"/>
<feMergeNode in="myresult"/>
</feMerge>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feMerge>
<feMergeNode in="myresult"/>
<feMergeNode in="SourceAlpha"/>
</feMerge>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feMerge>
<feMergeNode in="myresult"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feMerge>
<feMergeNode in="myresult"/>
<feMergeNode in="StrokePaint"/>
</feMerge>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feMorphology in="BackgroundAlpha" radius="10"/>
</filter>
</defs>
<text dominant-baseline="middle" fill="#ff000080" filter="url(#myid)" font-family="sans-serif" font-size="500" stroke="#0000ff80" stroke-width="50" text-anchor="middle" x="50%" y="50%">text</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feMorphology in="BackgroundImage" radius="10"/>
</filter>
</defs>
<text dominant-baseline="middle" fill="#ff000080" filter="url(#myid)" font-family="sans-serif" font-size="500" stroke="#0000ff80" stroke-width="50" text-anchor="middle" x="50%" y="50%">text</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feMorphology in="FillPaint" radius="10"/>
</filter>
</defs>
<text dominant-baseline="middle" fill="#ff000080" filter="url(#myid)" font-family="sans-serif" font-size="500" stroke="#0000ff80" stroke-width="50" text-anchor="middle" x="50%" y="50%">text</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feMorphology radius="10" result="myresult"/>
<feMorphology in="myresult" radius="10"/>
</filter>
</defs>
<text dominant-baseline="middle" fill="#ff000080" filter="url(#myid)" font-family="sans-serif" font-size="500" stroke="#0000ff80" stroke-width="50" text-anchor="middle" x="50%" y="50%">text</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feMorphology in="SourceAlpha" radius="10"/>
</filter>
</defs>
<text dominant-baseline="middle" fill="#ff000080" filter="url(#myid)" font-family="sans-serif" font-size="500" stroke="#0000ff80" stroke-width="50" text-anchor="middle" x="50%" y="50%">text</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feMorphology in="SourceGraphic" radius="10"/>
</filter>
</defs>
<text dominant-baseline="middle" fill="#ff000080" filter="url(#myid)" font-family="sans-serif" font-size="500" stroke="#0000ff80" stroke-width="50" text-anchor="middle" x="50%" y="50%">text</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feMorphology in="StrokePaint" radius="10"/>
</filter>
</defs>
<text dominant-baseline="middle" fill="#ff000080" filter="url(#myid)" font-family="sans-serif" font-size="500" stroke="#0000ff80" stroke-width="50" text-anchor="middle" x="50%" y="50%">text</text>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feOffset dx="100" dy="100" in="BackgroundAlpha"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feOffset dx="100" dy="100" in="BackgroundImage"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feOffset dx="100" dy="100" in="FillPaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feOffset dx="-100" dy="-100" result="myresult"/>
<feOffset dx="100" dy="100" in="myresult"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feOffset dx="100" dy="100" in="SourceAlpha"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feOffset dx="100" dy="100" in="SourceGraphic"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feOffset dx="100" dy="100" in="StrokePaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="BackgroundAlpha">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="BackgroundImage">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="FillPaint">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting result="myresult">
<fePointLight z="10"/>
</feSpecularLighting>
<feSpecularLighting in="myresult">
<fePointLight z="100"/>
</feSpecularLighting>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="SourceAlpha">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="SourceGraphic">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feSpecularLighting in="StrokePaint">
<fePointLight z="100"/>
</feSpecularLighting>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in attribute for SVG specifies the input for the filter primitive.
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.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feTile height="100%" in="BackgroundAlpha" width="100%" x="0" y="0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="25vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feTile height="100%" in="BackgroundImage" width="100%" x="0" y="0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="25vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feTile height="100%" in="FillPaint" width="100%" x="0" y="0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="25vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feTile height="80%" result="myresult" width="80%" x="10%" y="10%"/>
<feTile height="100%" in="myresult" width="100%" x="0" y="0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="25vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feTile height="100%" in="SourceAlpha" width="100%" x="0" y="0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="25vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feTile height="100%" in="SourceGraphic" width="100%" x="0" y="0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="25vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feTile height="100%" in="StrokePaint" width="100%" x="0" y="0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="25vh" stroke="#0000ff80" stroke-width="50"/>
</svg>