När du skapar en webbplats måste webbdesignern ta hänsyn till fyra huvudpunkter tänker på webbens layout och visuella design text, bilder, färger och typsnitt anställda.
Av dessa fyra punkter är den som vi kommer att ge mest betydelse i detta inlägg bilderna, eftersom vi ska prata om hur man skapar svg-filer eftersom det är mycket viktigt att ta hänsyn till kvaliteten på de bilder som du arbetar med.
Behandlingar med SVG-filer, har ökat av proffs och inte så proffs i designvärlden.
Vad är SVG-fil?
SVG är förkortningen på engelska för Scalabe Vector Graphics, på spanska, Scalable Vector Graphics. Det handlar om en öppet och fritt format för att skapa 2D-grafik, två dimensioner.
Till skillnad från andra bildformat, som JPG eller PNG, SVG är ett skalbart format, oavsett hur mycket du vill öka dess storlek, eftersom kvaliteten på bilden kommer att bibehållas. Det är ett av de mest använda formaten på webbsidor för att placera grafik eller vektorbilder.
Varför ska vi använda SVG?
Med denna typ av format kommer vektorbilder att hålla hög kvalitet, oavsett storlek och upplösning. Tvärtom, bilder som består av bitmappar, som består av pixlar, förlorar kvalitet om de ändras i storlek. SVG-formatet definieras av dess lätthet och mångsidighet.
En annan punkt för att använda detta format är dess ringa storlek, det vill säga tack vare detta ökar laddningshastigheten för sidorna där de är. Dessa bilder är byggda av webbläsaren, vilket hjälper till att minska belastningen och förbrukningen på servern.
Dessutom kan de skapa animerade SVG-bilder för att ge vår webbplats en atmosfär av närhet och uppmärksamma tittarna som besöker den.
SVG är ett öppet format, dvs. kan genomgå förbättringar och uppdateringar. Dessutom kan SVG-filer redigeras med vektorredigeringsprogram, till exempel Adobe Illustartor utan att förlora kvalitet i sin visning, den kan ses på vilken enhet som helst. Det låter oss också skriva ut det utan att förlora kvalitet.
Hur man enkelt skapar SVG-filer
Det kanske enklaste sättet att skapa SVG-filer, om du är bekant med dem, är genom ett grafiskt designprogram, som Illustrator, Corel Draw, bland annat.
Med fokus på Illustrator-programmet, när vi ska använda SVG-formatet måste vi ta hänsyn till om vi har använt gradienter eller andra effekter, som den konstnärliga effekten, oskärpa, penslar, pixlar, etc. eftersom de rastreras när de sparas i SVG-filformat. Det rekommenderas att använda SVG-filtereffekter för att lägga till effekter så att de inte kan rastreras senare.
Ett annat råd vi ger dig är att använda enkla symboler och vägar i illustrationer för bättre prestanda av nämnda format. Undvik att använda penslar med mycket spårning eftersom detta genererar en högre databelastning.
För att skapa en SVG-fil i det här programmet, Det första vi måste ha öppet är en tom duk där vi ska arbeta vidare med vår idé.
När vårt arbete är klart, vad vi ska göra är att gå till verktygsfältet som visas ovanför programmet, och vi kommer att välja alternativet fil, spara som, och en popup-skärm visas där den säger åt oss att ge vår fil ett namn och ange i vilket format vi vill spara det. Det är i det här sista avsnittet vi måste markera SVG-alternativet.
När du väljer SVG-typ visas en dialogruta som visar oss olika alternativ som måste beaktas.
Som en allmän regel, i det första fältet som visas i tabellen, visas SVG 1.1-profilen. I det följande ger det oss möjlighet att välja de källor som de ger oss som standard är text markerad i SVG och deluppsättning som ingen. I vårt fall har det här verket inga teckensnitt, om det hade det skulle alternativet för delmängder behöva ändras från ingen till alla piktogram.
Följande avsnitt är mycket viktigt, om vi påpekar bädda in, kommer bilderna av kompositionen att inkorporeras i filen, vilket gör att den går upp i vikt om vi använder många bitmappsbilder. Om vi däremot markerar alternativet att länka, måste vi vara försiktiga med bilderna om vi ska använda dem på en webbplats, eftersom vi måste inkludera filerna till våra bilder, och även, mycket viktigt, underhålla deras väg. Fördelen med detta alternativ är att filerna kommer att väga mycket mindre.
I avsnittet för avancerade alternativ hittar vi alternativet att SVG-kod, det här alternativet indikerar hur filen är inuti, det vill säga koden bakom vårt arbete. Det här alternativet är viktigt om du vill lägga till din SVG-fil, till exempel till din personliga WordPress, du behöver bara kopiera koden och lägga till den direkt i din WordPress HTML-redigerare.
Det sista rådet vi ger dig är att när du sparar i SVG-format, tänk på att om du arbetar med olika ritytor kommer bara den aktiva ritytan att behållas.
Om vi vill gå längre och tillämpa SVG-effekter på vår illustration, erbjuder Illustrator oss en uppsättning effekter. För att göra detta måste vi välja ett objekt eller en grupp. För att tillämpa en effekt måste vi välja effektfönstret, SVG-filter och tillämpa det.
När du använder ett SVG-filter visar designprogrammet oss ett fönster var En lista över filter som kan användas visas., när vi väl har valt en visar Illustrator oss hur det ser ut, men i en rastrerad version.
Som du har sett är SVG-formatet har varit en revolution. Tack vare dess potential och kvaliteten som den erbjuder, gör webbsidorna som vi finner mycket mer attraktiva utan att ge avkall på prestanda, så länge de använder detta format korrekt. SVG har blivit det perfekta äktenskapet mellan världen av webbdesign och utveckling.