[RbnJrg]

Originally Posted by KevinH

Why not add filter=url(./MetalFilter.svg#metal) as one of the parameters in the Image1.svg file?

When you use the filter attribute directly on an SVG file, the rendering engine attempts to apply the filter as part of the rendering process.

The filter's SourceGraphic and SourceAlpha refer to the contents of the file where the filter is defined. Since the Metal_Filter.svg file only contains the filter definition and no shapes (such as a <path>), the SourceGraphic is empty. It's a "blind" filter that doesn't have a source image to operate on. Therefore, it doesn't generate any results.

For it to work, the filter and the shape must be in the same SVG file. You should need something like:

Spoiler:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    width="188"
    height="188.00005"
    viewBox="0 0 188 188.00005"
    version="1.1"
    id="svg135"
    xml:space="preserve"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

    <defs id="defs132">
        <filter id="metal">
            <feGaussianBlur stdDeviation="3" result="blur"/>
            <feSpecularLighting result="spec" in="blur" specularExponent="35" lighting-color="#ccc">
                <fePointLight x="75" y="100" z="200"/>
            </feSpecularLighting>
            <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="3d_efect"/>
            <feFlood flood-color="#ffff00" result="solid_color"/>
            <feComposite in="solid_color" in2="SourceAlpha" operator="in" result="clipped_color"/>
            <feBlend in="clipped_color" in2="3d_efect" mode="overlay"/>
        </filter>
    </defs>

    <g
        id="layer1"
        transform="translate(-324.31148,-460.62293)">
        <path
            fill="#333" 
            filter="url(#metal)"
            d="m 412.96619,646.87295 c -0.26404,-0.9625 -0.76642,-3.55 -1.1164,-5.75 -0.86094,-5.41195 -3.17588,-12.59078 -6.77181,-21 -10.64158,-24.88573 -36.7796,-48.35304 -63.2665,-56.80213 -3.89031,-1.24098 -15.30727,-3.69787 -17.18366,-3.69787 -0.17399,0 -0.31634,-2.25 -0.31634,-5 0,-2.75 0.14235,-5 0.31634,-5 1.87639,0 13.29335,-2.45689 17.18366,-3.69787 26.4869,-8.44909 52.62492,-31.9164 63.2665,-56.80213 3.59593,-8.40922 5.91087,-15.58805 6.77181,-21 1.19712,-7.52515 1.17545,-7.5 6.46169,-7.5 5.27947,0 5.22223,-0.066 6.5019,7.5 0.92965,5.49656 5.6437,18.87463 8.98865,25.50907 11.38498,22.58113 34.15014,42.636 58.27731,51.33916 3.93185,1.41829 10.09256,3.09135 13.69048,3.7179 l 6.54166,1.13918 v 4.89734 c 0,2.69354 -0.18541,4.89735 -0.41203,4.89735 -0.22662,0 -3.74385,0.63748 -7.81606,1.41662 -27.84018,5.32671 -56.78273,27.80094 -70.28136,54.57431 -3.34495,6.63444 -8.059,20.01251 -8.98865,25.50907 -1.27967,7.56603 -1.22243,7.5 -6.5019,7.5 -3.784,0 -4.97191,-0.38891 -5.34529,-1.75 z"
            id="path1" />
    </g>
</svg>

On the other hand, with the <img> tag, the rendering engine FIRST loads Image1.svg and renders it (so, at this point, the engine already knows the shape and alpha channel of the image). Then, the css filter property tells the engine to take this already rendered image and apply the filter. The filter's SourceGraphic refers to this rendered image and now it works because the filter has a "canvas" to work on.