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>

score 1 · Accepted Answer · answered Dec 09 '14 at 13:54

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.

answered Dec 09 '14 at 13:54

Robert Longson

118,664
26
252
242

This would increase the the svg file size incredibly, but i guess its worth it. Im just going to have to crop down the image. Thank you very much! Wish I could vote this up, but i don't have enough reputation. – ducklin5 Dec 09 '14 at 14:55
The overall size is exactly the same though isn't it? – Robert Longson Dec 09 '14 at 14:57
Yes, but it takes a much longer loading time. Ive already crop cropped the image, its fine either way: http://golem.fnhost.org/pyro/addons/shared_addons/themes/Golem/img/golem.svg – ducklin5 Dec 09 '14 at 15:15
1

Yes but your original way didn't load the png at all so it was quicker because it did nothing. That doesn't seem a fair speed comparison to me. – Robert Longson Dec 09 '14 at 15:43

score 0 · Answer 2 · answered Dec 09 '14 at 14:32

0

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/

answered Dec 09 '14 at 14:32

Ruben Kazumov

3,803
2
26
39

Those are fine, because it works perfectly well when the svg code is added directly to the html – ducklin5 Dec 09 '14 at 14:59

svg image pattern fill doesnt render in html

2 Answers2