A weboldal készítésekor a webdesignernek figyelembe kell vennie négy fő pont gondolva a web elrendezésére és látványtervezésére, a szöveg, képek, színek és betűtípusok alkalmazottak.
A négy pont közül ebben a bejegyzésben a képeknek fogunk a legnagyobb jelentőséget tulajdonítani, mivel ezekről lesz szó. hogyan lehet svg fájlokat létrehozni mivel nagyon fontos figyelembe venni a képek minőségét, amelyekkel dolgozik.
Kezelések SVG fájlokkal, nőtt a szakemberek által és nem annyira profik a design világában.
Mi az SVG fájl?
Az SVG a Scalabe Vector Graphics angol rövidítése, spanyolul a Scalabe Vector Graphics. Arról van szó, hogy a nyílt és ingyenes formátumban amellyel 2D grafikát lehet készíteni, kétdimenziós.
Más képformátumokkal ellentétben, mint például a JPG vagy a PNG, Az SVG egy méretezhető formátum, bármennyire is szeretnéd növelni a méretét, hiszen a kép minősége megmarad. Ez az egyik leggyakrabban használt formátum a weboldalakon grafikák vagy vektoros képek elhelyezésére.
Miért használjunk SVG-t?
Ezzel a formátummal a vektoros képek kiváló minőségben maradnak fenn, méretüktől és felbontásuktól függetlenül. Éppen ellenkezőleg, a bitképekből, pixelekből álló képek minősége romlik, ha átméretezik őket. Az SVG formátumot könnyűsége és sokoldalúsága határozza meg.
Egy másik szempont a formátum használata mellett a kis mérete, vagyis ennek köszönhetően növeli az oldalak betöltési sebességét, ahol vannak. Ezeket a képeket a böngésző építi fel, ami segít csökkenteni a szerver terhelését és fogyasztását.
Ezen kívül megtehetik animált SVG képeket hozhat létre mellyel a honlapunkhoz közeli hangulatot kölcsönözhetünk, és felhívjuk az arra látogató nézők figyelmét.
Az SVG egy nyílt formátum, azaz fejlesztéseken és frissítéseken eshet át. Ezen kívül az SVG fájlok vektorszerkesztő programokkal, például Adobe Illustartorral szerkeszthetők anélkül, hogy minősége romlana a kijelzőjén, bármilyen eszközön megtekinthető. Lehetővé teszi, hogy minőségromlás nélkül kinyomtassuk.
Hogyan készítsünk egyszerűen SVG fájlokat
Az SVG-fájlok létrehozásának legegyszerűbb módja, ha ismeri őket, egy grafikai tervezőprogram, például az Illustrator, a Corel Draw stb.
Az Illustrator programra fókuszálva, amikor az SVG formátumot fogjuk használni, figyelembe kell vennünk, hogy használtunk-e színátmeneteket vagy egyéb effektusokat, például művészi hatást, elmosódást, ecsetek, pixelek stb. mivel SVG fájlformátumban mentve rasztereződnek. Javasoljuk az SVG szűrőeffektusok használatát, effektusok hozzáadását, hogy később ne lehessen raszterizálni.
Egy másik tanács, amit adunk, hogy használja egyszerű szimbólumok és útvonalak az illusztrációkban a jobb teljesítmény érdekében az említett formátumból. Kerülje a sok nyomkövetést tartalmazó ecsetek használatát, mert ez nagyobb adatterhelést generál.
SVG fájl létrehozásához ebben a programban, Az első dolog, amit nyitva kell hagynunk, egy üres vászon, ahol dolgozunk az ötletünkön.
A munkánk végeztével a program felett látható eszköztárra lépünk, és kiválasztjuk a fájlt, mentse másként, és megjelenik egy felugró képernyő, ahol meg kell adni a fájl nevét és jelezzük, hogy milyen formátumban szeretnénk menteni. Ebben az utolsó részben kell megjelölnünk az SVG opciót.
Az SVG típus kiválasztásakor megjelenik egy párbeszédpanel, amely különböző lehetőségeket mutat be, amelyeket figyelembe kell venni.
Általános szabály, hogy a táblázatban megjelenő első mezőben az SVG 1.1 profil jelenik meg. A következőkben lehetőséget ad arra, hogy kiválasszuk azokat a forrásokat, amelyekben megadják alapértelmezés szerint az SVG-ben megjelölt szöveg, és egy részhalmaza nincs. Esetünkben ennek a munkának nincs betűkészlete, ha lenne, akkor a részhalmazok opciót none-ról minden piktogramra kellene módosítani.
A következő rész nagyon fontos, ha rámutatunk a beágyazás lehetőséget, a kompozíció képei beépülnek a fájlba, amitől meg fog hízni, ha sok bittérképes képet használunk. Ha viszont megjelöljük a linkelés lehetőségét, akkor óvatosan kell bánnunk a képekkel, ha egy weboldalon használjuk őket, hiszen a képeink fájljait be kell illesztenünk, és ami nagyon fontos, hogy karbantartsuk azokat. pálya. Ennek az opciónak az az előnye, hogy a fájlok sokkal kisebb súlyúak lesznek.
A speciális beállítások részben megtaláljuk a lehetőséget SVG kód, ez az opció jelzi, hogy a fájl hogyan van benne, vagyis a munkánk mögötti kód. Ez az opció elengedhetetlen, ha hozzá szeretné adni az SVG-fájlt, például a személyes WordPress-hez, csak ki kell másolnia a kódot, és közvetlenül hozzá kell adnia a WordPress HTML-szerkesztőjéhez.
Az utolsó tanács, amit adunk, hogy SVG formátumban történő mentéskor ne feledje, hogy ha különböző rajztáblákkal dolgozik, csak az aktív rajztábla marad meg.
Ha tovább akarunk menni, és SVG-effektusokat szeretnénk alkalmazni az illusztrációnkon, az Illustrator effektuskészletet kínál nekünk. Ehhez ki kell választanunk egy objektumot vagy csoportot. Egy effektus alkalmazásához ki kell választanunk az effektus ablakot, az SVG-szűrőket, és alkalmazni kell azokat.
SVG szűrő alkalmazásakor a tervezőprogram megmutat egy ablakot, ahol Megjelenik az alkalmazható szűrők listája., amint kiválasztunk egyet, az Illustrator megmutatja, hogyan néz ki, de raszterizált változatban.
Mint láttad, a Az SVG formátum forradalom volt. A benne rejlő lehetőségeknek és a minőségnek köszönhetően amit kínál, sokkal vonzóbbá teszi az általunk talált weboldalakat a teljesítmény feláldozása nélkül, amennyiben helyesen használják az említett formátumot. Az SVG tökéletes házasság lett a webdesign és a fejlesztés világa között.