HTML-Tipps

Bilder 90 Grad verdreht

Manchmal werden Bilder um 90 Grad verdreht dargestellt und keiner weiss warum. Zeigt man sie direkt im Browser an, passt alles, bettet man sie via <img src=""> ein ist es plötzlich um 90 Grad verdreht.

Problem: EXIF Daten für "Orientation"

Lösung:

img {
    image-orientation: from-image;
}

Dann werden die Bilder richtig angezeigt, da die EXIF Daten ausgewertet werden.

Erstellt: 12/2017| Geändert: 12/2017

SVG - eingebettete Grafiken werden nicht dargestellt auf iPhone / iPad

Mit Illustrator oder Infinity Designer erstellte SVGs werden in Safari in iOS zwar dargestellt - aber - wenn ein Bild enthalten ist, wird dieses in iOS nicht dargestellt. Im Internet habe ich dazu keinen Hinweis gefunden, aber durch endlose Versuche nun die Ursache und eine Lösung gefunden.

Folgender Aufbau liegt den SVGs zugrunde:

<use id="_Image1" serif:id="_Image1" xlink:href="#_Image1" x="0" y="0" width="300px" height="100px"/>
<defs>
    <image id="_Image1" width="300px" height="100px" xlink:href="data:image/png;base64,iVBORw0KGgo...." />
</defs>

Das funktioniert nicht, das Bild wird nicht angezeigt.

Lösung

Die Lösung ist am Ende simpel, wie so oft:

Ein Wrappen der Definition mit einem <g> Tag, welches dann die referenzierte id erhält löst das Problem - die Grafik wird nun auch am iPhone etc. dargestellt.

<use id="_Image1" serif:id="_Image1" xlink:href="#_Image1" x="0" y="0" width="300px" height="100px"/>
<defs>
    <!-- -wrap mit einem g Tag ist die Lösung -->
    <g id="_Image1" width="300px" height="100px">
        <image id="egal" width="300px" height="100px" xlink:href="data:image/png;base64,iVBORw0KGgo...." />
    </g>
    <!-- -wrap mit einem g Tag ist die Lösung -->
</defs>

Erstellt: 12/2021| Geändert: 12/2021