Bij het maken van een website moet de webdesigner rekening houden met vier essentiële punten nadenken over de lay-out en het visuele ontwerp van het web, de tekst, afbeeldingen, kleuren en lettertypen medewerkers.
Van deze vier punten is degene die we in dit bericht het meeste belang gaan geven de afbeeldingen, aangezien we het gaan hebben over hoe svg-bestanden te maken het is namelijk erg belangrijk om rekening te houden met de kwaliteit van de afbeeldingen waarmee je werkt.
Behandelingen met SVG-bestanden, is toegenomen door professionals en niet zo professionals in de wereld van design.
Wat is een SVG-bestand?
SVG is de Engelse afkorting voor Scalabe Vector Graphics, in het Spaans Scalable Vector Graphics. Het gaat over een open en vrij formaat waarmee u 2D-afbeeldingen kunt maken, twee dimensies.
In tegenstelling tot andere afbeeldingsformaten, zoals JPG of PNG, SVG is een schaalbaar formaat, ongeacht hoeveel u het formaat wilt vergroten, aangezien de kwaliteit van de afbeelding behouden blijft. Het is een van de meest gebruikte formaten in webpagina's om afbeeldingen of vectorafbeeldingen te plaatsen.
Waarom zouden we SVG gebruiken?
Met dit type formaat behouden vectorafbeeldingen een hoge kwaliteit, ongeacht hun grootte en resolutie. Integendeel, afbeeldingen die zijn opgebouwd uit bitmaps, bestaande uit pixels, verliezen kwaliteit als ze worden verkleind. Het SVG-formaat wordt bepaald door zijn lichtheid en veelzijdigheid.
Een ander voordeel van het gebruik van dit formaat is het kleine formaat, dat wil zeggen dankzij dit verhoogt de laadsnelheid van de pagina's waar ze zijn. Deze afbeeldingen worden gebouwd door de browser, wat helpt om de belasting en het verbruik op de server te verminderen.
Bovendien kunnen ze geanimeerde SVG-afbeeldingen maken waarmee we onze website een sfeer van nabijheid kunnen geven en de aandacht kunnen trekken van de kijkers die deze bezoeken.
SVG is een open formaat, dat wil zeggen kan verbeteringen en updates ondergaan. Bovendien kunnen SVG-bestanden worden bewerkt met vectorbewerkingsprogramma's, bijvoorbeeld Adobe Illustartor zonder kwaliteitsverlies in de weergave, het kan op elk apparaat worden bekeken. Het stelt ons ook in staat om het af te drukken zonder kwaliteitsverlies.
Eenvoudig SVG-bestanden maken
Misschien is de gemakkelijkste manier om SVG-bestanden te maken, als u er bekend mee bent, via een grafisch ontwerpprogramma, zoals Illustrator, Corel Draw, en andere.
Als we ons concentreren op het Illustrator-programma, wanneer we het SVG-formaat gaan gebruiken, moeten we er rekening mee houden of we verlopen of andere effecten hebben gebruikt, zoals het artistieke effect, vervaging, penselen, pixels, enz. omdat ze worden gerasterd wanneer ze worden opgeslagen in SVG-bestandsindeling. Het wordt aanbevolen om SVG-filtereffecten te gebruiken om effecten toe te voegen zodat ze later niet kunnen worden gerasterd.
Een ander advies dat we u geven, is om te gebruiken eenvoudige symbolen en paden in illustraties voor betere prestaties van genoemd formaat. Vermijd het gebruik van penselen met veel tracering, omdat dit een hogere gegevensbelasting genereert.
Om een SVG-bestand in dit programma te maken, Het eerste dat we open moeten hebben is een blanco canvas waar we aan ons idee gaan werken.
Zodra ons werk is voltooid, gaan we naar de werkbalk die boven het programma wordt weergegeven en selecteren we de optie bestand, opslaan als, en een pop-upscherm zal verschijnen waar het ons vertelt om ons bestand een naam te geven en geef het formaat aan waarin we het willen opslaan. Het is in dit laatste gedeelte waar we de SVG-optie moeten markeren.
Bij het selecteren van het SVG-type verschijnt een dialoogvenster met verschillende opties waarmee rekening moet worden gehouden.
Als algemene regel wordt in het eerste veld dat in de tabel verschijnt het SVG 1.1-profiel weergegeven. In het volgende geeft het ons de mogelijkheid om de bronnen te kiezen waarin ze ons geven standaard ingesteld op tekst gemarkeerd in SVG en subset als geen. In ons geval heeft dit werk geen lettertypen, als dat wel het geval was, zou de optie voor subsets moeten worden gewijzigd van geen naar alle pictogrammen.
Het volgende gedeelte is erg belangrijk, als we wijzen op de: insluitoptie, worden de afbeeldingen van de compositie in het bestand opgenomen, waardoor het zwaarder wordt als we veel bitmapafbeeldingen gebruiken. Als we daarentegen de optie om te linken markeren, moeten we voorzichtig zijn met de afbeeldingen als we ze op een website gaan gebruiken, aangezien we de bestanden van onze afbeeldingen moeten opnemen en ook, heel belangrijk, hun pad. Het voordeel van deze optie is dat de bestanden veel minder wegen.
In de sectie geavanceerde opties vinden we de optie om: SVG-code, deze optie geeft aan hoe het bestand erin staat, dat wil zeggen, de code achter ons werk. Deze optie is essentieel als u uw SVG-bestand wilt toevoegen, bijvoorbeeld aan uw persoonlijke WordPress, u hoeft alleen maar de code te kopiëren en deze rechtstreeks in uw WordPress HTML-editor toe te voegen.
Het laatste advies dat we u geven, is dat wanneer u in SVG-indeling opslaat, houd er rekening mee dat als u met verschillende tekengebieden werkt, alleen het actieve tekengebied wordt bewaard.
Als we verder willen gaan en SVG-effecten toepassen op onze illustratie, biedt Illustrator ons een reeks effecten. Om dit te doen, moeten we een object of groep selecteren. Om een effect toe te passen, moeten we het effectenvenster, SVG-filters selecteren en het toepassen.
Bij het toepassen van een SVG-filter toont het ontwerpprogramma ons een venster waarin: Er verschijnt een lijst met filters die kunnen worden toegepast, zodra we er een hebben geselecteerd, laat Illustrator ons zien hoe het eruit ziet, maar in een gerasterde versie.
Zoals je hebt gezien, is de SVG-indeling is een revolutie geweest. Dankzij het potentieel en de kwaliteit die het biedt, maakt de webpagina's die we vinden veel aantrekkelijker zonder in te boeten aan prestaties, zolang ze het genoemde formaat correct gebruiken. SVG is de perfecte unie geworden tussen de wereld van design en webontwikkeling.