Čo je súbor SVG? Vysvetlenie obrázka a značiek SVG

SVG

SVG alebo škálovateľná vektorová grafika je webový štandard na definovanie vektorovej grafiky na webových stránkach. Norma SVG založená na XML poskytuje značky na popis ciest, tvarov a textu vo výreze. Značku je možné vložiť priamo do HTML na zobrazenie alebo uložiť do .svgsúboru a vložiť ako každý iný obrázok.

SVG môžete písať ručne, ale zložitejšiu grafiku je možné navrhnúť v editoroch vektorovej grafiky, ako je Illustrator alebo InkScape, a exportovať ju do súborov alebo kódu SVG.

Základy SVG

Vývojári začínajú grafiku SVG so značkou a menným priestorom XML takto:

Vzorka obsahuje aj versionatribút. versionAtribút je voliteľný, ale je doporučené pre complaince so špecifikáciami XML.

Táto vzorka nebude nič zobrazovať, iba vytvorila výrez. Môžete pridať heightaj widthatribúty nastaviť veľkosť zobrazenia na výrez to v podstate zavádza plátno pre vás prácu.

S vybraným výrezom môžete pridať základnú grafiku, text a prvky cesty.

   SVG Text is browser readable!        

V tomto kódovom okne môžete vidieť výstup a hrať sa s kódom.

V úvodnej svgznačke pridáme atribút width, aby sme nastavili šírku výrezu na 100% šírky kontajnera, môžete použiť percentá alebo šírky pixelov. Úvodná značka svg má tiež viewboxatribút, ktorý definuje okno, cez ktoré sú viditeľné prvky vášho svg, v tomto prípade sa rozsah zobrazenia pohybuje od (0,0) do (600 300). V priestore SVG začína os X nulou vľavo a zväčšuje sa doprava; os Y začína hore nulou a smerom dole sa zväčšuje.

Prvá nová značka je značka, ktorá definuje obdĺžnik v zobrazovacom poli SVG. V tomto prípade definujeme štvorec, ktorý je 10 jednotiek zhora a zľava a 100 jednotiek vysoký a široký. fillAtribút nastaví farbu výplne pre tvar.

Ďalej definujeme kruh alebo ovál so značkou. Vzorka definuje kruh so stredom (240,60) s polomerom 50 jednotiek. strokeA stroke-widthatribúty nastaviť farbu ťahu a veľkosť k úderu.

Môžete pridať text do grafiky pomocou textznačky. Ukážkový text je ukotvený od stredu textu k bodu na (450, 70) a má veľkosť písma 20 jednotiek. Príjemné na texte v SVG je, že sa bude zväčšovať so zvyškom vašej grafiky, ale stále je čitateľný prehliadačom a webovými robotmi.

Ak chcete použiť rovnaké atribúty alebo štýly CSS na viac prvkov SVG, môžete ich zoskupiť podľa značky. Atribúty priradené k značke, rovnako ako strokeatribút v príklade, sa použijú na všetky prvky v skupine. V tomto prípade tri prvky.

Prvok definuje vektorovú cestu do výrezu. Cesta je definovaná datribútom. V prvom príklade definícia znie „presunúť na absolútnu súradnicu (10, 170) a nakresliť čiaru k relatívnym súradniciam 590 v smere X a 0 v smere Y.

Na vytvorenie cesty možno použiť nasledujúce príkazy:

M = presun do L = čiara do H = vodorovná čiara do V = zvislá čiara do Z = blízka dráha C = (kubický Bézier) krivka do S = hladká krivka do Q = kvadratická Bézierova krivka do T = hladká kvadratická Bézierova krivka do A = oblúk

Prvok plátna

Plátnu je možné nakresliť na a

Kontext sa vytvára metódou getContext na serveri

Before canvas .

After canvas .

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

Po vytvorení kontextového objektu príklad nakreslí červený obdĺžnik so šírkou 100 pixelov a výškou 50 pixelov s ľavým horným rohom v súradniciach (10,10).

Kreslenie koláčového grafu

Premenná výsledkov obsahuje pole objektov, ktoré predstavujú odpovede prieskumu.

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 "} ];

Aby sme nakreslili koláčový graf, nakreslíme niekoľko koláčových rezov, každý vytvorený z oblúka a dvojice čiar do stredu tohto oblúka. Uhol, ktorý zaberá každý oblúk, môžeme vypočítať tak, že celý kruh (2 π) vydelíme celkovým počtom odpovedí a potom toto číslo (uhol na odpoveď) vynásobíme počtom ľudí, ktorí si vybrali danú voľbu.

   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 () ; }) ; 

Týmto sa nakreslí nasledujúci graf:

Podpora prehľadávača

Podpora prehľadávača pre SVG je k dispozícii vo všetkých moderných prehľadávačoch. Existujú niektoré problémy s škálovanie v IE 9 až IE 11 však môžu byť prekonané pri použití width, height, viewboxa CSS.

Redaktori

  • Vectr - webový a desktopový nástroj na vytváranie a úpravy grafiky SVG, zadarmo

Nástroje na vytvorenie SVG

Existuje niekoľko nástrojov na vytvorenie SVG vo forme programu na kreslenie.

  • Inkscape - je to open source nástroj pre najmodernejšie vektorové kreslenie so ľahko použiteľným grafickým rozhraním.
  • Adobe Illustrator - Adobe Illustrator je komerčný nástroj pre vektorové snímky.

Ďalšie nástroje nájdete v zozname nástrojov W3C, ktoré podporujú SVG

Prečo by ste mali používať SVG

Ako formát vektorového obrázka umožňuje zmeniť veľkosť obrázka bez straty kvality a obzvlášť nízkej hmotnosti. Ako formát XML vám umožňuje ťažiť z úplnej sily JavaScriptu a najmä CSS.

Viac informácií o SVG:

  • Prečo by ste mali používať obrázky SVG
  • Čo potrebujete vedieť na prácu s SVG vo VS kóde
  • Ako sprístupniť vaše ozdobné tlačidlo SVG