svg image pattern fill doesnt render in html

Question

I have an svg image made by path elements and the path elements are inside g tags which transform and apply the fill to the path elements. The fill I used was a pattern which was predefined in the defs tag. The pattern element contains image tags which link to oth

Now the problem: when i put the svg code directly into the html, it worked fine; but the image needs to flexible for resizing so it has to be in img tags. Unfortunately when I link the svg externally, the fill on the path elements become transparent.I think the problem is that the image is not rendered because when I replace the fill with a simple hex color it works fine.

Here is the svg:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="232" height="158">
        <defs>
            <filter id="contrast">
                <feComponentTransfer>
                  <feFuncR type="linear" slope="25" intercept="-(0.5 * 25) + 0.5"></feFuncR>
                  <feFuncG type="linear" slope="25" intercept="-(0.5 * 25) + 0.5"></feFuncG>
                  <feFuncB type="linear" slope="100" intercept="-(0.5 * 100) + 0.5"></feFuncB>
                </feComponentTransfer>
             </filter>
            <pattern id="bg1" patternUnits="userSpaceOnUse" width="1000" height="3000">
                <image xlink:href="svg_bg.png" x="0" y="-25" width="2200" height="1800" style="filter: url(#contrast);"></image>
            </pattern>
        </defs>
        <g transform="scale(0.5,0.5)" stroke="none" fill="url(#bg1)">
            <path d="M150 0 L75 200 L225 200 Z" />
        </g>
    </svg>

Answer 1

When used in an image context, i.e. via an <img> tag or css background image SVG files must be complete in a single file to protect user's privacy.

You need to embed the svg_bg.png file into the SVG file as a data url to get this to work.

Answer 2

You should check the numbers in coordinates x and y everywhere and href to the svb_bg.png.

Demo for you code: http://jsbin.com/diwoduheze/1/