• Előnyei más képformátumokkal (JPEG, GIF) szemben – SVG fájlok sokféle eszközzel olvashatók és módosíthatók (pl. notepad) – Kisebb méretűek és jobban tömöríthetők mint a JPEG és GIF képek – Skálázhatók (átméretezhetők → nagyíthatók, kicsinyíthetők) – Nagypontossággal nyomtathatók bármilyen felbontásnál – Az SVG képek és részeik is zoomolhatók a pontosság csökkenése nélkül – Az SVG-n belüli szövegek kiválasztatók és kereshetők (kiváló tulajdonság térképek esetén) – Az SVG együtt tud működni a Java technológiával – Nyílt szabvány
• Az SVG fájlok tiszta XML állományok • Fő vetélytársuk a Flash • Az SVG legnagyobb előnye a Flash-sel szemben kompatibilitás más szabványokkal (pl.XSL, DOM), s a Flash nem nyílt forrású
• SVG=Scalable Vector Gaphics /Skálázható vektorgrafika/ • Vektor alapú grafika definiálása a WEB-en • A grafika definiálása XML formában • SVG grafika nem veszít felbontásából (pontosságából) zoomoláskor vagy átméretezéskor svg\0.html,svg\00.html, svg\000.html, svg\tree.html, svg\tree1.html, eloszlas • Minden SVG elem és jellemző animálható • World Wide Web Consortium (W3C) ajánlás, ill. szabvány • Más W3C szabványokat (DOM, XSL) is integrál • SVG 1.1 2003 januárjában jelent meg mint W3C Ajánlás (W3C Recommendation) • Sun, Adobe, Apple, IBM, Kodak, stb. közreműködésével definiálták
• Az SVG jelenlegi hátrányos tulajdonsága, hogy nem támogatja minden böngésző. Mozilla, Firefox és Opera támogatja, a Microsoft pedig tervezi • Az SVG szerkesztők száma növekszik, s több rajzlóprogram kimeneti formátumként is felajánlja (pl. CorelDraw) • Az SVG fájlok megjelenítése – Ha a böngésző nem támogatja az SVG fájlok megjelenítését, akkor egy SVG megjelenítőre van szüksége – Firefox 1.5 és Opera 9 native SVG megjelenítőt tartalmaz. Ilyen böngészők használatakor nincs szüksége SVG megjelenítőre. – Internet Explorer esetén telepítse az ingyen letölthető Adobe plugin-t, vagy használjon egy önálló Adobe SVG megjelenítőt.
1
A WEB programozása - SVG dr.Gál Tibor Bevezető példa A következő példa egy egyszerű SVG állományt mutat be. Az SVG állományokat .svg kiterjesztésű névvel kell tárolni. svg\kor.svg <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
• Az SVG kód az <svg> dokumentum gyökérelemben található. Ennek width és height jellemzője specifikálja az svg dokumentum szélességét és magasságát. Itt kell még megadni a version jellemzőt és az svg névtartományát az xmlns jellemző megfelelő értékével! • Az svg elem egy kör létrehozására szolgál. cx és cy a kör középpontját, r pediga sugarát írja elő. Ha elhagyjuk cx é cy értkét, akkor azok 0 értéket veszne fel. • A stroke, stroke-width, fill jellemzők a vonal színét, vonal vastagságát és az alakzatot kitöltő színt specifikálják. • Figyelem: A dokumentumnak jól formázottnak kell lenni!
• Az első sor az XML deklaráció. A standalone jellemző no értéke arra utal, hogy ez a dokumentum külső fájl(ok)ra is hivatkozik, ebben az esetben a DTD-re. • A második és a harmadik sor az SVG DTD-jére hivatkozik, amely a megadott url-lel van azonosítva.
Beilesztés HTML dokumentumba I. SVG fájlok az embed, object és iframe elemekkel a html fájlokba be is illesztetők. svg\1.html ... SVG beszúrása html dokumentumba EMBED elemmel <embed src="rect.svg" width="300" height="100" pluginspage="http://www.adobe.com/svg/viewer/install/" type="image/svg+xml"/> SVG beszúrása html dokumentumba OBJECT elemmel SVG beszúrása html dokumentumba IFRAME elemmel <iframe src="rect.svg" width="300" height="100"> ...
2
A WEB programozása - SVG dr.Gál Tibor Beilesztés HTML dokumentumba II. SVG elemek a html fájlokba inline módon is beillesztetők. Bár a fájl tartamlát illetően kompatibilitás van IE és FF között, de IE esetén .html, FF esetn pedig .xml kiterjesztést kell használni. svg\2ie.html, svg\2ff.bat, svg\2ieff.html A 2ieff.html fájl <script> ver=navigator.appVersion ie=(ver.indexOf("MSIE") > -1)?1:0; if(ie) location.href="2ie.html"; else location.href="2ff.xml";
2010. őszi félév
A 2ie.html és 2ff.xml fájlok tartalma egyaránt SVG embedded inline in XHTML
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> Körív parancsok egy path elemben <desc>Kördiagramm két körcikkel, vonal ivekkel <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z" fill="red" stroke="blue" stroke-width="5" /> <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z" fill="yellow" stroke="blue" stroke-width="5" /> <path d="M600,350 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25" fill="none" stroke="red" stroke-width="5" />
points: - a poligon csúcspontjainak koordinátái
svg\path.html
Útvonal parancsok (d jellemző elemei) 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 A nagybetűs parancsokat abszolút, a kisbetűseket pedig relatív koordináták követik.
M=A rajzolandó útvonal kezdőpontját állítja be L =Egyenest rajzol a jelenlegi pontból a specifikáltba, s a specifikált pont válik jelenlegi ponttá. Több egymást követő pont is specifikálható egyetlen L parancsban Z =Az útvonal jelenlegi pontját egy egyenessel összeköti az útvonal kezdőpontjával (zárja az útvonalat) Például: d="M 100 100 L 300 300 L 500 100 Z" vagy d="M 100 100 L 300 300 500 100 Z" H =Vízszintes vonalat rajzol a jelenlegi pontból a specifikált x értékig V =Függőleges vonalat rajzol a jelenlegi pontból a specifikált y értékig Például egy négyzet kirajzolása a rect, ill. path elemmel <path d="M 5 5 H 65 V65 H 5 V 5" /> <path d="M 5 5 H 65 V65 H 5 Z" />
5
A WEB programozása - SVG dr.Gál Tibor A=Ellipszisív (körív) rajzolása a jelenlegi pontból kiindulva hét paraméterrel. A rx,ry xar laf,sf x,y ahol rx, ry az x és y tengely menti sugár xar (x-axis rotation) az ellipszis relatív eforgatásának iránya laf,sf (large-arc-flag,swep flag) A kezdő és végponton két ellipszis rajzolható, a rajzolási irány kétféle lehet. A két paraméter 0,0 0,1 1,0 1,1 értéket vehet fel. Hatásukat az ábra szemlélteti. x,y az ellipszisív végpontja. Több paramétercsoporttal multiellipszisív rajzolható.
Szöveg beillesztése Néhány elem
2010. őszi félév
C=Harmadfokú Bézier görbe rajzolása a jelenlegi pontból kiindulva hat paraméterrel. C x1,y1 x2,y2 x,y ahol x,y a görbe végpontja, a rajzolás után ez lesz a jelenlegi pont x1,y1 a görbe kezdőpontbeli vezérpontja x2,y2 a görbe végpontbeli vezérpontja Több paramétercsoporttal multiBézier görbe rajzolható. pelda
A text elem Az alakzatokon használható attribútumok, transzformációk ezen az elemen is használhatók • Speciális lehetőségek – individuális karakterek tetszőleges pozícióba helyezhetők – individuális karakterek tetszőlegesen forgathatók
• Példa Hello World
6
A WEB programozása - SVG dr.Gál Tibor Attribútumok
A tspan elem
A karakterek x pozícióinak listája A karakterek y pozícióinak listája Hosszúságlista, a karakterek relatív eltolására az abszolút x pozícióhoz képest dy Hosszúságlista, a karakterek relatív eltolására az abszolút y pozícióhoz képest rotate Az egyes karakterek elforgatási szögei. Az n. érték az n. karakterre vonatkozik. textLength Amilyen hosszon a szöveg megjelenítendő. lengthAdjust Az adott hosszúságú megjelenítéshez mi szabályozható (lehetséges értékei: spacing és spacingAndGlyphs) Prezentációs attribútumok: • szín: color, color-interpolation, color-rendering • kiöltés: fill, fill-opacity, stroke-width, … • grafika: clip-path, clip-rule, cursor, display, filter, … • font spec.:font-falily, font-size, font-weight, … • szövegtartalom: alignment-baseline, direction, letter-spacing, … x y dx
Csoportosítás Elemek <defs> <use>
2010. őszi félév
Megegyezik a text elemmel, de a text elem tartalmán belül és önmagán belül is használható
A tref elem Egy azonosított szövegrészt helyez el <defs> A WEB programozása ...
A g (grouping)elem Elsődleges elem az svg dokumentum strukturálására • A tartalmazott elemek tulajdonságait együttesen előírhatja • Egyedi azonosítójával (id) valamennyi tartalmazott eleme hivatkozható • Attribútumai nem írják felül a gyermekelemek explicite megadott attribútumait • De a default, explicite nem definiáltakat igen svg\grouping.html
A defs (define) és use (használd) elem • SVG elemek definiálása későbbi felhasználásra • Nem jelenít meg, de a hivatkozása (pl. use) igen <defs> <use x="0" y="0" width="200" height="200" xlink:href="#group1" /> <use x="0" y="0" width="200" height="200" xlink:href="#group1" transform="rotate(70, 100, 100)" />
svg\grouping1.html
Stílus • • • •
•
Megjelenítés stílusa=objektum stílusa + szülőobjektum stílusa (öröklés) Hiányzó jellemző a default értékkel helyettesítődik Stílustulajdonságok döntően a CSS-nek felelnek meg A megjelenítés css style attribútummal is megadható egyes svg megjelenítők esetén, de ezt nem írja elő a szabvány Stílusmegadási lehetőségek 1. 2. 3. 4.
Szabványos svg attribútumok használata Inline css megadás Css megadása a defs elemben (belső stíluslap) Css megadása külső fájlban (külső stíluslap)
Szabványos svg attribútumok használata svg\stilus1.html
Inline css megadás
Css megadása a defs elemben <defs> <style type="text/css">
8
A WEB programozása - SVG dr.Gál Tibor
2010. őszi félév
Css megadása a külső fájlban (legtöbb megjelenítő nem támogatja) // A style.css fájl <defs> <style type="text/css"> // Hivatkozás a külső fájlban megadott stílusra
Paramterek • patternUnits – userSpaceOnUse érték mellett a csempék egymáshoz illesztve rakódnak le – objectBoundingBox esetén a kitöltendő objektum méretitől függően térközökkel, ill. átfedéssel történik a csempék lerakása
• x, y, witdth, height, viewBox értelmezésük mint az svg elem esetén
JÓ NAPOT KÍVÁNOK! <ellipse cx="200" cy="300" rx="200" ry="100" fill="url(#pat2)" id="bg2" /> JÓ NAPOT KÍVÁNOK!
Transzormációk • •
Konténer elemeken (svg, g, image) és bármilyen alakzaton végrehajthatók Fajtáik – – – – – –
translate(x,y) Eltolás scale(sx,sy) Skálázás rotate(angle,cx,cy) Forgatás skewX x-tengely forgatása skewY y-tengely forgatása matrix(a,b,c,d,e,f) A jelenlegi transzformációs szorzása
A WEB programozása - SVG dr.Gál Tibor Vágás(clipping) • • •
Vágás=Egy kép részeinek eltüntetése, melyek egy adott területen kívül esnek A határoló terület olyan egyszerű lehet int egy téglalap, de akár egy komplex útvonal is definiálhatja A következő első példában csak egy objektumot vágunk, a másodikban már valamennyit egy máromszöggel
svg\clip2.html ... <use x = "250" y = "0" xlink:href = "#r1" fill = "url(#g1)"/> <use x = "350" y = "150" xlink:href = "#r2" fill = "url(#g1)"/> <use x = "580" y = "50" xlink:href = "#r3" fill = "url(#g1)"/>
Analóg a vágással, de a vágásnál a vágófelület teljesen átlátszatlan, maszkolásnál default értéke teljesen átlátszó A default érték helyett tetszőleges átlátszóság adható meg
Érdekesebb példa: svg\clip.html
11
A WEB programozása - SVG dr.Gál Tibor <defs> svg\mask1.html <stop offset="0" stop-color="white" stop-opacity="0" /> <stop offset="1" stop-color="white" stop-opacity="1" /> <mask id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="300"> Masked text <use xlink:href="#Text" fill="blue" mask="url(#Mask)" /> <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
Az svg objektumokon fellépő események a html elemeken fellépőkhöz hasonlóan kezelhetők A DOM használatával a meglévő objektumok jellemzői módosíthatók, új objektumok létrehozhatók, s meglévők megszüntethetők Példa: svg1/domInSvg/1.svg
txt.setAttributeNS(null, "font-size", 24); txt.setAttributeNS(null, "font-family", "Comic San Serif MS"); txt.setAttributeNS(null, "fill", "white"); svgDocument.documentElement.appendChild(txt); txt.appendChild(document.createTextNode( 'Click to remove')); } function clearS(evt){ evt.target.parentNode.removeChild( evt.target.nextSibling); evt.target.parentNode.removeChild(evt.target); } function changeColor(evt){ try{ if(document.getElementById('ellipse1'). getAttributeNS(null,'fill')=='red') document.getElementById('ellipse1'). setAttributeNS(null,'fill','blue'); else
12
A WEB programozása - SVG dr.Gál Tibor document.getElementById('ellipse1'). setAttributeNS(null,'fill','red'); }catch(e){alert('A célelem még nincs létrehozva!!!');} } ]]> <ellipse cx='100' cy='24' rx='76' ry='24' fill='#6699cc' stroke='none' onclick="makeShape(evt)"/> <ellipse cx='110' cy='24' rx='62' ry='20' fill='white' stroke='none' onclick="makeShape(evt)"/> Létrehozás
Kommunikáció a html és svg állomány között • • • •
Csak embed elemmel beszúrt svg állomány esetével foglalkozunk Object és iframe elemel beszúrt esetben az IE-ben használt Adobe plugin korlátozza a lehetőségeket Bár FF esetén object és iframe esetén nincsennek korlátozások, ezekkel nem foglalkozunk Kommunikációs típusok – – –
Html-ből az svg-be Svg-ből a html-be Html-beli svg-k között
// Így is használható ... function makeShape(evt) { var shape = document.createElementNS(svgns, "ellipse"); shape.setAttributeNS(null, "id", "ellipse1"); ...
Html → svg kommunikáció - I. svg1\htmToSvg\svgEmbedded\1.html <script type="text/javascript"> function f_HTML() { window.f2_HTML("blue"); }
A WEB programozása - SVG dr.Gál Tibor <svg height="200" width="200" onload="Initialize(evt)" xmlns="http://www.w3.org/2000/svg"> <script type="text/ecmascript">
2010. őszi félév
Html → svg kommunikáció - II. <script type="text/javascript"> svg1\htmToSvg\svgEmbedded\2.html function f1(szin) { var o = document.embeds[0]; var oo = o.getSVGDocument(); oo.getElementById('colorCircle'). setAttribute('stroke',szin); } function f2(szin) { var o = document.embeds[0]; var oo = o.getSVGDocument(); oo.getElementById('colorCircle'). setAttribute('fill',szin); } <embed src="2.svg" width="200" height="200 style="background-color:gray;border-style:solid; border-width:2" type="image/svg+xml" >
A WEB programozása - SVG dr.Gál Tibor <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script type="text/ecmascript">
2010. őszi félév
Svg → html kommunikáció - II. svg1\svgToHtml\svgEmbedded\2ieff.html <embed name="svg0" src="2.svg" type="image/svg+xml" width="150" height="150">
A WEB programozása - SVG dr.Gál Tibor // Forrás svg <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script type="text/ecmascript">
2010. őszi félév
// Cél svg <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
