Az SVG ismertetése

A webre szánt bittérképes képformátumok – GIF, JPEG, WBMP és PNG – egy képpontráccsal írják le a képeket. Az így kapott fájl általában nagyméretű, egyetlen (sokszor alacsony) felbontással rendelkezik, és nagy sávszélességet foglal a weben. Az SVG viszont egy vektoros formátum, amely a képeket alakzatok, görbék, szövegek és szűrőhatások formájában ábrázolja. Az így kapott fájlok tömörek és jó minőségű grafikát biztosítanak a weben és nyomtatásban, de még a korlátozott erőforrásokkal rendelkező kézi eszközökön is. A felhasználó a képernyőn az élesség, részletesség vagy a pontosság feláldozása nélkül nagyíthatja az SVG képet. Emellett az SVG kiváló támogatást nyújt a szöveg és a színek használatához, biztosítva, hogy a felhasználók ugyanolyannak látják a képeket, ahogyan azok az Illustrator-rajztáblán megjelennek.

Az SVG formátum teljes mértékben XML alapú, és számos előnnyel rendelkezik a fejlesztők és a felhasználók számára is. Az SVG segítségével XML és JavaScript használatával hozhat létre webgrafikát, amelyek kifinomult hatásokkal, például kiemeléssel, eszközleírásokkal, hanggal és animációval válaszolnak a felhasználói műveletekre.

A grafikátSVG formátumban is menthetia Mentés, a Mentés másként, a Másolat mentése, vagy a Mentés webre és eszközökhöz parancs segítségével. Az SVG exportálási beállítások teljes körű használatához használja a Mentés, Mentés másként vagy a Másolat mentése parancsot. A Mentés webre és eszközökhöz parancs az SVG exportálási beállítások azon részhalmazát nyújtja, amelyeket a webre szánt munka esetében lehet alkalmazni.

A rajzelemek az Illustrator szoftverben való elkészítésének módja hatással van a keletkező SVG-fájlra. Vegye figyelembe az alábbi irányelveket:

  • Használjon rétegeket az SVG-fájl strukturálásához. Amikor a rajzelemet SVG formátumban menti, a szoftver minden réteget egy csoportelemmé (<g>) alakít. (A Gomb1 nevű réteg például a <g id="Gomb1_ver3.0"> elem lesz az SVG-fájlban.) A beágyazott rétegek egymásba ágyazott SVG-csoportok lesznek, a rejtett rétegeket pedig a display="none" SVG-stílustulajdonság jelöli.

  • Ha a különböző rétegeken lévő objektumokat átlátszóként szeretné megjeleníteni, az egyes rétegek helyett az egyes objektumok opacitását módosítsa. Ha a réteg szintjén változtatja meg az opacitást, a létrejövő SVG-fájl nem úgy fogja megjeleníteni az átlátszóságot, mint az Illustrator.

  • Az SVG Viewer programban nem méretezhetők a raszteradatok, és más SVG-elemektől eltérően nem is szerkeszthetők. Ha lehetséges, kerülje az olyan rajzelemek létrehozását, amelyek az SVG-fájlban raszterezve lesznek. Színátmenetes hálókat és egyéb objektumokat, amelyek a Raszterizálás, Művészi, Életlenítés, Ecsetvonások, Torzítás, Képelemekre bontás, Élesítés, Vázlat, Stilizálás, Textúra vagy Videó hatásokat használják a szoftver raszterezi SVG formátumba történő mentéskor. Hasonlóan az ilyen hatásokat tartalmazó grafikus stílusok eredménye is raszterezés lesz. Az SVG-hatásokkal készíthetők el grafikus hatások raszterezés nélkül.

  • Szimbólumokkal egyszerűsítheti a rajzelem görbéit az SVG-teljesítmény növelése érdekében. Ha a teljesítmény fontos szempont, kerülje a sok görbeadatot létrehozó ecsetek használatát (ilyenek például a faszén, a hamu és a görgős toll hatású ecsetek).

  • Webes hivatkozásokat szeletekkel, képzónákkal vagy parancsfájlokkal adjon az SVG-fájlhoz.

  • A parancsnyelvek (például a JavaScript) korlátlan lehetőségeket nyitnak meg az SVG-fájlok számára. A mutató- és billentyűeseményekhez parancsnyelvi függvények (például legördülő hatások) rendelhetők. A parancsfájlok a dokumentumobjektum-modellt (DOM) is képesek használni az SVG-fájlok elérésére és módosítására (például SVG elemek beillesztésére vagy törlésére).

SVG-hatások alkalmazása

