suchen

HTML SVG

Sep 04, 2024 pm 04:40 PM
htmlhtml5HTML TutorialHTML PropertiesHTML tags

Die Verwendung von Bildern in HTML eignet sich hervorragend für multimediareiche Websites. Alles, was Sie tun müssen, ist, dem HTML-Code ein Tag hinzuzufügen, und viola, Ihr Browser zeigt das Bild Ihrer Wahl an und fügt sogar einen Link hinzu. Etwas beunruhigend wird es, wenn Sie wissen, dass das Bild oder Diagramm vergrößert wird, da ein JPG- oder PNG-Bild keine weiteren Details anzeigt, sobald es über die Auflösung hinaus vergrößert wird. SVG ist die Lösung für dieses Problem. SVG steht für Scalable Vector Graphics. Wie der Name schon sagt, können diese so weit wie nötig vergrößert werden, und die Details verschwinden nie. SVGs gibt es nicht nur in der Webtechnologie, aber ihre Verwendung in HTML ist wirklich nett. SVG eignet sich für Diagramme, Vektoren, Diagramme und Grafiken im Browser.

Syntax der Einbettung von SVG in HTML:

Ähnlich wie bei der Verwendung von Canvas in HTML5 gibt es ein einfaches Tag, mit dem Sie SVG in HTML5-Seiten einbetten können.

Syntax:

<svg width="width here" height="height here ">
…. …. …. ….
</svg>

Beispiele für SVG in HTML

Im Folgenden finden Sie einige Beispiele für Vektoren, die in HTML5 erstellt und eingebettet werden können:

Beispiel #1 – Zeichnen eines Rechtecks ​​über SVG in HTML

Code:



<svg width="500" height="600">
<rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"></rect>
Sorry but this browser does not support inline SVG.
</svg>

Ausgabe:

HTML SVG

Beispiel #2 – Zeichnen eines Quadrats mit abgerundeten Ecken in SVG

Für ein Quadrat mit abgerundeten Ecken müssen wir neben der Größe und den Abmessungen des Quadrats auch den Radius der Ecken mithilfe von rx und ry definieren.

Code:



<svg width="500" height="500">
<rect x="100" y="100" rx="30" ry="30" width="300" height="300" style="fill:green stroke:blue; stroke-width:5 ; opacity:0.5"></rect>
Sorry but this browser does not support inline SVG.
</svg>

Ausgabe:

HTML SVG

Beispiel #3 – Zeichnen eines Kreises in SVG mit Umriss und Farbablage darin

Code:



<svg width="400" height="400">
<circle cx="100" cy="100" r="90" stroke="red" stroke-width="1" fill="grey"></circle>
Sorry but this browser does not support inline SVG.
</svg>

Ausgabe:

HTML SVG

Beispiel #4 – Zeichnen einer geraden Linie mit SVG in HTML5

Wir können die Tag zum Zeichnen einer geraden Linie in HTML5-SVGs; Farbe, Linienstärke und Position können definiert werden.

Code:


<svg width="400" height="400">
<line x1="5" y1="5" x2="300" y2="300" style="stroke:yellow; stroke-width:3"></line>
</svg>

Ausgabe:

HTML SVG

Beispiel #5 – Zeichnen einer Sonnenfinsternis per SVG in HTML5

Wir können die Tag zum Zeichnen einer Sonnenfinsternis in HTML5-SVGs; Seine Farbe und Position können entlang des Stempels mit seinem Radius definiert werden.

Code:



<svg height="300" width="300">
<ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3"></ellipse>
Sorry but this browser does not support inline SVG.</svg>

Ausgabe:

HTML SVG

Beispiel #6 – Erstellen eines Polygons mit SVG in HTML5

Der Tag kann in SVGs zum Erstellen von Polygonen verwendet werden. Im Tag müssen wir die Positionen jedes Punktes angeben. Auch Füllfarben, Konturstärke usw. können im Code definiert werden.

Code:



<svg height="300" width="600">
<polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2"></polygon>
Sorry but this browser does not support inline SVG. </svg>

Ausgabe:

HTML SVG

Beispiel #7 – Erstellen einer Polylinie mit SVG in HTML5

Polylinie wird verwendet, um eine Form zu zeichnen, die nur aus einer geraden Linie besteht. Beachten Sie, dass auch diese Leitungen angeschlossen werden müssen. Hier ist ein Beispiel für eine Polylinienimplementierung in HTML5.

Code:



<svg height="300" width="600">
<polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3"></polyline>
Sorry but this browser does not support inline SVG. </svg>

Ausgabe:

HTML SVG

Beispiel #8 – Zeichnen von Text mit SVG in HTML5

Der Text kann in vielen Situationen für jede SVG-Datei erforderlich sein, beispielsweise zum Beschriften eines Diagramms usw. Glücklicherweise gibt es einen Tag in SVG, der verwendet werden kann. Der Text kann an jeder beliebigen Stelle im SVG gesetzt werden und Sie können auch seine Farbe und andere Details anpassen.

