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