Kezdőlap > Kategorizálatlan > Scalable Vector Graphics – SVG

Scalable Vector Graphics – SVG

2011. május 5. csütörtök Hozzászólás Go to comments

Az SVG (Scalable Vector Graphics) talán az egyik legjobban várt újdonság, amit beletettek az Internet Explorer 9-es változatába. Az SVG segítségével egyszerűen és hatékonyan tudunk összetett grafikákat készíteni, anélkül, hogy extra pluginra vagy nézegetőre lenne szükségünk. Az SVG egy XML alapú leíró nyelv, amellyel kétdimenziós, statikus és mozgó vektorgrafikákat tudunk készíteni. Alapvetően 3 féle grafikus elemet támogat: vektorgrafikát, raszter grafikus képeket, szövegeket. Az SVG-t csak úgy mint a HTML-t szintén aW3C felügyeli.

Az Internet Explorer 9 az SVG 1.1 (Second Edition) ajánlásait valósítja meg.

Egyszerű alakzatok

Természetesen itt is egyszerű alakzatokkal kezdünk, és haladunk az összetettebb felé. Készítsünk egy új XML fájlt (Igen, itt XML fájlokkal fogunk dolgozni!)

Az XML fájl fejléce legyen az alábbi kód részlet:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;


Közvetlen ez alá tegyünk egy svg nyitó és záró elemet:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;

 

</svg>


Az SVG element közé fogjuk definiálni, hogy amit meg szeretnénk megjeleníteni. Az SVG rendszerben elég egyszerű rajzolni. Akik korábban már találkoztak WPF-el vagy Silverlighttal azoknak SVG-ben történő rajzolás nem fog különösebb gondot okozni.

Téglalap

A feladatot itt is kezdjük egy egyszerű téglalappal.

<rect fill="orange"

    stroke="black"

    width="150"

    height="75"

    x="50"

    y="25" />

A rect elemmel jelmezük, hogy téglalapot szeretnénk rajzolni, fill tulajdonságnál meghatározzuk, hogy narancssárga színnel szeretnénk kitölteni. A magasság és szélesség értelemszerű, és persze van egy X és Y koordináta is, amivel meghatározzuk, meg hogy hova szeretnénk rajzolni a felületen.

Az eredmény a következő lesz:

image

Egy picit tovább gondolva az előző feladatott, csináljunk olyan téglalapot, aminek lekerekített oldala van. Ez se jelent különösebb problémát mindösszesen két további paramétert kell megadnunk.

<rect fill="orange"

    stroke="black"

    width="150"

    height="100"

    x="50"

    y="25"

    rx="10"

    ry="50"/>

Így az eredmény a következő lesz:

image

Kör

Téglalapot egyszerű volt rajzolni. Kört vajon mennyivel nehezebb? Semmivel!

<circle fill="orange"

    stroke="black"

    stroke-width="3"

    cx="40"

    cy="25"

    r="20"/>

A már ismert tulajdonságokon túl itt a kör középpontját (cx, cy) kell megadni illetve a kör sugarát (r). Itt még megadtuk, hogy a keret milyen színű és vastagságú legyen.

Az eredmény:

image

Ha kör egyszerű volt, akkor az ellipszis se lehet bonyolult.

<ellipse stroke="Green"

    cx="100"

    cy="60"

    rx="75"

    ry="50"/>

A középpontok kívül az rx és az ry tulajdonságokkal az ovális alakját határozhatjuk meg. Az eredmény pedig egy fekete ellipszis vékony zöld szegéllyel.

image

Vonalak

Vonalakat is nagyon egyszerűen tudunk készíteni SVG-ben. Rögtön készítsünk hármat.

<!—Vertikális –>

<line x1="0.7cm"

    y1="1cm"

    x2="0.7cm"

    y2="2.0cm"

    style="stroke:

    blue;"/>

 

<!– Átlós –>

<line x1="30"

    y1="30"

    x2="150"

    y2="85"

    stroke="red"

    stroke-width="4"/>

 

<!– Horizontális –>

<line x1="50pt"

    y1="25pt"

    x2="150pt"

    y2="25pt"

    stroke="yellow"

    stroke-width="3"/>  

