SVG-fájlok

A témakör tartalma

• Mit kell tudni az SVG-fájlokról?
• Az SVG-fájlok története
• Mire használhatók az SVG-fájlok?
• Az SVG-fájlok előnyei és hátrányai
• SVG-fájl megnyitása
• SVG-fájl létrehozása és szerkesztése
• Gyakori kérdések az SVG-fájlokról

Mit kell tudni az SVG-fájlokról?

Az SVG betűszó a Scalable Vector Graphics kifejezés rövidítése, amely egy webes felhasználásra szánt vektoros fájlformátumot takar. A képpontalapú raszteres fájlokkal (köztük a JPEG-fájlokkal) ellentétben a vektoros fájlok rácson elhelyezkedő pontokra és vonalakra épülő matematikai képletek használatával tárolják a képeket. Ez azt jelenti, hogy a vektoros fájlok (például az SVG-fájlok) jelentős mértékben átméretezhetők bármiféle minőségromlás nélkül, ezáltal ideálisak logókhoz és összetett online grafikákhoz.

Az SVG-fájlok nem csak az átméretezhetőségük miatt annyira népszerűek a webes tartalmakat készítők körében. XML-kódban történik az írásuk, azaz nem alakzatokként, hanem literálokként tárolják a szöveges információt. Ennek a megoldásnak köszönhetően a keresőprogramok (például a Google keresője) olvasni tudják az SVG formátumú grafikák kulcsszavait, így lehetőség szerint előrébb kerülhetnek a webhelyek a találati listákon.

Az SVG-fájlok könnyen felismerhetők az .svg kiterjesztésükről.

Az SVG-fájlok története

1994-ben Martijn Koster holland szoftvermérnök javasolta elsőként az SVG fájlformátumot.

Az SVG-fájlok története az 1990-es évek végéig nyúlik vissza, amikor is a World Wide Web Consortium (W3C) javaslatokat kért a fejlesztőktől egy új típusú vektorgrafikus formátumra. Hat beadott javaslat versengett egymással és járult hozzá ahhoz, ami végül a W3C SVG formátuma lett.

Hosszabb időnek kellett eltelnie, hogy elterjedtté váljon az SVG formátum. 2017-ig csak viszonylag kevesen karolták fel. Akkor ismerték fel egyre többen, hogy milyen előnyökkel jár az SVG-fájlok modern webböngészőkben történő használata. Ma már széles körben használnak SVG-fájlokat kétdimenziós webhelyképekként, mert a legtöbb böngésző és a vektoros fájlokhoz készült rajzolóprogramok zöme könnyen tudja őket kezelni.

Az SVG-fájlok előnyei és hátrányai

Mielőtt SVG-fájlokként mentené a képeit, érdemes jobban is körüljárni ennek a formátumnak az előnyeit és a hátrányait.

Az SVG-fájlok előnyei

• A képpontokból álló raszteres fájlokkal szemben a vektorgrafikák (köztük az SVG-fájlok) mindig ugyanolyan felbontásúak maradnak függetlenül attól, hogy mekkorára nagyítja vagy kicsinyíti őket. Nem kell tartania attól, hogy bizonyos böngészőkben megjelenítve vagy máshol történő megjelenítés miatti átméretezéskor romlik az SVG-képek minősége.
• A nem túl összetett SVG-fájlok sok esetben kisebbek a raszteres képeknél, amelyek nem matematikai algoritmusok használatával jönnek létre, hanem sok színes képpontból állnak.
• Az SVG-fájlok szövegként kezelik a szöveget (nem pedig tervként), ezért a képernyőolvasók az SVG-képeken található összes szót olvasni tudják. Ez nagyon hasznos azoknak, akik segítségre szorulnak a weboldalak olvasásakor. A keresőprogramok is képesek az SVG-képeken lévő szöveg olvasására és indexelésére.
• Az SVG olyan szkriptnyelveken keresztül támogatja az interaktivitást, mint a JavaScript, dinamikus és szemet gyönyörködtető grafikákat téve lehetővé.
• Az SVG egy XML-nyelv, amely könnyen használható, és más webes technológiákkal is integrálható.

