Tamás Ferenc: Weblapkészítés HTML alapokon – 13. rész
HTML5 3. rész: SVG grafika
27.1. fejezet: HTML5 SVG bevezetés
Az SVG egy másik jellegű grafikai elem, mint a Canvas. Alapvetően pár egyszerű elem használatát kell elsajátítani, utána már a részletekkel lehet foglalkozni. Maga az SVG Scalable Vector Graphics-ot jelent (azaz skálázható vektorgrafikát), ezért igen nagy előnye, hogy tetszőleges nagyítható, azaz nem pixelesedik. Ráadásul mindez HTML5-ben hozható létre! Lássunk egy egyszerű példát: (htmlpelda69.html)
<html>
<body>
<h1>SVG próba</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
És az eredménye:
Néhány SVG-re jellemző tulajdonság:
- Az SVG képek sima szöveg-bázisú kódszerkesztővel létrehozhatók és módosíthatók.
- Az SVG képek kereshető, indexelhetők, szkriptelhetők és tömöríthetők.
- Az SVG képek skálázhatóak.
- Az SVG képek kinyomtathatóak tetszőleges felbontással.
- Az SVG képek nagyíthatóak (és a kép bármely részlete közelíthető minőség-csökkenés nélkül).
- Az SVG egy tiszta XML-alapú nyílt szabvány.
- Az SVG képeket általában kódszerkesztővel készítik, de gyakori a képszerkesztők használata is pl.: Inkscape.
A fenti SVG-kód magyarázata:
- Az SVG kép mindig <svg> elemmel kezdődik.
- Az elem két paramétere a létrehozott kép magassága és szélessége.
- A <circle> elem kör rajzolására használható.
- Paraméterek: cx és cy a kör középpontja. Ha nincs megadva, akkor a középpont a (0,0) lesz.
- Az r paraméter a kör sugara.
- A stroke és a stroke-width a körvonal típusát szabályozzák.
- A fill paraméter a kör belsejének színnel való kitöltését adja meg.
- A </svg> elem zárja a rajzot.
27.2. fejezet: SVG téglalap
Az SVG számtalan geometriai alakzatot képes megjeleníteni, pl.: téglalap, kör, ellipszis, vonal, sokszög, útvonal. Ezek közül legegyszerűbb a téglalap. Az alábbi példa egy 400x100-as kék kitöltésű 3 képpont vastag fekete keretű téglalapot rajzol ki.
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Látható, hogy míg az előző kódban darabonként került szabályozásra az összes paraméter, addig itt egyszerre történt meg mindez.
A következő példában egy újabb téglalap következzen, de ezúttal kicsit játsszunk az átlátszósággal is! (htmlpelda70.html)
<html>
<body>
<h1>SVG 2. téglalap</h1>
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
</body>
</html>
A kód magyarázata:
- Az x a bal oldali kezdő koordinátát jelöli.
- Az y a felülről számolt kezdő koordinátát jelöli.
- A fill, stroke és stroke-width jelentése az előzőekben tárgyalásra került.
- A fill-opacity a kitöltőszín átlátszóságát jelöli. (Megengedett tartomány: 0 és 1 között.)
- Hasonlóan a stroke-opacity a keretszín átlátszóságát jelöli. (Megengedett tartomány: 0 és 1 között.)
- A két átlátszóságot egyesíthetjük egyetlen opacity paraméterben is, pl.: opacity:0.5.
A létrehozott téglalap sarkait le is kerekíthetjük. Például a következő esetben 25 széles körrel kerekítjük le a sarkakat:
<svg width="400" height="180">
<rect x="50" y="20" rx="25" ry="25" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
A fejezet leghitelesebb forrása: https://www.w3schools.com/graphics/svg_rect.asp
27.3. fejezet: Kör és ellipszis
A kör az egyik legegyszerűbb alakzat. Nézzük a következő kódot:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Magyarázat:
- Az <svg> elemben megadjuk a létrehozandó grafika szélességét és magasságát.
- A circle elemmel jelöljük a kört.
- A cx és a cy a kör középpontját jelöli, míg az r a sugarát.
- A stroke paraméterrel megadjuk a körvonal színét.
- A stroke-width elem szabályozza a körvonal vastagságát.
- A fill paraméterrel pedig a kör belsejének kitöltő színét adjuk meg.
Így már tetszőleges kört létre tudunk hozni!
Az ellipszis létrehozása kicsit bonyolultabb, mivel itt a rx és ry koordináták nem lesznek egyformák. Nézzük a következő rajzot!
Ennek forráskódja a következő: (htmlpelda71.html)
<html>
<body>
<h1>SVG ellipszis</h1>
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
</body>
</html>
A következő példában három ellipszist rakunk egymás fölé:
És a hozzá tartozó kódrészlet: (htmlpelda72.html)
<html>
<body>
<h1>SVG ellipszisek</h1>
<svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
</body>
</html>
A fejezet leghitelesebb forrása: https://www.w3schools.com/graphics/svg_ellipse.asp
27.4. fejezet: Egyenes, sokszög és törött vonal
A következő létrehozandó alakzat az egyszerű egyenes. A kódja igen egyszerű, mivel meg kell adni a kiinduló koordinátáit (x1,y1), illetve a végső koordinátáit (x2,y2). Persze itt sem tekinthetünk el a színtől és a vonalvastagságtól. Íme a kódrészlet:
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
Hasonló elven lehet sokszöget is készíteni. Az alábbi példában egy háromszöget adunk meg a csúcspontjának koordinátáival:
A teljes kód pedig a következő (htmlpelda73.html):
<html>
<body>
<h1>SVG háromszög</h1>
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
</body>
</html>
A legfontosabb a sokszög (polygon) csúcs-koordinátáinak megadása. Az első csúcs a (200,10); a második a (250,190); míg a harmadik a (160,210). Fontos, hogy míg a koordináta-párok közé kell vesszőt tenni, addig az egyes párok után nem szabad.
A következő példában adjunk meg egy ötágú csillagot!
A forráskód pedig a következő: (htmlpelda74.html)
<html>
<body>
<h1>SVG ötszög</h1>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
</body>
</html>
Ha szeretnénk kipróbálni a nem egységes kitöltést, akkor a nonzero paraméter érdemes lecserélni erre: evenodd.
Hasonló elven működik a törött vonal kirajzolása. Itt is meg kell adni a pontok koordinátáit, de a kódrészlet végrehajtásakor az utolsó képpontot nem köti össze a kiindulóval. Íme egy egyszerű lépcső:
És a teljes kódja a következő: (htmlpelda75.html)
<html>
<body>
<h1>SVG lépcsö</h1>
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>
</body>
</html>
A fejezet leghitelesebb forrásai: https://www.w3schools.com/graphics/svg_line.asp
https://www.w3schools.com/graphics/svg_polygon.asp és
https://www.w3schools.com/graphics/svg_polyline.asp.
27.5. fejezet: SVG útvonalak
Az eddigi koordináták helyett (vagy mellett) lehet relatív módon csak mozgási koordinátákkal is vezérelni a rajzokat. A következő parancsok vezérlik a rajzokat:
- M = moveto (mozgás valahová)
- L = lineto (vonal valahová)
- H = horizontal lineto (vízszintes vonal valahová)
- V = vertical lineto (függőleges vonal valahová)
- C = curveto (ív valahová)
- S = smooth curveto (sima görbe valahová)
- Q = quadratic Bézier curve (négyzetes Bézier-görbe)
- T = smooth quadratic Bézier curveto (sima négyzetes Bézier-görbe)
- A = elliptical Arc (elliptikus vonal)
- Z = closepath (útvonal zárása)
Ha a parancsokat kis betűvel írjuk, akkor relatív koordináták lesznek, ha marad a nagybetű, akkor a koordináták abszolúttá válnak.
Lássunk egy példát: Induljunk ki a (150,0) pontból, majd húzzunk vonalat a (75,200)-ba, majd a (225,200)-ba. (teljes kód: htmlpelda76.html)
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Ennek megvalósulása:
Most nézzünk egy összetett példát! Az alábbi alakzatot szeretnénk kirajzoltatni (tele ferde vonalakkal, illetve Bézier-görbékkel):
És a forráskódja – nem lesz egyszerű: (htmlpelda77.html)
<html>
<body>
<h1>SVG útvonal 2.</h1>
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- A megfelelő pontok megjelölése -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Pontok feliratozása -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
</body>
</html>
A fejezet leghitelesebb forrása: https://www.w3schools.com/graphics/svg_path.asp
27.6. fejezet: SVG szöveg
Ez a lehető legegyszerűbbnek indul, ha csak a sima szöveg beszúrására gondolunk! Vegyünk példának egy sima piros színű szöveget:
<svg height="30" width="200">
<text x="0" y="15" fill="red">Ez az SVG!</text>
</svg>
Ez semmi különös gondot nem jelent, hiszen már számtalanszor használtuk. Most viszont döntsük meg a szöveget!
Így már módosul a forráskód is a döntés megfelelő koordinátáival. (htmlpelda78.html)
<html>
<body>
<h1>SVG szöveg</h1>
<svg height="60" width="200">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">Ez az SVG!</text>
</svg>
</body>
</html>
A döntés (rotate) paraméterei közül az első a fokot jelenti, míg a másik kettő azt a pontot, amely körül forgatunk. Ne felejtsünk a két utóbbi közé vesszőt tenni!
A <text> elemet rendezhetjük alcsoportokba is és ezek külön-külön formázást is tartalmazhatnak. Csak egy rövid példa erre:
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Több sornyi szöveg:
<tspan x="10" y="45">1. sor.</tspan>
<tspan x="10" y="70">2.sor.</tspan>
</text>
</svg>
A szövegre rakhatunk aktív linket is, pl.:
<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="https://www.w3schools.com/graphics/" target="_blank">
<text x="0" y="15" fill="red">I love SVG!</text>
</a>
</svg>
Így már eléggé összetett lett a simának induló szöveg-formázás, ugye?!
A fejezet leghitelesebb forrása: https://www.w3schools.com/graphics/svg_text.asp
27.7. fejezet: SVG Stroke
Az SVG a vonalak széles körű tulajdonságait kínálja. Ez a fejezet a következő tulajdonságokat mutatja be:
- stroke
- stroke-width
- stroke-linecap
- stroke-dasharray
A legegyszerűbb tulajdonság a sima stroke. Nézzünk erre egy három vonalas példát:
Ennek forráskódja a következő: (htmlpelda79.html)
<html>
<body>
<svg height="80" width="300">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
A vonalak vastagságát a stroke-width tulajdonsággal befolyásolhatjuk. Most módosítsuk a fenti három színes vonalat három vastagodó, de fekete vonallá! (htmlpelda80.html)
Ennek a forráskódja a következő:
<html>
<body>
<svg height="80" width="300">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
Ha most a vonalak végét szeretnénk lekerekíteni, akkor a stroke-linecap tulajdonságot kell használni! (htmlpelda81.html)
Forráskód:
<html>
<body>
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
Végül szabályozhatjuk a vonalak típusát is. Erre a stroke-dasharray tulajdonság szükséges. (htmlpelda82.html)
Végül ennek a forráskódja:
<html>
<body>
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
A fejezet leghitelesebb forrása: https://www.w3schools.com/graphics/svg_stroking.asp
27.8. fejezet: SVG effektusok
Az SVG grafikában számtalan lehetőség van, többek között rengeteg effektus. Ezek között egyik a halványítás (blur effects). Erre egy egyszerű példa a következő téglalap:
A forráskódja sajnos ismételten elég bonyolult: (htmlpelda83.html)
<html>
<body>
<svg height="110" width="220">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="180" height="90" stroke="green" stroke-width="3"
fill="red" filter="url(#f1)" />
</svg>
</body>
</html>
A <filter> elem id attribútuma egyedi nevet definiál a szűrő számára. A lényeget a <feGaussianBlur> tartalmazza, ami a halványító effektet határozza meg. Az in=”SourceGraphics” rész szabályozza, hogy az effekt az egész elemre hatásos. Az stdDeviation attribútum a halványítás összegét adja meg. A <filter> elem attribútuma pedig linket kapcsol az „f1” nevű részhez.
Sok elemhez lehet árnyékot is kapcsolni. Az első példában egy sárga négyzet vet önmagával megegyező árnyékot.
A forráskódban (htmlpelda84.html) a szokásos szabályozók után a <filter> elemben adunk egyedi azonosítót az effektusnak, majd az <feOffset>-ben adjuk meg az árnyék pontos irányát (dx és dy); végül az <feBlend>-del adjuk meg az alapvető mintát, ami most offOut. Ezek a beállítások működnek, de azért érdemes kicsi változtatásokkal próbálkozni!
<html>
<body>
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
</body>
</html>
A következő példában az árnyék kicsit elmosódottabb és nincs is határozott széle.
A forráskódban (htmlpelda85.html) vannak újdonságok is. A dolog lényegét az újdonságként megjelenő <feGaussianBlur> tartalmazza, ami éppen a keret nélküli árnyékot adja meg.
<html>
<body>
<svg height="140" width="140">
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f2)" />
</svg>
</body>
</html>
A fejezet leghitelesebb forrásai: https://www.w3schools.com/graphics/svg_filters_intro.asp. Átmenetek: https://www.w3schools.com/graphics/svg_fegaussianblur.asp
Árnyékok: https://www.w3schools.com/graphics/svg_feoffset.asp
27.9. fejezet: SVG színátmenetek
További lehetőséget tartalmaznak a színátmenetek. Elsőként nézzünk példát a vonalas átmenetre egy ellipszisen belül!
A forráskódban (htmlpelda86.html) a lényeget a <linearGradient> elem tartalmazza, amely megadja az egyedi azonosítót (grad1), valamint az első (x1,y1) és az utolsó (x2,y2) koordinátát. A két határértéket a <stop offset> paraméterei adják meg, így a színt és az átlátszóság mértékét. A konkrét ellipszis-rajzolást a megszokott <ellipse> elem hajtja végre a középponttal (cx,cy), a sugárral (rx,ry) és a kitöltési effektussal: fill="url(#grad1)". A teljes forráskód pedig a következő:
<html>
<body>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>
Érdemes kipróbálni a függőleges átmenetet is! A lényeg:
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
További lehetőség a többszörös színátmenet alkalmazása. Íme az ábra:
Valamint a teljes forráskód: (htmlpelda87.html). Érdemes próbálkozni!
<html>
<body>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="50%" y2="0%" x3="100%" y3="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="75%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>
Az eddig látott többszínű egyenes átmenet helyett alkalmazhatunk körös átmenetet is.
A forráskódban (htmlpelda88.html) az körös ármenetet a <radialGradient> szabályozza a megszokottak szerint
<html>
<body>
<svg height="150" width="500">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>
Érdemes kipróbálni a nem középpontos átmenetet is, például:
<radialGradient id="grad2" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
A fejezet leghitelesebb forrásai: https://www.w3schools.com/graphics/svg_grad_linear.asp és https://www.w3schools.com/graphics/svg_grad_radial.asp.
Az SVG-ről szóló cikk ezzel véget ért. Érdemes az egyes elemek paramétereit (némi angol tudással) átnézni itt: https://www.w3schools.com/graphics/svg_reference.asp
© TFeri.hu, 2018.