Inleiding tot HTML SVG

Het gebruik van afbeeldingen in HTML is geweldig voor websites met veel multimedia. Het enige wat u hoeft te doen is een tag toevoegen aan de HTML-code en altviool, uw browser zal weergeven en zelfs een link toevoegen naar de afbeelding van uw keuze. Het wordt een beetje verontrustend in situaties waarin je weet dat op de afbeelding of het diagram zal worden ingezoomd omdat een JPG.webp of PNG geen verdere details meer toont als het eenmaal voorbij de resolutie is ingezoomd. SVG is de oplossing voor dit probleem. SVG staat voor Scalable Vector Graphics. Zoals de naam al doet vermoeden, kunnen deze zo vaak als nodig worden ingezoomd en verdwijnen de details nooit. SVG's zijn niet exclusief voor webtechnologie, maar ze kunnen gebruiken in HTML is echt netjes.

SVG is handig voor diagrammen, vectoren, grafieken en grafieken in de browser. Laten we eens kijken hoe u ze hier in detail kunt gebruiken.

Syntaxis van het insluiten van SVG in HTML

Net als bij het gebruik van canvas in HTML5, is er een eenvoudige tag die u kunt gebruiken om SVG in HTML5-pagina's in te sluiten. De syntaxis is als volgt:


…. …. …. ….

Voorbeelden van SVG's in HTML

Laten we nu een paar voorbeeldvectoren bekijken die kunnen worden gemaakt en ingesloten in HTML5:

Voorbeeld # 1 - Een rechthoek tekenen via SVG in HTML

Code:




Sorry but this browser does not support inline SVG.

Output:

Voorbeeld # 2 - Een vierkant tekenen met afgeronde hoeken in SVG

Voor een vierkant met afgeronde hoeken zullen we de straal van de hoeken moeten definiëren met behulp van rx, afgezien van de grootte en afmetingen van het vierkant.

Code:




Sorry but this browser does not support inline SVG.

Output:

Voorbeeld # 3 - Een cirkel tekenen in SVG met overzicht en kleurarchitectuur erin

Code:




Sorry but this browser does not support inline SVG.

Output:

Voorbeeld # 4 - Een rechte lijn tekenen met SVG in HTML5

We kunnen de tag gebruiken om een ​​rechte lijn in HTML5 SVG's te tekenen, kleur, lijndikte en positie ervan kunnen ook worden gedefinieerd.

Code:




Output:

Voorbeeld # 5 - Een eclips tekenen via SVG in HTML5

We kunnen de tag gebruiken om een ​​eclips te tekenen in HTML5 SVG's, de kleur en de positie ervan kunnen ook worden bepaald samen met de straal ervan.

Code:




Sorry but this browser does not support inline SVG.

Output:

Voorbeeld # 6 - Een polygoon maken met SVG in HTML5

De tag kan in SVG's worden gebruikt om polygonen te maken. In de tag moeten we de posities van elk punt vermelden. Vulkleuren, omtrekdikte, etc. kunnen ook in de code worden gedefinieerd.

Code:




Sorry but this browser does not support inline SVG.

Output:

Voorbeeld # 7 - Een polylijn maken met SVG in HTML5

Polylijn wordt gebruikt om een ​​vorm te tekenen die alleen uit een rechte lijn zal bestaan. Houd er rekening mee dat deze lijnen ook moeten worden verbonden. Hier is een voorbeeld van een polyline-implementatie in HTML5.

Code:




Sorry but this browser does not support inline SVG.

Output:

Voorbeeld # 8 - Tekst tekenen met SVG in HTML5

Tekst kan in veel situaties nodig zijn in elke SVG, zoals het labelen van een grafiek, enz. Gelukkig bestaat er in SVG een tag die kan worden gebruikt. De tekst kan op elke positie in de SVG worden ingesteld en u kunt de kleur en andere details ook aanpassen.

Code:



Here is an example, it's very examply
Sorry but this browser does not support inline SVG.

Output:

Voorbeeld # 9 - Een ster tekenen met SVG in HTML5

Nu we klaar zijn met de basis, laten we een ster maken die wordt gemaakt met behulp van SVG.

Code:



style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.

style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.

Output:

Voorbeeld # 10 - Lineair verloop gebruiken in SVG

U kunt lineair en radiaal verloop gebruiken in SVG veel lijn HTML Canvas. Het verloop moet in de tag worden genest. Deze tag wordt vervolgens gemarkeerd in de SVG-tag om het gebruik aan te geven. Laten we een voorbeeld bekijken dat Verloop gebruikt in een eclips.

Code:







Sorry but this browser does not support inline SVG.

Output:

Conclusie

In het geval van sites waar diagrammen en grafieken moeten worden gebruikt, zijn SVG's een redder in nood. De meeste moderne webbrowsers ondersteunen ook SVG en zijn niet alleen schaalbaar. Een ander voordeel van het gebruik van SVG is de bestandsgrootte. Omdat het slechts een beetje code is, kunnen SVG's een zeer kleine voetafdruk hebben in het geheugen en de gebruikte bandbreedte in vergelijking met traditionele afbeeldingen.

Aanbevolen artikelen

Dit is een handleiding voor HTML SVG. Hier bespreken we de introductie en top 10 voorbeelden van HTML SVG met uitleg en code-implementatie. U kunt ook de volgende artikelen bekijken voor meer informatie -

  1. Html5 Nieuwe elementen
  2. SVG versus EPS
  3. HTML-blokken
  4. HTML-frames

Categorie:

Web ontwikkelingstools