Bevezetés a HTML SVG-be
A képek HTML-ben való használata fantasztikus a multimédia-gazdag webhelyeknél. Csak annyit kell tennie, hogy hozzáad egy címkét a HTML-kódhoz és az brácsa, a böngésző megjeleníti, és még egy linket is hozzáad a választott képhez. Kicsit aggodalomra ad okot olyan helyzetekben, amikor tudod, hogy a képet vagy az ábrát nagyítják, mert a JPG.webp vagy a PNG nem jelenít meg további részleteket, miután nagyították a felbontást. Az SVG a megoldás erre a problémára. Az SVG a Scalable Vector Graphics kifejezést jelenti. Ahogy a neve is sugallja, ezeket csak annyiban lehet nagyítani, és a részletek soha nem tűnnek el. Az SVG-k nem kizárólag a webtechnológiát érintik, de a HTML-ben való felhasználásuk nagyon ügyes.
Az SVG hasznos diagramok, vektorok, diagramok és grafikonok számára a böngészőben. Itt megtudhatja, hogyan lehet ezeket részletesen felhasználni.
Az SVG HTML-beágyazásának szintaxisa
A vászon HTML5-ben történő használatához hasonlóan van egy egyszerű címke, amelyet SVG-nek a HTML5-oldalakba ágyazására használhat. A szintaxis a következő:
…. …. …. ….
Példák az SVG-kre HTML-ben
Most vessünk egy pillantást néhány példa vektorra, amelyet létrehozhatunk és beágyazhatunk a HTML5-be:
1. példa - Téglalap rajzolása SVG-n keresztül HTML-ben
Kód:
Sorry but this browser does not support inline SVG.
Kimenet:
2. példa - Lekerekített sarkokkal ellátott négyzet rajzolása SVG-ben
Lekerekített sarkokkal ellátott négyzet esetében a sarkok sugarat az rx, ry használatával kell meghatározni, a négyzet méretétől és méreteitől eltekintve.
Kód:
Sorry but this browser does not support inline SVG.
Kimenet:
3. példa - Kör rajzolása SVG-ben, rajta körvonalakkal és színű irattel
Kód:
Sorry but this browser does not support inline SVG.
Kimenet:
4. példa - Egyenes vonal rajzolása SVG-vel a HTML5-ben
A címkével egyenes vonal rajzolható a HTML5 SVG-kben, meghatározható a szín, a vonal vastagsága és annak helyzete is.
Kód:
Kimenet:
5. példa - A napfogyatkozás rajzolása SVG-n keresztül a HTML5-ben
A címke segítségével eclipse-t rajzolhatunk a HTML5 SVG-kben, ennek színét és helyzetét meg lehet határozni a halál és a sugara mentén is.
Kód:
Sorry but this browser does not support inline SVG.
Kimenet:
6. példa - Sokszög létrehozása SVG-vel a HTML5-ben
A címke használható SVG-kben sokszögek létrehozásához. A címkében fel kell tüntetnünk az egyes pontok helyzetét. A kitöltő színek, a körvonal vastagsága stb. A kódban is meghatározható.
Kód:
Sorry but this browser does not support inline SVG.
Kimenet:
7. példa - Vonallánc létrehozása SVG-vel a HTML5-ben
A vonallánc olyan alakzat rajzolására szolgál, amely csak egyenes vonalból áll. Ne feledje, hogy ezeket a vezetékeket is csatlakoztatni kell. Íme egy példa a vonallánc végrehajtására a HTML5-ben.
Kód:
Sorry but this browser does not support inline SVG.
Kimenet:
8. példa - Szöveg rajzolása SVG-vel a HTML5-ben
Szövegre sok esetben szükség lehet bármilyen SVG-re, például egy diagram címkézésére stb. Szerencsére az SVG-ben létezik címke, amely használható. A szöveg az SVG bármely pozíciójába beállítható, és testreszabhatja a színét és más részleteit is.
Kód:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Kimenet:
9. példa - Csillag rajzolása SVG-vel a HTML5-ben
Most, hogy elvégeztük az alapokat, hozzunk létre egy csillagot, amelyet SVG segítségével készítünk.
Kód:
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.
Kimenet:
10. példa - Lineáris színátmenet használata SVG-ben
Használhat lineáris és radiális gradienst az SVG sok vonalas HTML vászonban. A gradienst be kell fészkelni a címkébe. Ezt a címkét ezután megjelölik az SVG-címkében annak használatának jelölésére. Vessen egy pillantást egy példára, amely a színátmenetet használja egy eclipse-ben.
Kód:
Sorry but this browser does not support inline SVG.
Kimenet:
Következtetés
Azon helyek esetében, ahol diagramokat és táblázatokat kell használni, az SVG életmentő. A legtöbb modern böngésző támogatja az SVG-t is, kivéve a skálázhatóságot. Az SVG használatának további előnye a fájl mérete. Mivel ez csak egy kis kód, az SVG-knek nagyon alacsony lábnyomuk lehet a memóriában és a sávszélességben, összehasonlítva a hagyományos képekkel.
Ajánlott cikkek
Ez egy útmutató a HTML SVG-hez. Itt tárgyaljuk a HTML SVG bevezetését és a 10 legfontosabb példát magyarázattal és a kód megvalósításával. A következő cikkeket is megnézheti további információkért -
- Html5 új elemek
- SVG vs EPS
- HTML blokkok
- HTML keretek