Mind a három vonalat különböző mértékegységben adtuk meg, ez is jól mutatja az SVG rugalmasságát. A legfontosabb tulajdonságok az x1, y1 (honnan) és az x2, y2 (hova) tulajdonságok.

image

Polylines


Folytassuk a sort összetettebb formákkal. A polyline-nal egy nyílt alakzatot rajzolhatunk. A rajzolása egyszerűen x,y pontok megadásával történik. A többi attribútuma a már megismer fill és stroke tulajdonságok.

<polyline points="15, 5, 100 8,3 150"

    fill="green"

    stroke="black"

    stroke-width="4"/>

Az eredmény pedig a következő lesz

image

Polygon

A polygon annyiban különbözik az polylinetól, hogy ő zárt alakzatot hoz létre. Azaz az utolsó koordináta össze lesz kötve az első ponttal.

Az előző feladat csak most polygonnal.

<polygon points="15, 5, 100 8,6 150"

    fill="green"

    stroke="red"

    stroke-width="5"/>

Az eredmény pedig egy háromszög lesz. Figyeljük meg, hogy itt a keret körbe ér, míg polyline-nál nem.

image

Grádiens

Az SVG lehetőséget biztosít arra, hogy az alakzatainkat ne csak egy egyszerű színnel töltsük ki. Akár képpel vagy grádiens ecsettel.

Az SVG-be kétféle grádiens element van. Van egy linearGradient és van egy radialGradient. A grádiens elemeknél mindig definiálnunk kell stop-okat. Egy gradiensnél legalább 2 stopnak lenni. Kell egy kezdő szín (stop) és egy cél szín (stop). A két szín közötti átmenetet már a rendszer elvégzi. Nekünk azzal nem kell foglalkozni. A gradienseket fill és stroke tulajdonságnál tudjuk felhasználni.

<defs>

   <linearGradient id="MyGradient">

      <stop offset="10%" stop-color="yellow" />

      <stop offset="90%" stop-color="red" />

   </linearGradient>

</defs>

   <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"

          x="20" y="20" width="300" height="100"/>

</svg>

A defs elemek között megadjuk a linerGradient-et. Ennek adunk egy Id-t ami a MyGradient névre hallgat. Erre a MyGradientre fogunk a téglalap fill tulajdonságánál fogunk hivatkozni. A fentenbbi kód eredménye az alábbi téglalap lesz:

image

Ha linearGradient kulcsszót lecseréljük radialGradientre akkor az eredmény az alábbiak szerint módusol.

image

A grádiensek elég látványos elemek, de nem csak színátmenetekkel tudunk egy alakzatot kitölteni. Az SVG lehetőséget biztosít arra, hogy mintákat definiáljunk, akár egyszerű akár összetett alakzatokból.

A következő példában egy olyan mintát készítünk, ami sárga körökből és kék téglalapokból áll. Ezzel a mintával fogjuk az ellipszis kitölteni. Az ellipszis fill tulajdonságánál pedig ugyanúgy, mint a grádienses  példánál itt is a nevére hivatkozunk.

<defs>

    <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"

        x="0" y="0" width="150" height="100">

      <circle cx="50" cy="50" r="10" fill="yellow" stroke="blue" />

      <rect x="100" y="0" width="50" height="50" fill="blue" stroke="yellow" />

    </pattern>

</defs>

<ellipse fill="url(#mycircleandsquare)" stroke="black"

     stroke-width="5" cx="400" cy="200" rx="350" ry="150" />

Az eredmény pedig az alábbi lesz:

image

Az SVG ennél persze többre képes, mi most csak az alapjait néztük meg.

Advertisements
Kategóriák:Kategorizálatlan Címke:
  1. st4rlight
    2011. május 5. csütörtök - 19:14

    Most őszintén, ez mire jó? Van olyan (normális) ember, aki kézzel áll neki ilyeneket rajzolgatni kódból? 🙂

  2. panky
    2011. május 6. péntek - 07:39

    @st4rlight: Legalább most már megértem a grafikusokat 🙂

  1. 2011. május 23. hétfő - 14:40

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: