Hvad er en SVG-fil? SVG-billede og tags forklaret

SVG

SVG eller skalerbar vektorgrafik er en webstandard til definition af vektorbaseret grafik på websider. Baseret på XML giver SVG-standarden markering for at beskrive stier, figurer og tekst i en visningsport. Markeringen kan integreres direkte i HTML til visning eller gemmes i en .svgfil og indsættes som ethvert andet billede.

Du kan skrive SVG manuelt, men mere kompliceret grafik kan designes i vektorgrafikeditorer som Illustrator eller InkScape og eksporteres til SVG-filer eller kode.

SVG Basics

Udviklere starter en SVG-grafik med tagget og XML-navneområdet sådan:

Prøven inkluderer også en versionattribut. Den versionattribut er valgfrit, men det anbefales til complaince med XML specifikationer.

Denne prøve viser ikke noget, den oprettede blot en visningsport. Du kan tilføje heightog widthattributter for at indstille en visningsstørrelse for visningsporten, hvilket i det væsentlige opretter et lærred, som du kan arbejde i.

Med en visning på plads kan du tilføje grundlæggende grafik, tekst og stielementer.

   SVG Text is browser readable!

Du kan se output og lege med koden i dette codepen.

I åbningskoden svgtilføjer vi en breddeattribut for at indstille visningsportens bredde til 100% af containerbredden, du kan bruge procenter eller pixelbredder. Det åbne svg-tag har også viewboxattribut, der definerer et vindue, gennem hvilket elementer i din svg er synlige, i dette tilfælde spænder visningsfeltet fra (0,0) til (600,300). I SVG-rummet begynder X-aksen med nul til venstre og stiger til højre; Y-aksen starter med nul øverst og stiger mod bunden.

Det første nye tag er det tag, der definerer et rektangel i SVG-visningsporten. I dette tilfælde definerer vi en firkant, der er 10 enheder fra top og venstre og 100 enheder høj og bred. Den fillattribut sætter fyldfarve for formen.

Dernæst definerer vi en cirkel eller oval med mærket. Prøven definerer en cirkel centreret ved (240,60) med en radius på 50 enheder. Den strokeog stroke-widthattributter sat en streg farve og en størrelse for slagtilfælde.

Du kan tilføje tekst til grafikken med texttagget. Eksempelteksten er forankret fra midten af teksten til et punkt på (450, 70) og har en skriftstørrelse på 20 enheder. Det pæne ved tekst i SVG er, at den skaleres med resten af din grafik, men den kan stadig læses af browseren og web-bots.

Når du vil anvende de samme attributter eller CSS-stilarter på flere SVG-elementer, kan du gruppere dem med tagget. Attributter, der er tildelt tagget, som strokeattributten i eksemplet, vil blive anvendt på alle elementer i gruppen. I dette tilfælde tre elementer.

Det element definerer en vektor sti i viewporten. Stien er defineret af dattributten. I det første eksempel lyder definitionen 'flyt til den absolutte koordinat (10, 170) og træk en linje til de relative koordinater 590 i X-retning og 0 i Y-retning.

Følgende kommandoer kan bruges til at oprette din sti:

M = flyt til L = linje til H = vandret linje til V = lodret linje til Z = tæt sti C = (kubisk bezier) kurve til S = glat kurve til Q = kvadratisk bezier kurve til T = glat kvadratisk bezier kurve til A = bue

Lærredselementet

Lærredgrafik kan tegnes på en

En kontekst oprettes ved hjælp af getContext-metoden på

 Before canvas . 
 After canvas . 
  var canvas = document . querySelector (" canvas ") ; var context = canvas . getContext ("2 d ") ; context . fillStyle = " red "; context . fillRect (10 , 10 , 100 , 50) ;

Efter oprettelse af kontekstobjektet tegner eksemplet et rødt rektangel med 100 pixels bred og 50 pixels høj med sit øverste venstre hjørne ved koordinater (10,10).

Tegning af et cirkeldiagram

Resultatvariablen indeholder en række objekter, der repræsenterer undersøgelsens svar.

var results = [ { name : " Satisfied " , count : 1043 , color : " lightblue "} , { name : " Neutral " , count : 563 , color : " lightgreen "} , { name : " Unsatisfied " , count : 510 , color : " pink "} , { name : " No comment " , count : 175 , color : " silver "} ];

For at tegne et cirkeldiagram tegner vi et antal cirkelskiver, der hver består af en bue og et par linjer til midten af denne bue. Vi kan beregne den vinkel, der optages af hver bue, ved at dividere en fuld cirkel (2 π) med det samlede antal svar og derefter multiplicere det tal (vinklen pr. Svar) med antallet af mennesker, der valgte et givet valg.

   var cx = document . querySelector (" canvas ") . getContext ("2 d ") ; var total = results . reduce ( function ( sum , choice ) { return sum + choice . count ; } , 0) ; // Start at the top var currentAngle = -0.5 * Math . PI ; results . forEach ( function ( result ) { var sliceAngle = ( result . count / total ) * 2 * Math . PI ; cx . beginPath () ; // center =100 ,100 , radius =100 // from current angle , clockwise by slice ' s angle cx . arc (100 , 100 , 100 , currentAngle , currentAngle + sliceAngle ); currentAngle += sliceAngle ; cx . lineTo (100 , 100) ; cx . fillStyle = result . color ; cx . fill () ; }) ;

Dette tegner følgende diagram:

Browsersupport

Browsersupport til SVG er tilgængelig i alle moderne browsere. Der er nogle problemer med skalering i IE 9 til IE 11 men de kan overvindes med brug af den width, height, viewbox, og CSS.

Redaktører

Vectr - web- og desktopværktøj til oprettelse og redigering af SVG-grafik gratis

Værktøjer til at oprette SVG

Der er få værktøjer til rådighed til at oprette SVG i form af tegneprogram.

Inkscape - Det er et open source-værktøj til avanceret vektortegning med en brugervenlig grafisk grænseflade.
Adobe Illustrator - Adobe Illustrator er et kommercielt værktøj til Vector Imagery.

For flere værktøjer henvises til W3C-listen over værktøjer, der understøtter SVG

Hvorfor skal du bruge SVG'er

Som et vektorbillede format giver det dig mulighed for at ændre størrelsen på et billede uden tab af kvalitet og en særlig let vægt. Som et XML-format giver det dig mulighed for at drage fordel af JavaScript og især CSS.

Mere info om SVG'er:

Hvorfor skal du bruge SVG-billeder
Hvad du har brug for at vide for at arbejde med SVG i VS-kode
Sådan gør du din smarte SVG-knap tilgængelig

SVG