Wewnątrz mojej strony internetowej wykonuję kilka svgów. Wszystkie wydają się działać dobrze w Chrome, Firefox, IE (9+) i Safari. Skoro tylko svg zawiera obraz, safari nie renderuje obrazu.

W oparciu o poprzedni podobny temat próbowałem:

Elementy SVG <image> nie są wyświetlane w Safari - obejmujący

 <use>

znacznik taki jak ten<use></use>

Obraz SVG nie pojawia się w Safari - Nie uważam tego za bardzo użyteczny, ponieważ powoduje to usunięcie pliku svg.

Nie można renderować obrazu SVG w Safari - Dodany

<meta http-equiv="Content-Type" content="application/xhtml+xml"> w nagłówku.

Poza tym nie wiem, co jeszcze spróbować. Być może jeszcze jedną interesującą rzeczą jest to, że wewnątrz mojej strony obraz nie jest wyświetlany, ale mogę otworzyć plik svg w safari (tylko plik) i zostanie on poprawnie renderowany. Co więcej, po otwarciu w przeglądarce jako pliku, renderuje się również wewnątrz strony. I osadzam svg na stronie ze znacznikiem img.

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

To jest mój 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>

Mam zredukowany łańcuch obrazu base64, aby skrócić kod. Pełny svg można znaleźćtutaj.

UPDATE: Żeby było jasne, svg pokazuje w przeglądarce (safari), ale brakuje obrazu (widzę tylko obramowanie).