Внутри моего сайта я встраиваю несколько svgs. Кажется, что все они отлично работают в Chrome, Firefox, IE (9+) и в Safari. Однако, как только изображение будет включено в SVG, Safari не отображает изображение.

Основываясь на предыдущей аналогичной теме, я попробовал следующее:

Элементы SVG <image> не отображаются в Safari - вложение

 <use>

пометить как это<use></use>

Изображение SVG не появляется в Safari - Я не нахожу это очень полезным, потому что это удаляет aprt svg.

Не удается отобразить изображение SVG в Safari - Добавлено

<meta http-equiv="Content-Type" content="application/xhtml+xml"> в шапке.

И кроме того, я действительно не знаю, что еще попробовать. Может быть, еще одна интересная вещь, которую стоит отметить, это то, что на моей странице изображение не отображается, но я могу открыть файл svg в safari (только файл), и он будет отображаться правильно. Более того, после открытия в браузере в виде файла, он также отображается внутри страницы. И я вставляю svg на страницу с тегом img.

<img src="mysvg.svg" class="center-block"/>

Это мой SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
    <defs>
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414      "/>
    </defs>
    <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"></use>
    </clipPath>
    <g id="DSC_x5F_0112-2.psd" clip-path="url(#SVGID_2_)">
        <g id="DSC_x5F_0112-2.psd_1_" enable-background="new    ">

                <image overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNhaHR0cDov
.....SLKPF+7j+acOZPZjmsw4Q0f0L/6k1fu3WFvY/wDEB5o0d7H7/wD7SPFgPzVE54J9/wBI/qez5vei
r/fdeaS//9k=" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
            </image>
        </g>
    </g>
</g>
<g>
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>

Я сократил base64 строки изображения, чтобы сократить код. Полный SVG можно найтиВот.

ОБНОВЛЕНИЕ: просто чтобы быть ясно, svg показывает в браузере (сафари), но изображение отсутствует (я вижу только границы).