Internet: Vector Graphics in HTML

dkracht

Gehört zu: Vektorgrafik
Siehe auch: HTML, SVG, WordPress

Vektorgrafiken in HTML-Seiten

Auch in HTML-Seiten möchte man ja ab und zu auch schöne Vektorgrafiken einbauen – nicht nur Pixel-Bilder.

Je nach Format (SVG, SWF, ODG, VSD, PPT,…) sind da unterschiedliche Lösungen möglich, wo bei schon das Upload solcher Grafiken ein Problemchen sein kann.

Upload von SVG-Grafiken

Bei WordPress muss man den Dateityp “SVG” zulassen zum Upload z.B. durch Installation des WordPress-Plugins “SVG Support”. Dies habe ich in Graphis in WordPress beschieben.

Bei Flickr geht es so:…

Bei Google Photos geht es so: …..

SVG Grafik in eine HTML-Seite einbinden

SVG Browser Support heute

Kein Web-Browser unterstützt den aktuellen SVG-Standard in vollem Umfang.

Mozilla Firefox hat sehr gute SVG-Unterstützung.

Microsoft Internet Explorer und Edge nur mittelmäßige SVG-Unterstützung.

Quelle: https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Scalable_Vector_Graphics%29

SVG Browser Support früher (2010)

Die SVG-Unterstützung der Web-Browser heutzutage ist “native”. In früheren Jahren musste ein SVG-Viewer (Adobe, Corel) installiert sein, damit der WebBrowser das SVG anzeigen kann.

Als IMG-Tag

SVG-Grafiken können auf verschiedene Weise in eine HTML-Seite eingefügt werden. Ein einfacher Weg ist, einfach einen IMG-Tag zu nehmen:

<img src="http://blog.kr8.de/files/Helloworld.svg" alt="SVG mit img Tag laden" width="600" height="350" >

SVG mit img Tag laden

Über die WordPress Library

Nach Installation des WordPress-Plugins “SVG Support” können SVG-Grafiken in die WordPress-Library hochgeladen werden und wie üblich bei WordPress in Artikel eingebunden werden.