| Weitere Artikel aus dem Webentwickler Blog |
| Teilen |  |
 |
 |
HTML - Praxiswissen Teil 1 - Grafiken
HTML5 Praxiswissen - SVG-Grafiken direkt einbetten
XML-Formate, die sich in der Praxis bereits verbreitet haben und das Portfolio möglicher Dokumentdaten sinnvoll ergänzen, können direkt in HTML5 eingebunden werden, und zwar ohne die XML-typische Namensraumdeklaration. Neben MathML für mathematische Formeln gehört auch das Vektorgrafikformat SVG zu den XML-Formaten, die Sie direkt in HTML einbinden können.
SVG in HTML5
Sie können in HTML einen Bereich definieren, in dem eine vollständige SVG-Grafik notiert ist.
Beispiel
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Information</title>
</head>
<body>
<h1>Informationsecke</h1>
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="140" height="360" fill="#AAAAAA" />
<rect x="20" y="130" width="100" height="200" fill="#FF8800" />
<text x="20" y="325" stroke="#880088"
font-family="Arial,sans-serif" font-size="15">NFORMATION</text>
<circle r="50" cx="70" cy="70" fill="#880088" />
</svg>
</body>
</html>
Erläuterung
Zum besseren Verständnis zeigt das obige Beispiel ein vollständiges HTML-Dokument.
Um eine SVG-Grafik zu platzieren, notieren Sie an der gewünschten Stelle im Inhalt des HTML-Dokuments einen Bereich, markiert durch <svg>...</svg>. Innerhalb davon ist SVG-Syntax möglich (siehe dazu weiter unten). Die Beispielgrafik definiert ein großes Info-Symbol.
So sollte das Info-Symbol aussehen, wenn der Browser die SVG-Grafik anzeigt.
Weitere Hinweise
Halten Sie innerhalb von <svg> und </svg> die Syntax-Regeln von XML-Dokumenten ein. Dazu gehören beispielsweise die Unterscheidung von Groß- und Kleinschreibung und die Notation von Standalone-Elementen wie bei <circle ... />.
SVG in XHTML
Sie können in XHTML über das XML-Namensraumkonzept einen Bereich definieren, in dem eine vollständige SVG-Grafik notiert ist. Ein Browser muss, um dies zu verarbeiten, über einen XML-Parser verfügen, und das XHTML-Dokument muss vom Webserver als XML-Dokument ausgeliefert werden.
Beispiel
Ganzen Artikel lesen...
Stefan Münz, Clemens Gull
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