Code:



<svg height="300" width="500">
<text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text>
Sorry but this browser does not support inline SVG. </svg>

Ausgabe:

HTML SVG

Beispiel #9 – Zeichnen eines Sterns mit SVG in HTML5

Da wir nun mit den Grundlagen fertig sind, erstellen wir einen Stern, der mit Hilfe von SVG erstellt wird.

Code:



<svg width="400" height="400">
<polygon points="110,10 50,198 200,78 30,78 170,198" style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;"></polygon>
Sorry but this browser does not support inline SVG. </svg>

Ausgabe:

HTML SVG

Beispiel Nr. 10 – Verwendung eines linearen Farbverlaufs in SVG

Sie können in SVG-HTML-Canvas lineare und radiale Farbverläufe verwenden. Der Farbverlauf muss in der -Datei verschachtelt sein. Etikett. Dieses Tag wird dann im SVG-Tag markiert, um seine Verwendung anzuzeigen. Schauen wir uns ein Beispiel an, das Gradient in einer Sonnenfinsternis verwendet.

Code:



<svg height="300" width="400">
<defs>
<lineargradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
<stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop>
</lineargradient>
</defs>
<ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)"></ellipse>
Sorry but this browser does not support inline SVG. </svg>

Ausgabe:

HTML SVG

Fazit

Bei Websites, auf denen Diagramme und Diagramme verwendet werden sollen, sind SVGs ein Lebensretter. Die meisten modernen Webbrowser unterstützen auch SVG und sind nicht nur skalierbar. Ein weiterer Vorteil der Verwendung von SVG ist die Dateigröße. Da es sich nur um ein bisschen Code handelt, können SVGs im Vergleich zu herkömmlichen Bildern einen sehr geringen Speicherbedarf und eine sehr geringe Bandbreite haben.

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

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
HTML: Erstellen der Struktur von WebseitenHTML: Erstellen der Struktur von WebseitenApr 14, 2025 am 12:14 AM

HTML ist der Eckpfeiler der Erstellung von Webseitenstruktur. 1. HTML definiert die Inhaltsstruktur und die Semantik und Verwendung usw. Tags. 2. Stellen Sie semantische Marker wie usw. zur Verfügung, um den SEO -Effekt zu verbessern. 3. Um die Benutzerinteraktion durch Tags zu verwirklichen, achten Sie auf die Verifizierung der Form. 4. Verwenden Sie fortschrittliche Elemente wie in Kombination mit JavaScript, um dynamische Effekte zu erzielen. 5. Zu den häufigen Fehlern gehören nicht abgegebene Bezeichnungen und nicht geeignete Attributwerte, und Überprüfungstools sind erforderlich. 6. Optimierungsstrategien umfassen das Reduzieren von HTTP -Anforderungen, die Komprimierung von HTML, die Verwendung semantischer Tags usw.

Von Text zu Websites: Die Kraft von HTMLVon Text zu Websites: Die Kraft von HTMLApr 13, 2025 am 12:07 AM

HTML ist eine Sprache, mit der Webseiten erstellt, die Webseitenstruktur und -inhalt über Tags und Attribute definiert werden. 1) HTML organisiert die Dokumentstruktur über Tags, wie z. B.. 2) Der Browser analysiert HTML, um das DOM zu erstellen und die Webseite zu rendern. 3) Neue Merkmale von HTML5, wie z. B. Multimedia -Funktionen. 4) Zu den häufigen Fehlern gehören nicht abgestimmte Bezeichnungen und nicht geeignete Attributwerte. 5) Die Optimierungsvorschläge umfassen die Verwendung semantischer Tags und die Reduzierung der Dateigröße.

HTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchHTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchApr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

Die Rolle von HTML: Strukturierung von WebinhaltenDie Rolle von HTML: Strukturierung von WebinhaltenApr 11, 2025 am 12:12 AM

Die Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.

HTML und Code: Ein genauerer Blick auf die TerminologieHTML und Code: Ein genauerer Blick auf die TerminologieApr 10, 2025 am 09:28 AM

HtmlisaspecifictypeofcodeFocusedonstructuringuringwebcontent, während "Code" breitincludesluages ​​-ähnlichjavaScriptandpythonforfunctionality.1) htmldefineswebpageStructureStags.2) "Code" cometesaWiNrangeOfLanguagesForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForfirsInsForfunctionNacts

HTML, CSS und JavaScript: Wesentliche Tools für WebentwicklerHTML, CSS und JavaScript: Wesentliche Tools für WebentwicklerApr 09, 2025 am 12:12 AM

HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.

Die Rollen von HTML, CSS und JavaScript: KernverantwortungDie Rollen von HTML, CSS und JavaScript: KernverantwortungApr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

Ist HTML für Anfänger leicht zu lernen?Ist HTML für Anfänger leicht zu lernen?Apr 07, 2025 am 12:11 AM

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung