SVG

SVG kann über unterschiedliche Wege eingebunden werden:

Das einbetten als Objekt ging schon vor HTML5 und läuft auch relativ zuverlässig.

<object
  width="280" height="280"
  type="image/svg+xml"
  data="/media/HTML5-logo.svg">
  Ihr Browser unterst&uuml;tzt kein SVG</object>
Ihr Browser unterstützt kein SVG

Das einbetten als Image funktioniert nicht immer und genau aus diesem Grund sollte darauf verzichtet werden!

<img
  height="280" width="280"
  src="/media/HTML5-Logo.svg"
  alt="HTML5 Logo (SVG)" />
HTML5 Logo

Ab HTML5 geht es auch durch direktes Einbinden der SVG-Source
hierdurch ist das Nachladen der SVG Datei nicht mehr erforderlich!

Aus meiner Sicht macht das in Verbindung mit einem CMS nur dann Sinn, wenn die SVG-Source durch das System in den Code eingebettet wird, jedoch als separate Datei vorliegt, denn sonst wäre eine Bearbeitung der SVG-Source sehr kompliziert!

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="280" height="280">
  <title>HTML5 Logo</title>
  ...
  </svg>
HTML5 Logo

Natürlich besteht auch noch die Möglichkeit den Code für das Canvas Objekt umzuformen!

Die Beispiel-Datei (das HTML5 Logo) stammt von https://commons.wikimedia.org/wiki/File:HTML5_logo_and_wordmark.svg, sie unterliegt der Creative CommonsAttribution 3.0 Unported license.

Im Webserver muss natürlich der Dateiendung „.svg“ der MIME-Type „image/svg+xml“ zugeordnet sein!