Womit lässt sich <center> bei SVG-Grafiken ersetzen?

[Matthias Scharwies]

Guten Morgen,

Und ich habe eine Ressource zur optimalen Data-URI Codierung für SVG Bilder gefunden. Allerdings war das auch schon 2015 Thema im Forum. Ich habe es jetzt im Wiki-Artikel zu Data-URIs eingebaut.

Ich weiß nicht, ob das zielführend war. Ja, man kann Grafiken als Data-URL einfügen. In der Gegenüberstellung (heute würde ich das einheitlich Fazit nenenn) schrub ich:

Beachten Sie:

• Data-URI-Grafiken sind base64-codiert ca. 33% größer als externe Bilddateien.
• Der Bildaufbau dauert gerade bei mobilen Geräten länger. (Artikel von 2013, ursprünglich auf mobify.com, kann auf Englisch bei catchpoint.com nachgelesen werden.)
• Data-URI-Grafiken benötigen einen zusätzlichen Verarbeitungsschritt, um sie zu erstellen. Das macht es umständlicher, die darin codierten Bilder zu verändern.

→ Alternativen wie der Einsatz von SVG-Sprites, CSS-Sprites oder Unicode-Zeichen als Icons sind praktischer.

Da hätte ich noch deutlicher sein müssen:

• SVG/Tutorials/Icons

Das ist ein Tutorial von @@Gunnar Bittersmann, das ich aus dem Forum ins Wiki übertragen habe. Es wird am Ende des HTML-Dokuments ein SVG-Sprite erstellt, das dann an den passenden Stellen eingebunden wird. So wird so etwas heute gemacht.

SVG/Tutorials/Einstieg/Einbindung#SVG als Data-URL im CSS

Um eine Grafik im Stylesheet unterzubringen, müssen Sie sie zunächst als Data-URL kodieren. Allerdings sind heutige Browser nicht sehr streng beim Interpretieren von Data-URLs, Sie können auf die Codierung vieler Zeichen verzichten. Unumgänglich ist aber

• die Codierung des Zeichens # als %23
• die Codierung von ' als %27 oder " als %22, je nachdem, welchen Zeichenkettenbegrenzer Sie für die Data-URL verwenden
• das Maskieren von Zeilenumbrüchen durch \ - oder Sie müssen die Zeilenumbrüche entfernen
• Das Einschließen der Data-URL in Anführungszeichen, wenn Klammern, Anführungszeichen, Whitespace oder Zeichen mit einem Zeichencode über 127 darin verwendet werden

Ich habe deinen Abschnitt durch Links auf die Tutorials ersetzt, damit wir keinen duplicate content im Wiki haben.

Herzliche Grüße

Matthias Scharwies