SVG

SVG kann über unterschiedliche Wege eingebunden werden:

Das einbetten als Objekt ging schon vor HTML5 und lief damals auch schon relativ zuverlässig, es können interne Links und JavaScript genutzt werden, ebenso ist ein Fallback Bild für sehr alte Browser im inneren des object-Tags möglich.

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

Das einbetten als Image funktioniert wie bei anderen Bildformaten auch, vorteile des SVG Fortmates wie interne Links und JavaScript funktionieren allerdings nicht!

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

Ab HTML5 geht es auch durch direktes Einbinden der SVG-Source, es können interne Links und JavaScript genutzt werden, ein 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 Commons Attribution 3.0 Unported license.

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

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 3.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.0.167
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sat, 25. Jun 2022 14:46:24

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 20.04.5 LTS (Focal Fossa)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 800.000 MHz