SVG в HTML не показывает вложенные изображения

Question

У меня есть код, похожий на следующий, показывающий изображение svg на моем сайте.

<a href="http://site.com/path/to/file.svg">
<img src="http://site.com/path/to/file.svg">
</a>

Файл SVG выглядит примерно так:

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <title>Annotation</title>
        <image xlink:href="http://site.com/path/to/image.jpg" id="svg_1" height="400" width="600" y="0" x="0"/>
    </g>
    <g>
        <title>Layer 1</title>
        <g id="svg_2"/>
            <path fill="none" stroke="#000000" stroke-width="3" id="svg_3".....
            <line id="svg_4" y2="249" x2="134" y1="248" x1="155" stroke-width="3" stroke="#000000" fill="none"/>
            <path d="m97,177c0,-1 -0.292892,-1.292892 -1,-2c-0.707108,-0.707108......
        </g>
</svg>

svg загружается (через php с правильными заголовками и т. Д.) И может видеть линии и объекты в svg, но не изображение.

Если я щелкну правой кнопкой мыши и открою ссылку в новом окне, я смогу увидеть фоновое изображение. Если я затем вернусь к первой вкладке, где ссылка svg находится в html, изображение показывает.

Похоже, что браузер не загружает изображение, поэтому я пробовал разные вещи, такие как загрузка <img src="http://site.com/path/to/image.jpg"/> рядом с ним. простое изображение работает, но изображение в svg все равно не будет отображаться.

Было бы хорошо избегать таких вещей, как iframe, поскольку установка размера для тега img и масштабирование svg хороши (если вы не можете сделать это в iframe?)

Любые указатели будут с благодарностью.

TL; DR

изображения в svg не отображаются, пока вы не откроете его во второй вкладке без HTML-кода вокруг него

Answer 1

Теги

SVG <img> являются подмножеством стандарта SVG. Это так, что они ведут себя как можно ближе к другим типам изображений. Например, файлы SVG могут запускать JavaScript. Если пользователь загружал изображение SVG на сайт обмена изображениями, то было бы неожиданно разрешить изображениям, отображаемым с безопасным в противном случае тегом <img>, выполнять произвольный JavaScript. То же самое относится и к другим видам поведения, таким как загрузка внешних ресурсов. Если вы хотите получить полное поведение, вы можете встроить SVG-изображение или использовать тег <object>.