HTML5 Grundlehrbuch

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Inline SVG

HTML5 Unterstützt die Einbettung von Inline SVG. SVG-Dateien können mit den folgenden Tags in das HTML-Dokument eingebettet werden: <embed>, <object> oder <iframe> (embed und iframe gehören beide zu den Einbettungsrahmen), durch diese Tags kann der SVG-Code direkt in die HTML-Seite eingebettet werden, oder wir können direkt auf die SVG-Datei verlinken.

Was ist SVG?

SVG steht für Scalable Vector Graphics (Skalierbare Vektorgraphik)
SVG wird zur Definition von auf dem Netzwerk basierenden vektorbasierten Grafiken verwendet
SVG verwendet das XML-Format zur Definition von Grafiken
Die Grafikqualität von SVG-Bildern bleibt bei Vergrößerung oder Änderung der Größe unverändert
SVG ist ein Standard der World Wide Web Consortium

SVG-Vorteile

Im Vergleich zu anderen Bildformaten (z.B. JPEG und GIF) bietet die Verwendung von SVG die folgenden Vorteile:

SVG-Bilder können mit einem Texteditor erstellt und bearbeitet werden
SVG-Bilder können durchsucht, indexiert, skriptiert oder komprimiert werden
SVG ist skalierbar
SVG-Bilder können in jeder Auflösung hochwertig gedruckt werden
SVG kann ohne Qualitätsverlust vergrößert werden

Browser-Unterstützung

Internet Explorer 9+, Firefox, Opera, Chrome, und Safari unterstützen die Einbettung von SVG.

把 SVG 直接嵌入 HTML 页面

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：

Example

<!DOCTYPE　html><html>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
　
<svg　xmlns="http://www.w3.org/2000/svg"　version="1.1"　height="190">
　　<polygon　points="100,10　40,180　190,60　10,60　160,180"
　　style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
　
</body>
</html>

Test to see ‹/›

The result after running is as follows:

Draw a circle with SVG

Example

!doctype　html>
<html>
<head>
<meta　charset="utf-8">
<title>Draw a circle with SVG　oldtoolbag.com</title>
</head>
<body>
　　　　<svg　xmlns="http://www.w3.org/2000/svg"　height="500px"　width="500px"　version="1.1">
　　　　　　<circle　cx="200"　cy="100"　r="100"　stroke="#afeedd"
　　　　　　stroke-width="5"　fill="#f0ddff"　/>
　　　　</svg>
</body>
</html>

Test to see ‹/›

In the <svg> tagheightandwidthProperty is to set the height and width of the SVG document,versionProperty can define the SVG version used,xmlns Property can define the SVG namespace;
<circle> is the tag used in SVG to create circles,cx and cy Property defines the center of the circle, x and y Coordinates, if these two properties are ignored, the dot will be set to (0, 0),rProperty defines the radius of the circle;
stroke and stroke-width Property controls how the outline of the shape is displayed,fill Property settings to set the color inside the shape;
Let's take a look at the demonstration image:

Draw a rectangle with SVG

Example

!doctype　html>
<html>
<head>
<meta　charset="utf-8">
<title>Draw a rectangle with SVG　oldtoolbag.com</title>
</head>
<body>
　　　　<svg　xmlns="http://www.w3.org/2000/svg"　width="500px"　height="500px"　version="1.1">
　　　　　　<rect　x="50"　y="100"　width="300"　height="150"
　　　　　　style="fill:rgb(145,245,255);stroke-width:5;stroke:#EE799F;fill-opacity:0.9;stroke-opacity:0.9;"/>
　　　　</svg>
</body>
</html>

Test to see ‹/›

The difference between SVG and Canvas

SVG is a description using XML 2The language of D graphics.

Canvas is drawn using JavaScript 2D graphics.

SVG is based on XML, which means that each element in the SVG DOM is available. You can attach a JavaScript event handler to an element.

In SVG, each drawn graphic is considered an object. If the properties of an SVG object change, the browser can automatically redraw the graphic.

Canvas wird zeixelig gerendert. In Canvas wird ein Mal, wenn das Bild gezeichnet ist, wird es nicht mehr von dem Browser beachtet. Wenn sich seine Position ändert, muss die gesamte Szene neu gezeichnet werden, einschließlich aller möglicherweise von den Grafiken überdeckten Objekte.

Vergleich von Canvas und SVG

Die folgende Tabelle zeigt einige Unterschiede zwischen Canvas und SVG.

Canvas	SVG
Abhängig von der Auflösung Unterstützt keine Ereignisverarbeiter Schwache Textrendering-Fähigkeit Kann Ergebnisse in den Formaten .png oder .jpg speichern Am besten geeignet für bildintensive Spiele, bei denen viele Objekte häufig neu gezeichnet werden	Unabhängig von der Auflösung Unterstützt Ereignisverarbeiter Am besten geeignet für Anwendungen mit großen Renderbereichen (z.B. Google Maps) Hohe Komplexität verlangsamt die Rendergeschwindigkeit (jede übermäßige Verwendung von DOM ist nicht schnell) Nicht geeignet für Spieleanwendungen

HTML5 MathML HTML5 Canvas