So verwenden Sie SVG in HTML5

In HTML5 können wir SVG-Bilder mit dem -Tag und dem

SVG ist ein Vektorgrafikformat, das neu gezeichnet werden kann, um sich ohne Verzerrung an die Größe der Webseite anzupassen; sehr geeignet für den Einsatz im responsiven Webdesign. Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Verwendung von SVG in HTML5. Ich hoffe, er wird Ihnen hilfreich sein. [Empfohlene verwandte Video-Tutorials: HTML5-Tutorial]

Verwenden von HTML5-

SVG Als Teil der HTML 5-Entwurfsspezifikation ist das

Hinweis:

1. Um das

2. Dies kann nur zum Importieren von statischem SVG verwendet werden.

Unten finden Sie ein einfaches HTML5-SVG-Beispiel.

<svg  id = "circle"  height = "200"  xmlns = "http://www.w3.org/2000/svg" > 
      <circle  id = "greencircle"  cx = "30"  cy = "30"  r = " 30"  fill = "red"  /> 
</svg>

Rendering:

Verwenden Sie das -Tag, um SVG-Bilder zu importieren

Hinweis: Das -Tag kann nur zum Importieren statischer SVG-Bilder verwendet werden.

<img  src = "green-circle.svg"  height = "80"  alt="漂亮的绿色圆圈" />

Rendering:

Verwenden Sie das

<object type="image/svg+xml" data="image.svg"></object>

Technisch gesehen kann das

Verwenden Sie das -Tag, um SVG-Bilder zu importieren

<object type="image/svg+xml" data="image.svg">
    <img  src="image.svg" / alt="So verwenden Sie SVG in HTML5" >
</object>

Es wird nicht empfohlen, SVG-Bilder mit dem Tag zu importieren, der nicht Teil der HTML-Spezifikation ist, aber von allen Browsern, die hauptsächlich zur Implementierung von Flash-Plugins verwendet werden, weitgehend unterstützt wird.

Verwenden Sie das

<embed type="image/svg+xml" src="image.svg" />

Das obige ist der detaillierte Inhalt vonSo verwenden Sie SVG in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!