Fill SVG image with pattern - html

Question

I'm trying to fill SVG image with a pattern in HTML, but I'm not successfull. If I fill with the pattern path, it works. But I cannot apply it onto svg image.
Could you help me please?
Here is example.
Here is example code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="400" height="400">
<defs>
<pattern id="image" x="0" y="0" width="400" height="400" patternUnits="userSpaceOnUse">
<image x="0" y="0" xlink:href="latka.jpg" width="100" height="100" />
</pattern>
</defs>
<image x="0" y="0" width="400" height="400" xlink:href="kosile.svg" fill="url(#image)"/>
</svg>

Answer 1

It makes no sense to apply a fill attribute to an embedded SVG. I assume what you were trying to do is create a tiled background on which to superimpose the linked SVG. The easiest way to do this is by adding a <rect> element filled with the background pattern, then put your embedded SVG image on top of this.
Here's an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200" viewBox="0 0 200 200">
<defs>
<!-- define a pattern using a yellow tile image -->
<pattern id="bgimg" x="0" y="0" width="60" height="60"
patternUnits="userSpaceOnUse">
<image x="0" y="0" width="60" height="60"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Shades_of_yellow.png/60px-Shades_of_yellow.png" />
</pattern>
</defs>
<!-- use this pattern to fill the SVG background -->
<rect x="0" y="0" width="200" height="200" fill="url(#bgimg)" />
<!-- Embed another SVG (purple circle) on top of this background -->
<image x="40" y="40" width="120" height="120"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/5/5e/FF0084_circle.svg" />
</svg>