Felhasználói útmutató Mégse

SVG

Ismerje meg, hogy az SVG-vel dolgozva miként hozhat létre XML és JavaScript használatával 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.

Az SVG ismertetése

Az SVG a képeket alakzatok, görbék, szövegek és szűrőhatások segítségével leíró vektorformátum. 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, ellentétben a GIF, JPEG, WBMP és PNG formátumokkal, amelyek nagyméretűek. 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. 

A rajzelemek a Mentés, Mentés másként, Másolat mentése vagy a Mentés webre és eszközökhöz paranccsal menthetők SVG formátumba. 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.

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. svg fá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. Hatás alkalmazásához tegye az alábbiak egyikét:

    Alapértelmezett beállításokkal

    Lépjen a Hatás > SVG szűrők > SVG szűrő alkalmazása elemre.

    Egyéni beállításokkal

    1. Lépjen a Hatás > SVG szűrők > SVG szűrő alkalmazása elemre.

    2. A párbeszédpanelen jelölje ki a hatást, majd kattintson az SVG szűrő szerkesztése   gombra. Szerkessze az alapértelmezett kódot, és válassza az OK gombot.

    új hatás létrehozása és alkalmazása

    1. Lépjen a Hatás > SVG szűrők > SVG szűrő alkalmazása elemre.

    2. A párbeszédpanelen jelölje ki a hatást, majd kattintson az Új SVG szűrő   gombra. Írja be az új kódot, és válassza az OK gombot.

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 válassza a Megnyitás gombot.

Az SVG-interaktivitás panel áttekintése

Az SVG interaktivitás panelen megtekintheti az aktuális fájlhoz tartozó összes eseményt és JavaScript fájlt.
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.

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

A SVG interaktivitás panelen törölhet egy vagy az összes eseményt.

Egy esemény törlése

  • Jelölje ki az eseményt, és válassza a Kiválasztott bejegyzés eltávolítása   lehetőséget.

Az összes esemény törlése

  • A panel menüjéből válassza az Események törlése menüpontot a  

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

Válassza a JavaScript-fájlok összekapcsolása   lehetőséget, és válassza a Hozzáadás lehetőséget további JavaScript-fájlok hozzáadásához, míg a kiválasztott JavaScript-bejegyzés eltávolításához válassza az Eltávolítás lehetőséget.

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 elem 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 nagyítási mértéke 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.

Tippek az SVG fájlok létrehozásához

  • Használjon rétegeket az SVG-fájl strukturálásához. A szoftver minden réteget egy csoportelemmé (<g>) alakít, amikor a rajzelemet SVG formátumban menti. (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 áttetszőként szeretné megjeleníteni, az egyes rétegek helyett az egyes objektumok áttetszőségét módosítsa.

  • Az SVG Viewer programban nem méretezhetők a raszteradatok, és más SVG-elemektől eltérően nem is szerkeszthetők. Érdemes elkerülni az olyan rajzelemek létrehozását, amelyek az SVG fájlban raszterezve lesznek. 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.

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

Új SVG-exportálási beállítás áll rendelkezésre (Fájl > Exportálás > Exportálás mint: > 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. További információ: SVG-exportálási beállítások.


Kapcsolódó források

Beszéljen velünk

Kérdezzen a közösségtől

Ha kérdése van, vagy szeretne megosztani egy ötletet, jöjjön és vegyen részt az Adobe Illustrator-közösségben. Szeretnénk Öntől hallani.

Kapjon segítséget gyorsabban és könnyebben!

Új felhasználó?