Introduktion till HTML SVG
Att använda bilder i HTML är fantastisk för multimedia-rika webbplatser. Allt du behöver göra är att lägga till en tagg till HTML-koden och viola, din webbläsare kommer att visa och till och med lägga till en länk till den bild du väljer. Det blir lite oroande i situationer där du vet att bilden eller diagrammet kommer att zooma in eftersom en JPG.webp eller PNG inte kommer att visa någon ytterligare detalj när den zoomats in förbi sin upplösning. SVG är lösningen på detta problem. SVG står för skalbar vektorgrafik. Som namnet antyder kan dessa zoomas in så mycket som behövs och detaljerna försvinner aldrig. SVG: er är inte exklusiva för webbteknologi men att kunna använda dem i HTML är verkligen snyggt.
SVG är användbart för diagram, vektorer, diagram och diagram i webbläsaren. Låt oss lära dig hur du kan använda dem i detalj här.
Syntax för inbäddning av SVG i HTML
Similor till att använda duk i HTML5, det finns en enkel tagg som du kan använda för att bädda in SVG på HTML5-sidor. Syntaxen följer:
…. …. …. ….
Exempel på SVG: er i HTML
Låt oss nu titta på några exempelvektorer som kan skapas och inbäddas i HTML5:
Exempel 1 - Rita en rektangel via SVG i HTML
Koda:
Sorry but this browser does not support inline SVG.
Produktion:
Exempel 2 - Rita en fyrkant med rundade hörn i SVG
För en kvadrat med rundade hörn måste vi definiera hörns radie med hjälp av rx, bortsett från storleken och dimensionerna på torget.
Koda:
Sorry but this browser does not support inline SVG.
Produktion:
Exempel 3 - Rita en cirkel i SVG med konturer och färgarkivering inuti den
Koda:
Sorry but this browser does not support inline SVG.
Produktion:
Exempel 4 - Rita en rak linje med SVG i HTML5
Vi kan använda taggen för att rita en rak linje i HTML5 SVG: er, färg, tjocklek på linjen och position för den kan också definieras.
Koda:
Produktion:
Exempel 5 - Rita en förmörkelse via SVG i HTML5
Vi kan använda taggen för att rita en förmörkelse i HTML5 SVG: er, färgen och positionen på den kan också definieras tillsammans med dess radie.
Koda:
Sorry but this browser does not support inline SVG.
Produktion:
Exempel 6 - Skapa en polygon med SVG i HTML5
Taggen kan användas i SVG: er för att skapa polygoner. I taggen måste vi nämna positionerna för varje punkt. Påfyllning av färger, konturtjocklek etc. kan också definieras i koden.
Koda:
Sorry but this browser does not support inline SVG.
Produktion:
Exempel 7 - Skapa en polyline med SVG i HTML5
Polyline används för att rita en form som endast består av en rak linje. Tänk på att dessa linjer måste vara anslutna också. Här är ett exempel på en polylineimplementering i HTML5.
Koda:
Sorry but this browser does not support inline SVG.
Produktion:
Exempel 8 - Rita text med SVG i HTML5
Text kan vara nödvändigt i alla SVG i många situationer, såsom märkning av ett diagram, etc. Lyckligtvis finns det en tagg i SVG som kan användas. Texten kan ställas in på vilken plats som helst i SVG och du kan också anpassa dess färg och andra detaljer.
Koda:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Produktion:
Exempel 9 - Rita en stjärna med SVG i HTML5
Nu när vi är klara med grunderna, låt oss skapa en stjärna som kommer att göras med hjälp av SVG.
Koda:
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.
Produktion:
Exempel 10 - Använd linjär gradient i SVG
Du kan använda linjär och radiell gradient i SVG mycket linje HTML Canvas. Lutningen måste kapslas i taggen. Den här taggen markeras sedan i SVG-taggen för att beteckna dess användning. Låt oss ta en titt på ett exempel som använder Gradient i en förmörkelse.
Koda:
Sorry but this browser does not support inline SVG.
Produktion:
Slutsats
När det gäller platser där diagram och diagram ska användas är SVG: er en livräddare. De flesta moderna webbläsare stöder SVG också och bortsett från att vara skalbara. En annan fördel med att använda SVG är dess filstorlek. Eftersom det bara är lite kod kan SVG: er ha ett mycket litet fotavtryck i minnet och bandbredden förbrukat jämfört med traditionella bilder.
Rekommenderade artiklar
Detta är en guide till HTML SVG. Här diskuterar vi introduktionen och topp 10 exempel på HTML SVG med förklaring och implementering av kod. Du kan också titta på följande artiklar för att lära dig mer -
- Html5 Nya element
- SVG vs EPS
- HTML-block
- HTML-ramar