The in2 attribute for SVG specifies the second input image to the blending operation.
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="SourceGraphic" in2="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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend in="SourceGraphic" in2="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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend in="SourceGraphic" in2="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">
<feFlood flood-color="green" flood-opacity="0.5" result="myresult"/>
<feBlend in="SourceGraphic" in2="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">
<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="SourceGraphic" in2="StrokePaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in2 attribute for SVG specifies the second input image to the compositing operation.
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="SourceGraphic" in2="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">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="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">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="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">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="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">
<feImage href="/assets/svg/Happy100.svg" result="myresult"/>
<feComposite in="SourceGraphic" in2="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">
<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="SourceGraphic" in2="StrokePaint"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg> The in2 attribute for SVG specifies the second input image to the compositing operation.
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="SourceGraphic" in2="BackgroundAlpha" 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="BackgroundImage" 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="FillPaint" 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="myresult" 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="SourceAlpha" 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="SourceGraphic" in2="StrokePaint" scale="100"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>