Az SVG-hatásokkal grafikus tulajdonságokat, például vetett árnyékot adhat a rajzelemekhez. Az SVG-hatások abban különböznek bittérképes megfelelőiktől, hogy XML alapúak és felbontásfüggetlenek. Egy SVG-hatás valójában nem más, mint XML-tulajdonságok sora, amelyek különféle matematikai műveleteket írnak le. A kapott eredményt a forrásgrafika helyett a célobjektumra alkalmazza a szoftver.

Az Illustrator rendelkezik egy alapértelmezett SVG-hatáskészlettel. A hatások használhatók alapértelmezett tulajdonságaikkal, egyéni hatások létrehozásához módosítható az XML-kód, és új SVG-hatások is írhatók.

Megjegyzés:

Az Illustrator alapértelmezett SVG szűrőinek módosításához egy szövegszerkesztőben szerkessze az Adobe SVG Filters.svgfájlt, mely a Documents and Settings/<felhasználóazonosító>/Application Data/Adobe/Adobe Illustrator <verziószám> Settings/<hely> mappában található. Lehetőség van a meglévő szűrődefiníciók módosítására, törlésére és újak hozzáadására is.

  1. Jelöljön ki egy objektumot vagy csoportot (vagy jelöljön ki célként egy réteget a Rétegek panelen).
  2. Tegye az alábbiak egyikét:
    • Egy hatás alapértelmezett beállításokkal történő alkalmazásához jelölje ki a hatást a Hatás > SVG szűrők almenü alsó részében.

    • Egy hatás egyéni beállításokkal történő alkalmazásához válassza a Hatás > SVG szűrők > SVG szűrő alkalmazása menüpontot. A párbeszédpanelen jelölje ki a hatást, majd kattintson az SVG szűrő szerkesztésegombra.Módosítsa az alapértelmezett kódot, majd kattintson az OK gombra.

    • Új hatás létrehozásához és alkalmazásához válassza a Hatás > SVG szűrők > SVG szűrő alkalmazása menüpontot. A párbeszédablakban kattintson az Új SVG szűrőgombra, Írja be az új kódot, és kattintson az OK gombra.

      SVG-szűrőhatás alkalmazásakor az Illustrator a hatás raszterezett változatát jeleníti meg a rajztáblán. Ezen előnézeti kép felbontása a dokumentum raszterezési felbontás beállításának módosításával szabályozható.

      Megjegyzés: Ha egy objektum több hatást is használ, az SVG-hatásnak az utolsónak kell lennie, vagyis a Megjelenés panel alján (közvetlenül az Átlátszóság bejegyzés fölött) kell megjelennie. Ha az SVG-hatást más hatások is követik, az SVG-kimenet egy raszterobjektumból fog állni.

Hatások importálása SVG-fájlból

  1. Válassza a Hatás > SVG szűrő > SVG szűrő importálása elemet.

  2. Jelölje ki azt az SVG-fájlt, amelyből a hatásokat importálni kívánja, és kattintson a Megnyitás gombra.

Az SVG-interaktivitás panel áttekintése

Az SVG-interaktivitás panelen (Ablak > SVG-interaktivitás) ruházható fel a rajzelem interaktív működéssel annak a webböngészőben való megtekintésre történő exportálásakor. Egy JavaScript-parancsot elindító esemény létrehozásával például könnyedén létrehozható mozgás a weblapon, amikor a felhasználó egy műveletsort hajt végre, például egy adott objektumra helyezi az egérmutatót. Az SVG-interaktivitás panel az aktuális fájlhoz tartozó összes eseményt és JavaScript fájlt is megjeleníti.

Esemény törlése az SVG-interaktivitás panelről

  • Egy esemény törléséhez jelölje ki azt, és kattintson a Törlés gombra vagy a panelmenü Esemény törlése parancsára.
  • Az összes esemény törléséhez válassza a panelmenü Események törlése menüpontját.

Egy fájlhoz csatolt események listázása, hozzáadása és eltávolítása

  1. Kattintson a JavaScript fájlok csatolása gombra .
  2. A JavaScript fájlok párbeszédpanelen jelöljön ki egy JavaScript bejegyzést, majd tegye a következők egyikét:
    • Kattintson a Hozzáadás gombra további JavaScript fájlok tallózásához.

    • Kattintson az Eltávolítás gombra a kijelölt JavaScript-bejegyzés eltávolításához.

SVG-interaktivitás hozzáadása a rajzelemhez

  1. Az SVG-interaktivitás panelen jelöljön ki egy eseményt. (Lásd SVG-események.)

  2. Adja meg a megfelelő JavaScript kódot, majd nyomja le az Enter billentyűt.

SVG-események

onfocusin

Akkor indítja a műveletsort, ha az elemre kerül fókuszba, például az egérmutatóval kijelöli azt a felhasználó.

onfocusout

