Hoe (en waarom) SVG het gaat overnemen in 2018

/2019-11-08 21:00:22/
Irving
/Grafiek/

2018 wordt het jaar van SVG. Het afbeeldingsbestandsformaat is de laatste jaren gestaag in populariteit en gebruik gestegen, maar in 2018 zal het echt doorbreken.

Je hebt de combinatie van gebruikers met schermen met hoge resolutie en de behoefte aan een razendsnelle laadtijd om te bedanken. En hoewel de overstap naar SVG misschien een groot probleem klinkt; het is niet.

SVG is gemakkelijk te gebruiken en te implementeren en u hoeft niet echt bestaande bestanden te wijzigen; voeg gewoon nieuwe afbeeldingen toe als SVG. Hier is alles wat u nodig heeft om op de hoogte te zijn als het gaat om SVG.

Ontdek ontwerpbronnen

SVG is gemaakt voor het web

Mozilla beschrijft het als volgt:

SVG is een op XML gebaseerde taal voor het beschrijven van vectorafbeeldingen. Het is in feite opmaak, zoals HTML, behalve dat je veel verschillende elementen hebt om de vormen te definiëren die je in je afbeelding wilt laten verschijnen, en de effecten die je op die vormen wilt toepassen. SVG is voor het markeren van afbeeldingen, niet voor inhoud. Aan het eenvoudigste uiteinde van het spectrum heb je elementen voor het maken van eenvoudige vormen, zoals en. Meer geavanceerde SVG-functies zijn (kleuren transformeren met behulp van een transformatiematrix) (delen van uw vectorafbeelding animeren) en (een masker over de bovenkant van uw afbeelding toepassen.)

De belangrijkste voordelen van SVG voor webontwerpers zijn de mogelijkheid om eenvoudige SVG-renderingen te maken in een code- of teksteditor, terwijl complexe afbeeldingen kunnen worden getekend in een programma zoals Adobe Illustrator; SVG-tekst is toegankelijk; SVG's zijn eenvoudig op te maken en te scripts; en je maakt met een vectorformaat dat goed presteert op elk formaat. SVG-formaten worden ondersteund door moderne browsers, zijn toekomstbestendig en zeer samendrukbaar.

Enkele nadelen zijn dat het ontwerpen van SVG's ingewikkeld kan worden en aanvankelijk iets moeilijker te maken is. Het andere probleem is dat sommige gedegradeerde browsers gewoon niet begrijpen wat ze zijn.

Een beter begrip van SVG nodig? We hebben een beginnershandleiding voor SVG.

Hoe ontwerpers SVG gebruiken

Een van de voordelen van SVG is dat je er veel verschillende dingen mee kunt doen. SVG kan worden gebruikt voor:

Logo's
Achtergronden, patronen en texturen
Animatie
Responsieve afbeeldingen
Iconen

Ontwerpers kunnen SVG gebruiken voor elk element in een ontwerp waarbij een vectorformaat een toepasselijke oplossing is. Het kan onder andere JPG, PNG en GIF vervangen.

Vector formaten regel

De kans is groot dat je meer vectorformaten gaat gebruiken. SVG is resolutie-onafhankelijk. En dat is een enorme bonus, want u weet dat uw afbeeldingen er overal geweldig zullen uitzien.

Het leuke aan het werken met SVG-afbeeldingen is dat u uw workflow niet echt hoeft te wijzigen om ze te implementeren. Als u ontwerpt in software zoals Illustrator of Sketch, is het proces - behalve de uiteindelijke export - identiek. Het enige nadeel is dat je waarschijnlijk alle tekstelementen in contouren in Illustrator wilt veranderen, maar veel mensen doen dat al.

Bij het voorbereiden van SVG-bestanden moet u één ding onthouden. Om ze zo klein mogelijk te houden, moet je alle rommel verwijderen die je niet nodig hebt. (Wis dat plakbord!) SVG op het web heeft een aantal geweldige tips om elementen te tekenen en SVG-bestanden op de best mogelijke manier op te slaan.

Op tekst gebaseerd formaat is goed voor SEO

Het gebruik van SVG wordt ook met een beetje een bonus geleverd voor slimme ontwerpers. Omdat SVG feitelijke tekst in de opmaak gebruikt, kunnen zoekmachines de afbeeldingen beter lezen.

Ja, u kunt alt- informatie toevoegen aan andere afbeeldingen, maar er is slechts zoveel ruimte voor zoekwoorden. Met SVG kunt u meer zoekvriendelijke afbeeldingen maken en gewoon uploaden. Google indexeert alle SVG-inhoud, inclusief zelfstandige bestanden en wanneer SVG's rechtstreeks in HTML zijn ingesloten.

SVG is lichtgewicht

In tegenstelling tot sommige andere vectorgebaseerde bestandstypen die snel zwaar kunnen worden, zijn SVG's code. Code is snel. Het is zo simpel. Nou bijna.

Als het gaat om die mooie vectortekeningen die je als SVG hebt opgeslagen, controleer dan de bestandsgroottes voordat je te ver gaat. Hoewel PNG-formaten bijna exponentieel kunnen groeien wanneer transparantie wordt toegevoegd, groeien SVG's meestal op basis van het aantal paden en vullingen in de afbeelding.

Als de SVG enorm is, overweeg dan om deze te exporteren en een JPG of PNG. (Zelfs als het tegenstrijdig lijkt. De realiteit is dat de meeste ontwerpers een mix van bestandstypen en afbeeldingen zullen blijven gebruiken, maar verwacht meer SVG te gebruiken dan in het verleden.)

Bewerken is eenvoudig

Als u gewend bent om pictogrammen of logo's of wat dan ook te tekenen in vectortekensoftware, verandert er niets aan het bewerkingsproces voor u.

Maar als je SVG schrijft, krijg je een traktatie. Verander gewoon het woord of de coördinaten of kleur in de teksteditor en boem, de wijziging is aangebracht. Het is moeilijk om bewerken eenvoudiger te maken dan dat.

Maak stilstaande of bewegende afbeeldingen met SVG

In tegenstelling tot de meeste andere afbeeldingsindelingen, waarmee u een stilstaand of bewegend beeld kunt hebben, biedt SVG een van beide. U kunt een stilstaand beeld of animatie maken. En het werkt allemaal ongeveer hetzelfde. (Dit handige voorbeeld is een tutorial over hoe je een element langs een SVG-pad kunt animeren!)

Deze kleine voordelen zorgen ervoor dat SVG voorop loopt in de hoofden van ontwerpers. U hoeft geen nieuwe tool of techniek te leren; met SVG heb je al alles in huis wat je nodig hebt.

Gevolgtrekking

Dit is de grote reden waarom 2018 het jaar zal zijn waarin SVG het overneemt: het is praktisch.

Omdat iedereen beeldschermen met een hoge resolutie gebruikt, zijn vectorindelingen echt de juiste keuze. Alles schaalt vlekkeloos en u hoeft zich geen zorgen te maken over pixelvorming. SVG's maken geweldige logo's (statisch of responsief), grafieken en achtergronden, pictogrammen en kleine afbeeldingen en animaties. De bestanden zijn klein en laden snel, en er is geen enorme leercurve als het gaat om het implementeren van SVG's in uw website-ontwerp.

U kunt nu letterlijk beginnen met het gebruik van SVG-afbeeldingen.