Az SVG-fájlok hátrányai

• Az SVG-fájlok kiválóan alkalmasak webes grafikák, például logók, illusztrációk és diagramok készítésére, de nincsenek bennük képpontok, ezért a nagyon jó minőségű digitális fényképek megjelenítése nehézkes. A JPEG-fájlok általában előnyösebbek a részletgazdag fényképekhez.
• Csak a modern böngészők tudnak SVG-képeket megjeleníteni. Az Internet Explorer 8-ban és más régebbi böngészőkben igazi kihívás lehet SVG-fájlokat használni.
• Ha csak most ismerkedik ezzel a fájlformátummal, nehézséget okozhat az SVG-képekbe ágyazott kód megértése.

SVG-fájl megnyitása

Akár a Chrome-ról vagy az Edge-ről, akár a Safariról vagy a Firefoxról van szó, napjainkban minden jelentősebb böngészőben megnyithatók az SVG-fájlok függetlenül attól, hogy Mac gépen vagy Windowson futnak-e. A böngésző elindítása után kattintson a Fájl menü

Megnyitás parancsára, és válassza ki a megtekinteni kívánt fájlt. A fájl ezután megjelenik a böngészőben.

Ha számítógépe egyik saját programjával szeretne SVG-képet megnyitni, ugyanilyen könnyen megteheti. Kattintson duplán a fájl nevére, és megjelenik a fájl megnyitására alkalmas programok listája, vagy automatikusan megnyílik a fájl az egyik kompatibilis programban.

SVG-fájl létrehozása és szerkesztése

Ha az Adobe Photoshopot használja, végezze el ezeket a lépéseket:

1. Miután elkészítette a képet a Photoshopban, válassza a Fájl > Exportálás > Exportálás ekként lehetőséget.
2. Kattintson a megjelenő panel Formátum legördülő listájára, és válassza az SVG elemet.
3. Jelölje be az Összes exportálása jelölőnégyzetet, és mentse a fájlt.

Érdemes megjegyezni, hogy mivel a Photoshop rasztergrafika-szerkesztő szoftver, sokan inkább az Adobe Illustratorban készítenek és szerkesztenek SVG-fájlokat, mert az vektorgrafika-szerkesztő program.

Így hozhat létre SVG-fájlt az Illustratorban

Ha az Adobe Illustratort használja, végezze el ezeket a lépéseket:

1. Miután elkészített egy grafikát az Illustratorban, jelölje ki a szöveget, hogy körvonalakat hozzon létre. Így elkerülheti a betűtípus-behelyettesítési problémákat, amikor a grafikát más számítógépen tekinti meg. Válassza a Szöveg > Körvonalak létrehozása lehetőséget
2. A fájl mentéséhez válassza a Fájl > Mentés másként parancsot. Kattintson a megjelenő panel Formátum legördülő listájára, és válassza az SVG elemet.
3. A szerkesztett SVG-fájlt a Fájl > Exportálás > Exportálás ekként parancs használatával és az SVG formátum kiválasztásával is exportálhatja. Így megadhatja az olyan exportálási beállításokat, mint a pontosság és a kompatibilitás.

Így szerkeszthet SVG-fájlt az Illustratorban

1. Jelölje ki a fájlt, és nyissa meg az SVG-t az Illustratorban. Vagy importálhatja is az SVG-fájlt egy meglévő Illustrator-dokumentumba a Fájl > Elhelyezés parancs használatával.
2. A Kijelölés eszközzel (vagy a Közvetlen kijelölés eszközzel) kijelölhet egyes görbéket, alakzatokat vagy csoportokat az SVG-fájlon belül. Átméretezheti, formálhatja, átalakíthatja vagy szerkesztheti a görbéket, valamint színt és effekteket adhat hozzá.