Internet: Graphics in HTML

Grafiken 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.

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="/wp-content/uploads/Helloworld.svg" alt="SVG mit img Tag laden" width="600" height="350" >

SVG mit img Tag laden

Als EMBED oder OBJECT

<embed width=”940″ height=”500″ type=”image/svg+xml” src=”%ATTACHURL%/rss-family.svg”></embed>

oder:

<object data=”%ATTACHURL%/rss-family.svACHURL%/rss-family.svg” width=”940″ height=”500″ type=”image/svg+xml” />