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-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:
- 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
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.
További tudnivalók az SVG-fájlokhoz hasonló fájltípusokról
Többet is megtudhat a webes grafikákhoz és logókhoz használt egyik további kedvelt formátumról.
Megtudhatja, hogy miért célszerű JPEG-fájlokat készíteni, ha összetett digitális fényképekről van szó.
Megismerkedhet ezzel az új raszteres fájltípussal, amelyet az Apple dolgozott ki.
Bemutatjuk ezt az Adobe Illustratorhoz kifejlesztett népszerű vektoros formátumot.
Az SVG formátum összehasonlítása más fájltípusokkal
Az SVG és a PNG formátum közötti eltérések
Melyik fájlformátum a domináns a webes tartalmakat tervezők körében?
Az SVG és az EPS formátum közötti eltérések
Közelebbről is szemügyre veheti, hogy miként használható ez a két formátum nyomtatásra.
Találja meg az Önnek legmegfelelőbb csomagot.
Adobe Illustrator Egyetlen alkalmazás
Gyönyörű vektorgrafikákat és illusztrációkat készíthet.
7 nap ingyen, majd 25,39 €/hó áron.
Adobe InDesign Egyetlen alkalmazás
Elegáns oldalelrendezéseket készíthet nyomtatott és digitális médiatartalmakhoz.
7 napig ingyen, majd 25,39 €/hó áron.
Összes alkalmazás
Szerezze be a teljes kreatív alkalmazásgyűjteményt és egyéb eszközöket.
7 napig ingyen, majd 66,12 €/hó áron.