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.

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.

SVG-fájlok

Az SVG fájlformátum a kétdimenziós grafikák, diagramok és illusztrációk webhelyeken történő megjelenítésére használt népszerű eszköz. Egyben vektoros formátum is, így felbontásvesztés nélküli nagyítást és kicsinyítést tesz lehetővé. Részletesebben is megismerkedhet az SVG-képek legfontosabb jellemzőivel, az előnyeikkel és a hátrányaikkal, valamint az SVG formátum kialakulásával.

A témakör tartalma

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

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

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.
Kattintson a megjelenő panel Formátum legördülő listájára, és válassza az SVG elemet.
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

style

grid width 8

A képfájlok átalakítása minden eddiginél egyszerűbb.

Az Adobe Express segítségével néhány kattintással könnyedén átalakíthatja a fájlokat a kívánt formátumba (SVG, JPG, PNG vagy akár átlátszóságot is támogató fájlok).