Почему не потягивается изображение вставленное в SVG файл?

Question

[Капитан Какао]

Вопрос на засыпку, создаю картинку с SVG маской. Выглядит она так:

А это код svg файлика:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<g>
	<defs>
		<polygon id="SVGID_1_" points="330,374 210,317 95,383.4 112.2,251.7 13.4,162.9 144,138.5 198,17.1 261.5,133.8 393.6,147.6 
			302.3,244.1 		"/>
	</defs>
	<clipPath id="SVGID_2_">
		<use xlink:href="#SVGID_1_"  overflow="visible"/>
	</clipPath>
	<image overflow="visible" clip-path="url(#SVGID_2_)" width="400" height="400" xlink:href="01.jpg" >
	</image>
</g>
</svg>

Вот в чём вопрос, почему если вставлять svg код напрямую в html, то обычная jpg картинка подтягивается и на неё наноситься SVG маск в виде звезды.
И живой пример: https://jsfiddle.net/uj6tcuyc/3/

Но если вставлять SVG код в тег img, то почему-то jpg картинка которая внутри не хочет потягиваться
Пример: https://jsfiddle.net/uj6tcuyc/4/

При этом если перейти по прямой ссылке на svg картинку, мы видим что в нутри jpg картинка нормально подтягивается.
Прямая ссылка: d3.qsb.su/01.svg

Так в чём же загвоздка? Почему не получается отобразит svg через тег img?

Answer 1

[Lynn «Кофеман»]

Это защита браузеров https://developer.mozilla.org/en-US/docs/Web/SVG/S...

Ограничения
В целях безопасности, Gecko ограничивает некоторые возможности SVG когда он используется как картинка:

* Отключен JavaScript;
* Не загружаются внешние ресурсы (например картинки, стили), хотя их можно использовать, если добавить в виде data: URI
* […]

Comments

[Капитан Какао]

Обалдеть, жаль конечно, ну что ж, придётся прям в html фиачить svg.
Большое спасибо!

Answer 2

[Николай]

скорей всего нужно добавить vivebox, оставлю ссылку тут

Comments

[Капитан Какао]

Так vivebox прописан в svg файле