A HTML5 inline SVG használata

A következőkben a HTML5 SVG (Scalable Vector Graphics) használatát mutatom be nektek. Segítségével pluginok nélkül tudunk mindenféle 2D grafikákat és egyéb alakzatokat készíteni. Kérdezhetnétek, hogy miért is érdemes az SVG-vel foglalkozni, hiszen ott a Canvas, ami minden igényt kielégít. Nos, ez csak részben van így, hiszen a canvas segítségével előre meghatározott felbontással működő grafikákat készíthetünk, amit pixelenként renderel. Míg az SVG egy XML alapú leírónyelv, amelynek a segítségével álló és mozgó képeket egyaránt készíthetünk, felbontástól függetlenül. Ráadásul a “text” alapú támogatása sem elhanyagolható. Ha egy grafikust kérdezünk meg arról, hogy melyiket választaná, valószínűleg a Canvas mellett döntene, de azt gondolom azért az SVG is megér egy misét főként, hogy már mobilokon is szépen működik. Szeretném előre jelezni, hogy mivel ez a téma maga akkora, mint a teljes HTML5 így én csak szemelvényeket tudok itt kiemelni belőle.

HTML5-ön belül a következőképpen tudjuk definiálni:

<!DOCTYPE html>
 <html>
 <body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
 </svg>
 </body>
 </html>

Egy egyszerű példa:

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
<text style="font-size:60; stroke: blue" x="50"  y="170"> Hello World </text>
</svg>
</body>
</html>

Itt megtekintheted.

A < path > element definiciója:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath



Most nézzünk meg pár alakzatot és a definiálásukat:


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg id="svg-area" width="838" height="140" viewBox="0 0 2000 380">
<rect x="80" y="20" rx="30" width="100" height="300" fill="#F1EBD7" stroke="red" stroke-width="3" />
<rect x="0" y="300" width="300" height="70" fill="none" stroke="#4B0182" stroke-width="3" transform="rotate(-10)" />
<path d="M 350,350 l 50,-20
a 30,30 -30 0,1 60,-25 l 50,-25
a 30,50 -30 0,1 60,-25 l 50,-25
a 30,75 -30 0,1 60,-25 l 50,-25
a 30,100 -30 0,1 60,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
</svg>
</body>
</html>

Itt megtekintheted.

Most nézzünk egy mozgó objektumra (esetünkben egy körre) példát:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG circle</title>
</head>

<body>
<h1>HTML5 SVG Circle</h1>
<svg id="circle" height="200" width="600" xmlns="http://www.w3.org/2000/svg">
<circle id="bluecircle" cx="40" cy="40" r="40" fill="blue">
<animate attributeName="cx" attributeType="XML"
begin="0s" dur="6s" from="10" to="500" fill="freeze"/>
</circle>
</svg>
</body>

</html>

A példát itt meg tudod nézni.

A kedvcsináló után a későbbiekben még egy komolyabb példát is megnézünk.

Forrás:

http://dev.w3.org/SVG/proposals/svg-html/svg-html-proposal.html

Creative Commons Licenc
A HTML5 inline SVG használata   a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.