object- und iframe sind nicht nur Behälter für SVG oder für Video – sie können auf ein PDF-Dokument verweisen und bieten dem Benutzer inmitten der Webseite einen Einblick in das PDF-Dokument.
Das Laden in einem img-Tag war der Clou der SVG-SMIL-Animationen, aber die Chrome-Entwickler hatten SMIL versenkt. Inzwischen ist SMIL wieder »drin« und könnte GIF-Animationen ersetzen.
SVG inline in die Seite einzubinden, hat seinen Reiz: Kein zusätzlicher HTTP-Request bremst die Seite aus. Aber niemand kann sich des Gefühls erwehren, dass der HTML-Quelltext mit inline-SVG schneller aufgeht als ein Hefekloß.
Warum mosert der Validator?
Error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.
Fotos und Grafiken werden immer für die individuelle Webseite optimiert. Nachdem JPEG über Jahrzehnte das Königsformat für Fotos war und Motive mit transparentem Hintergrund als PNG24 die Ladezeit ausdehnt, ist WebP das neue JPEG + PNG.
SVG-Grafiken aus Inkscape und Adobe Illustrator sind vollgepackt mit Attributen, die für die Anzeige in Webseiten nicht gebraucht werden und die Ladezeit verlängern. Wie läßt sich SVG optimieren?
Pseudo-Elemente wie ::before und ::after ersparen zusätzliche HTML-Elemente, aber mit der Einschränkung, dass Javascript nicht auf Pseudo-Elemente wie ::before und ::after zugreifen kann, weil sie nicht im DOM liegen. Javascript querySelector und getComputedStyle bilden zusammen eine Lösung.
Das SVG image-Element bettet Bilder in ähnlicher Weise wie das HTML-img-Tag in eine SVG-Grafik ein. Das Bild kann eine Bitmap (jpg, png, gif) oder eine weitere SVG-Grafik sein.
Wie beim Einbetten von Bildern in HTML bleibt bei PNG bzw. GIF die Transparenz im Bild erhalten.
Seit HTML5 ist das iframe-Tag zum bevorzugten Element für das Einbinden von HTML-Dokumenten in die eigene Webseite geworden. Das object-Tag kommt quasi nicht mehr vor.
Icon-Fonts funktionieren wie jeder ladbare Font, sie hören auf CSS color genauso wie auf font-size. Sie wirken auf dem großen Desktop-Monitor genauso glatt wie auf den kleinen Monitoren der mobilen Geräte.
Eingebettete PDFs sind beliebte Downloads in Webseiten – in erster Linie beliebt in Marketing und Kommunikationsabteilungen und den Kollegen, die für die Redaktion des Internetauftritts zuständig sind. Meine Kunden hingegen flehe ich auf Knien an: Lasset ab vom PDF auf der Homepage oder behandelt es besser. Aber wie bindet man ein PDF richtig ein und was muss ein PDF mitbringen?
SVG als Standalone ist klasse. Der Clou von SVG ist, dass es sich als Komponente in die wohlbekannten Techniken des Webdesigns integrieren läßt.
Wenn Formulare auf mobilen Geräten landen, sind die wiederspenstigen Eingabefelder eine Bremse:
Immer wieder umschalten zur numerischen Tastatur, weil Ziffern, Sonderzeichen oder Emailadressen eingegeben werden. Mit neuen Input Types bringt HTML5 Komfort in HTML-Formulare.
