HTML5: SVG grafika

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&oacute;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:

SVG példa

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&eacute;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! 

SVG ellipszis

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é:

SVG ellipszisek

É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:

SVG háromszög

A teljes kód pedig a következő (htmlpelda73.html):

<html>
<body>
<h1>SVG h&aacute;romsz&ouml;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!

SVG csillag

A forráskód pedig a következő: (htmlpelda74.html)

<html>
<body>
<h1>SVG &ouml;tsz&ouml;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ő:

SVG lépcső

És a teljes kódja a következő: (htmlpelda75.html)

<html>
<body>
<h1>SVG l&eacute;pcs&ouml;</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:

 SVG útvonalak

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):

SVG ferde útvonalak

És a forráskódja – nem lesz egyszerű: (htmlpelda77.html)

<html>
<body>
<h1>SVG &uacute;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!

SVG szöveg

Í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&ouml;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:

SVG stroke

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)

SVG stroke vonalak

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)

SVG stroke linecap

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)

SVG vonaltípusok

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:

SVG halványítás

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.

SVG árnyék 1.

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.

SVG árnyék 2.

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!

 SVG színátmenet

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:

SVG színátmenetek

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.

HTML körös színátmenet

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.