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 egy 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

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.

Mire használhatók az SVG-fájlok?

Hosszú utat tett meg a Scalable Vector Graphics formátum az utóbbi években. A következőkben bemutatjuk, hogy mire használják az SVG-fájlokat a gyakorlatban.

Webhelyek ikonjai és logói

A tervezők gyakran használnak SVG-fájlokat a webhelyeken elhelyezett ikonok (például a gombok) és cégemblémák megjelenítéséhez. Mivel az ilyen fájltípusú elemek mindenféle minőségromlás nélkül nagyíthatók és kicsinyíthetők, az SVG-fájlok ideális megoldást jelentenek olyan grafikákhoz, amelyeket több helyen és más-más méretben kell megjeleníteni.

Infografikák és illusztrációk

Az SVG-fájlokban használt XML-adatoknak köszönhetően a keresőprogramok (köztük a Google keresője) olvasni tudják a sok szöveget tartalmazó diagramokat és grafikonokat, ami segíthet a keresőprogram-optimalizálásban. A Google keresője észlelni tudja az SVG-fájlokba ágyazott kulcsszavakat, így lehetőség szerint előrébb kerülhetnek a weboldalak a találati listákon. Az SVG-fájlok emellett animálhatók is, hogy sokkal érdekesebbé lehessen tenni a weboldalakat.

További vektoros fájltípusok bemutatása

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-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. Annyi a dolga csupán, hogy a böngésző elindítása után a Fájl menü Megnyitás parancsára kattintva kiválasztja a megtekinteni kívánt fájlt, és az 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. 

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

Gyakori kérdések az SVG-fájlokról

Használhatók animálásra az SVG-fájlok?

Az SVG fájlformátum nem csak statikus képekhez használható. Számos olyan webes eszközt fog megismerni, amellyel mozgó elemeket helyezhet el a webes grafikákban. Az SVG formátumú animációk viszonylag egyszerű elemeket is tartalmazhatnak, például egy olyan csúszkát, amellyel váltani lehet az infografikák egyes diái között. Az illusztrációk is felruházhatók mozgó elemekkel: egy óra számlapján például a mutatók imitálhatják a ketyegést.

Miről ismerhetők fel az SVG-fájlok?

A legkönnyebben a kiterjesztésükről lehet felismerni az SVG-fájlokat. Minden ilyen fájlnak .svg a kiterjesztése. Úgy is felismerheti a vektoros képeket (köztük az SVG-képeket), hogy 200%-ra vagy még nagyobbra nagyítja őket számítógépe képernyőjén. A vektoros képek nem válnak pixelessé vagy elmosódottá, így változatlanok maradnak az éles vonalaik és a homogén színeik.

Csak az interneten használhatók SVG-fájlok?

Noha elsősorban a weben használnak SVG-képeket, az online téren kívül is szerepet kapnak. Mivel az eredeti méretükről nagyítva vagy kicsinyítve sem torzulnak, az SVG-fájlok jól használhatók például sablonokként a ruhadarabokra (köztük pólókra) történő nyomtatáskor. A rengeteg képpontból álló JPEG-fájlokat nem lehetne ilyen tisztán átvinni másik felületre.

Mekkorák az SVG-fájlok?

Az SVG-fájlok mérete a bennük tárolt képadatok mennyiségének függvénye, de rendszerint kisebbek, mint a legtöbb egyéb fájltípus. A sok görbéből és szerkesztőpontból álló összetett grafikák több tárterületet foglalnak, mint az egyszerűbb és letisztultabb tervek. Célszerű minél kevesebb összetett utasítást elhelyezni a fájlban.

Miben különböznek az SVG-fájlok és a PNG-fájlok?

Röviden fogalmazva az SVG-fájlok vektorosak, míg a PNG-fájlok raszteresek. Ha túl nagyra vagy túl kicsire méretez át egy PNG-fájlt, elmosódott és pixeles lesz. Az SVG-fájlokban nincsenek képpontok, ezért soha nem romlik a felbontásuk. A PNG-fájlok ezenkívül nem is animálhatók.