6 előnye a vektorgrafikának SVG formátumban

1. előny: korlátlan skálázás torzítás nélkül

Az SVG matematikai útvonalakkal írja le az alakzatokat, és nagyításkor a böngésző egyszerűen újrarajzolja az új méretben. Az ikonok ések maradnak a Retina kijelzőkön, és egy billboard méretűre nagyított logó is ropogós — nem kell több felbontást készíteni, mint egy bitkép esetén. Ez a vektorgrafika alapvető előnye, és oka annak, hogy a logókat és ikonokat vektorizálni kell. A reszponzív oldalakon egyetlen SVG ikon lefedi a telefontól a 4K kijelzőig terjedő összes esetet, így nem kell külön képeket vágni minden eszközhöz.

2. előny: kis fájlméret és gyors oldalbetöltés

Egy egyszerű ikon SVG-je gyakran csak néhány KB — jóval kisebb, mint egy több felbontású PNG készlet. Mivel az SVG szöveg, gzippel vagy Brotlivel rendkívül jól tömörül, ami további hatvan-nyolcvan százalékkal csökkenti az átviteli méretet. Az ikonokkal teli oldalon az SVG-re váltás érezhetően mérsékli a sávszélességet. Az összetett illusztrációknál természetesen figyelni kell az útvonalak számára; a részletekért lásd az SVG optimalizálási tippeket. Miután egy ikonrendszer SVG-re vált, a fold feletti képekért igényelt összes bájt gyakran több mint felére csökken, ami különösen lassú kapcsolatokon értékes.

3. előny: programozható, interaktív és animálható

Az SVG a DOM része: CSS-sel megváltoztathatja egy ikon kitöltését, JavaScripttel vezérelheti a vonalrajzoló animációt, és reagálhat a kattintásokra és a hoverre. A sötét módban váltogatott ikonszínek, a diagram egy szeletének kiemelése hoverre és a betöltési animációk mind közvetlenül SVG-ben megoldhatók — képváltás és képkockánkénti animációs fájlok nélkül. A raszteres formátumok ezt egyszerűen nem tudják. A legtöbbet az adatvizualizáció profitál: egy diagram minden sávja és minden vonalszakasza önálló útvonal, így a hover-kiemelés és a drill-down események közvetlenül kapcsolódnak hozzájuk.

4. előny: szerkeszthető szöveg, SEO- és akadálymentességbarát

Az SVG-ben lévő szöveg valódi szöveg — kijelölhető, kereshető és fordítható. Ha egy grafikához <title> és <desc> leírást ad, a képernyőolvasók felolvashatják, a keresőmotorok pedig megérthetik az alkotás jelentését. A bitképben lévő szöveg csak pixel, láthatatlan mind a keresőmotorok, mind a képernyőolvasó felhasználói számára. A többnyelvű oldalak közvetlenül lefordíthatják az SVG-n belüli szöveget anélkül, hogy újra kellene exportálniuk a képet.

5. előny: egyetlen forrásfájl, újrahasznosítható mindenhol

Ugyanaz az SVG működik egy weboldalon, nagy felbontású PNG-ként exportálható egy dokumentumhoz, és átadható a nyomtatóknak és a lézeres gravírozóknak. Ha a vállalati szín megváltozik, egyetlen forrásfájlt szerkeszt, és minden felhasználás egyszerre frissül, ahelyett hogy minden méretet külön újragszágolna. Egy csapat számára ez jóval kisebb karbantartási költséget jelent az elemek terén. Különösen az e-kereskedelmi és a márkázási csapatok profitálnak: egy vektorizálás után minden termékoldal, csomagolás és rendezvényelem ugyanazt a alkotást használhatja, és egy színváltoztatás egyetlen forrásfájl karbantartását jelenti.

6. előny: nyílt szabvány érett ökoszisztémával

Az SVG a W3C nyílt szabványa, amelyet minden modern böngésző natívan támogat, és amelyet az olyan tervezőeszközök, mint az Illustrator, a Figma és az Inkscape olvas és ír, szállítói bezárás nélkül. Objektíven véve az SVG-nek is vannak korlátai: nem alkalmas fotóképekhez, a megjelenítés teljesítménye romlik, ha az útvonalak túl összetetté válnak, és a fotókhoz továbbra is JPG vagy WEBP való. A nyílt forrású közösség azonban érett eszközláncot épített az SVG körül — az SVGO a tömörítéshez, ikonkönyvtárak és animációs könyvtárak —, mindegyik készen áll az használatra.

Új az SVG-ben? A Kép → SVG eszközzel alakítsa a bitképeit vektorrá, vagy böngésszön és töltse le az ingyenes vektorelemeket a PolySVG galériában. A kezdéshez olvassa el a Mi az SVG és a A PNG és az SVG közötti különbség útmutatót.