Akkor indítja a műveletsort, ha az elem kikerül a fókuszból (ez gyakran akkor történik, amikor egy másik elem kerül fókuszba).

onactivate

Egérkattintásra vagy billentyűlenyomásra indítja a műveletsort (az SVG-elemtől függően).

onmousedown

Akkor indítja a műveletsort, amikor a felhasználó megnyomja az egér gombját egy elem felett.

onmouseup

Akkor indítja a műveletsort, amikor a felhasználó felengedi az egér gombját egy elem felett.

onclick

Akkor indítja a műveletsort, amikor a felhasználó kattint egy elem felett.

onmouseover

Akkor indítja a műveletsort, amikor a felhasználó az egérmutatót egy elem fölé viszi.

onmousemove

Akkor indítja a műveletsort, amikor az egérmutató egy elem felett áll.

onmouseout

Akkor indítja a műveletsort, amikor a felhasználó elmozgatja az egérmutatót egy elem fölül.

onkeydown

Akkor indítja a műveletsort, amikor a felhasználó lenyom egy billentyűt.

onkeypress

Akkor indítja a műveletsort, amikor a felhasználó lenyom egy billentyűt.

onkeyup

Akkor indítja a műveletsort, amikor a felhasználó felenged egy billentyűt.

onload

Akkor indítja a műveletsort, amikor a böngésző végzett az SVG-dokumentum elemzésével. Ez az esemény egyszer futtatandó inicializációs funkciók meghívására használható.

onerror

Akkor indítja a műveletsort, amikor egy elem nem töltődik be megfelelően, illetve más hiba lép fel.

onabort

Akkor indítja a műveletsort, amikor az oldal betöltése az elem teljes betöltése előtt leáll.

onunload

Akkor indítja a műveletsort, amikor az SVG-dokumentum az ablakból vagy keretből eltávolításra kerül.

onzoom

Akkor indítja a műveletsort, amikor a dokumentum kicsinyítési/nagyítási szintje változik.

onresize

Akkor indítja a műveletsort, amikor a dokumentum nézete átméretezésre kerül.

onscroll

Akkor indítja a műveletsort, amikor a dokumentum nézetét a felhasználó görgeti vagy eltolja.

Webre optimalizált SVG-exportálás beállítások

Új SVG-exportálási beállítás áll rendelkezésre (Fájl > Exportálás > SVG). Az új munkafolyamat lehetővé teszi standardizált, webre optimalizált SVG-fájlok generálását a világhálóra és képernyőre tervezett projektekhez.

Az elérhető beállítások:

  • Stílus. Válassza ki, hogyan szeretné a kapott kódot az SVG-fájlba írni. Válasszon a Belső CSS, Beágyazott stílus, vagy Bemutató jellemzői stílus közül.
  • Betűtípus. Válassza ki, a betűtípusok hogyan jelenjenek meg az SVG-fájlban. A körvonalak megőrzik az elérési út meghatározását, és ezek a leginkább kompatibilisek.
  • Képek: Akkor válassza, ha a képeket beágyazottként szeretné menteni vagy a dokumentumhoz csatolt külső fájlokként.
  • Objektumazonosító: Válassza ki, hogy az azonosítótípusok (nevek) hogyan legyenek az objektumokhoz rendelve az SVG-fájlban. Válasszon a Rétegnevek, Minimális, vagy Egyedi közül. Ez a beállítás határozza meg a duplikált objektumnevek kezelését, valamint azt, hogy az objektumok hogyan legyenek elnevezve az exportált CSS-ben.
  • Decimális: Határozza meg, hogy az objektum helyszínének pontosságához mennyi információt akar megőrizni. bb decimális karakter növeli az objektumok elrendezésének pontosságát, és ez a leképezett SVG vizuális hűségét is növeli. Ugyanakkor a túl sok decimális érték növeli az exportált SVG-fájlméretét is.
  • Kisebbítés: Az SVG-fájl méretének optimalizálása az üres csoportok és felesleges szóközök eltávolításával. A beállítás választása csökkenti az eredményül kapott SVG-kód olvashatóságát.
  • Érzékeny. A beállítás választásával meggyőződhet, hogy a kapott SVG a böngészőhöz lett méretezve. Nem abszolút méreteket adtak meg.
  • Kód megjelenítése: Megnyitja az exportált tartalmat az alapértelmezett szövegszerkesztőben.
  • Megjelenítés aböngészőben (ikon): A képet az alapértelmezett webböngészőben jeleníti meg.

Ez a munka a Creative Commons Nevezd meg!-Ne add el!-Így add tovább! 3.0 Unported licenc alatt lett közzétéve.  A Twitter™ és Facebook közzétételeket a Creative Commons jogi feltételei nem szabályozzák.

Jogi közlemények   |   Online adatvédelmi nyilatkozat