Mi az SVG fájl? SVG kép és címkék magyarázata

SVG

Az SVG vagy Scalable Vector Graphics egy webes szabvány a webalapú vektor-alapú grafika meghatározásához. XML alapján az SVG szabvány jelölést biztosít az utak, alakzatok és szöveg leírására a nézetablakban. A jelölés beágyazható közvetlenül a HTML-be a megjelenítéshez, vagy fájlba menthető .svgés beilleszthető, mint bármely más kép.

Írhat SVG-t kézzel, de bonyolultabb grafikákat lehet tervezni olyan vektorgrafikus szerkesztőkben, mint az Illustrator vagy az InkScape, és exportálni SVG fájlokba vagy kódokba.

SVG Basics

A fejlesztők egy SVG grafikát indítanak a címkével és az XML névtérrel, így:

A minta tartalmaz egy versionattribútumot is. Az versionattribútum nem kötelező, de ajánlott az XML specifikációkkal történő panaszkodásra.

Ez a minta nem jelenít meg semmit, csupán egy nézetablakot hozott létre. Hozzáadhat attribútumokat heightés widthattribútumokat a nézetablak megjelenítési méretének beállításához, ez lényegében létrehoz egy vásznat, amelyben dolgozhat.

Ha a nézetablak a helyén van, hozzáadhat alapgrafikákat, szövegeket és útvonalelemeket.

   SVG Text is browser readable!        

Láthatja a kimenetet és játszhat a kóddal ebben a kódtollban.

A nyitó svgcímkében hozzáadunk egy width attribútumot, hogy a nézetablak szélességét a tároló szélességének 100% -ára állítsuk be. Használhat százalékokat vagy pixelszélességeket is. A nyitó svg címkének van viewboxattribútuma is, amely meghatározza azt az ablakot, amelyen keresztül az svg elemei láthatók, ebben az esetben a nézetablak (0,0) és (600,300) közé esik. Az SVG térben az X tengely nullával kezdődik bal oldalon, és jobbra növekszik; az Y tengely felülről nullával kezdődik, és alul növekszik.

Az első új címke az a címke, amely egy téglalapot határoz meg az SVG nézetablakban. Ebben az esetben megadunk egy négyzetet, amely 10 egységre van felülről és balról, és 100 egység magas és széles. Az fillattribútum beállítja az alak kitöltési színét.

Ezután meghatározunk egy kört vagy ovált a címkével. A minta meghatároz egy kört, amelynek középpontja (240,60) és 50 egység sugarú. A strokeés az stroke-widthattribútumok meghatározzák a körvonal színét és méretét.

A textcímkével szöveget adhat a grafikához. A mintaszöveg a szöveg közepétől a (450, 70) pontig horgonyozódik, betűmérete 20 egység. Az SVG szövegében az a szép, hogy a többi grafikával skálázni fog, de a böngésző és az internetes botok továbbra is olvashatóak.

Ha ugyanazokat az attribútumokat vagy CSS stílusokat szeretné alkalmazni több SVG elemre, csoportosíthatja őket a címkével. A címkéhez strokerendelt attribútumok, például a példában szereplő attribútum, a csoport minden elemére vonatkoznak. Ebben az esetben három elem.

Az elem egy vektor útvonalat határoz meg a nézetablakban. Az útvonalat az dattribútum határozza meg . Az első példában a definíció szerint az abszolút koordinátára (10, 170) való elmozdulást olvashatjuk, és húzzunk egy vonalat az 590 X irányú és 0 az Y irányú relatív koordinátákra.

A következő parancsok használhatók az útvonal létrehozására:

M = lépés L = egyenes H = vízszintes vonal V = függőleges vonal Z = bezárás C = (köbös bezier) görbe S = sima görbe Q = másodfokú bezier görbe T = sima másodfokú bezier görbe A = ív

A vászon elem

Vászon grafika rajzolható a

A kontextus a getContext metódussal jön létre a

Before canvas .

After canvas .

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

A kontextusobjektum létrehozása után a példa 100 pixel széles és 50 pixel magas piros téglalapot rajzol, amelynek bal felső sarka a koordinátáknál van (10,10).

Kördiagram rajzolása

Az eredmény változó olyan objektumok tömbjét tartalmazza, amelyek a felmérés válaszait képviselik.

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

Kördiagram megrajzolásához számos körszeletet rajzolunk, amelyek mindegyike egy ívből és egy pár vonalból áll az ív közepéig. Kiszámíthatjuk az egyes ívek által elfoglalt szöget úgy, hogy egy teljes kört (2 π) elosztunk a válaszok teljes számával, majd ezt a számot (válaszonkénti szöget) megszorozzuk az adott választást választók számával.

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

Ez a következő diagramot rajzolja fel:

Böngésző támogatás

Az SVG böngészőtámogatása minden modern böngészőben elérhető. Vannak kérdések skálázódása IE 9 IE segítségével 11 azonban akkor lehet legyőzni a használata a width, height, viewboxés CSS.

Szerkesztők

  • Vectr - webes és asztali eszköz ingyenes SVG grafikák készítéséhez és szerkesztéséhez

Eszközök az SVG létrehozásához

Kevés eszköz áll rendelkezésre az SVG létrehozására rajzprogram formájában.

  • Inkscape - Ez egy nyílt forráskódú eszköz a korszerű vektoros rajzokhoz, könnyen használható grafikus felülettel.
  • Adobe Illustrator - Az Adobe Illustrator egy kereskedelmi eszköz a Vector Imagery számára.

További eszközökért tekintse meg az SVG-t támogató W3C eszközök listáját

Miért érdemes használni az SVG-ket?

Vektoros képformátumként lehetővé teszi a kép átméretezését minőségromlás és különösen könnyű súly nélkül. XML formátumként lehetővé teszi a JavaScript és különösen a CSS teljes erejének kihasználását.

További információ az SVG-kről:

  • Miért érdemes SVG képeket használni?
  • Mit kell tudni az SVG használatáról a VS Code-ban
  • Hogyan teheti hozzáférhetővé a képzeletbeli SVG gombot