HTML5: SVG grafika

1. oldal / 9

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.