De praktische beginnershandleiding voor SVG
Hoewel het formaat niet bijzonder nieuw is, worden SVG-afbeeldingen steeds populairder bij het ontwerpen van websites. Alle grote webbrowsers ondersteunen het formaat en SVG verandert de manier waarop we denken over en afbeeldingen weergeven voor het web.
Waarom zijn ze zo populair? En wat is er precies anders aan een SVG-bestand? Vandaag hebben we de antwoorden en al het andere dat u moet weten om aan de slag te gaan met dit bestandstype. (Als een kleine bonus zijn alle afbeeldingen in dit bericht beschikbaar in SVG van Creative Market.)
Verken Envato Elements
Wat is SVG?
Schaalbare vectorafbeeldingen of SVG zijn een op vectoren gebaseerd afbeeldingsformaat dat is ontwikkeld voor het web. (Je kunt meer leren over vector versus rasterformaten in een vorig Design Shack-artikel.)
Het formaat is populairder geworden dankzij high definition-schermen, waar gebruikers elke pixel kunnen zien (als ze bestaan). Omdat SVG een vectorformaat is, wordt de afbeelding op dezelfde manier - en tot in detail - ongeacht de grootte weergegeven.
De opmaaktaal werd in 1999 voor het eerst ontwikkeld door het World Wide Web Consortium, beter bekend als W3C. W3C definieert SVG als "een opmaaktaal voor het beschrijven van tweedimensionale grafische toepassingen en afbeeldingen, en een set gerelateerde grafische scriptinterfaces . ' Het wordt ondersteund door alle moderne browsers - u hoeft zich dus geen zorgen te maken of SVG-bestanden correct worden weergegeven of niet - en werkt ongeacht het apparaattype.
Praktische toepassingen
Dus wat maakt SVG zo populair en waarom gebruiken meer ontwerpers het? Simpelweg omdat het werkt.
SVG-bestanden zijn klein en schaalbaar. Hoewel het formaat het meest geschikt is voor vormen, heeft het een verscheidenheid aan praktische toepassingen. Merklogo's, pictogrammen, gebruikersinterface-elementen en tal van andere ontwerpbits kunnen werken in het SVG-formaat. De grootste bonus is dat het vectoren zijn. Een SVG-afbeelding kan dus op bijna elk formaat worden gebruikt. (Sommige van de kleinste bestanden kunnen slechts zo groot zijn.)
SVG-bestanden zijn ook gemakkelijk te manipuleren en te bedienen. Een SVG kan niet alleen worden opgeslagen als een statische afbeelding, maar u kunt ook interactiviteit en filters toevoegen om de afbeelding nog leuker te maken. (SVG-bestanden kunnen worden geanimeerd en gekleurd.)
Hier zijn een paar praktische toepassingen voor SVG-gebruik:
- Logo's of afbeeldingen
- Als achtergrondafbeelding
- Als object, zoals een knop
- In kaart brengen
- Grafieken of tekeningen
Over het algemeen is SVG het meest geschikt voor afbeeldingen die in de loop van de tijd of per apparaattype kunnen evolueren of veranderen of die animatie of andere dynamische effecten bevatten. Gebruik de indeling voor afbeeldingen zoals logo's, schetsen, vormen, afbeeldingen en grafieken of andere eenvoudige afbeeldingen.
Voordelen van het gebruik van SVG
Dus waarom zou je weggaan van de vertrouwde JPG of GIF naar SVG? Er zijn tal van redenen waarom dit formaat het beste kan worden gebruikt in uw projecten. (En er is zelfs de mogelijkheid om SVG ook voor afdrukken te gebruiken.)
- SVG is een vectorformaat. Dit alleen is belangrijk als je nadenkt over responsive design, waarbij de beeldgrootte vaak verandert op basis van het apparaat. Een SVG is klein genoeg dat één bestand al het werk kan doen en er is geen kwaliteitsverlies op grotere schermen.
- SVG-afbeeldingen en -gedrag worden gedefinieerd met XML, wat betekent dat afbeeldingen kunnen worden geïndexeerd, gescript en gecomprimeerd.
- U kunt bijna alles doen met een SVG-afbeelding die u kunt doen met elke andere afbeelding, zoals een verscheidenheid aan ontwerptechnieken. Het is gemakkelijk om filters, overvloeimodi, bur-effecten, kleur, knippen en maskeren, slagschaduwen en bijna elke andere techniek die je leuk vindt toe te voegen.
- SVG-bestanden zijn toegankelijk.
- SVG werkt met open webstandaarden.
- U kunt SVG maken met op tekst gebaseerde code of met een afbeelding die u tekent. Dit geeft wat vrijheid, afhankelijk van uw behoefte en deskundigheid op verschillende gebieden.
- De bestandsgroottes zijn klein en kunnen worden verkleind. Dit betekent dat afbeeldingen die anders groot zouden kunnen zijn, dat niet zijn, waardoor de laadtijden toenemen. (Altijd een bonus.)
Nadelen van het gebruik van SVG
Je bent waarschijnlijk verkocht op SVG na het lezen van alle voordelen, toch? Maar er zijn ook een paar minpunten om te overwegen.
- Oudere browsers - zoals Internet Explorer 8 of lager - ondersteunen SVG niet. U kunt waarschijnlijk een oplossing vinden (of het kan niet schelen), maar u moet weten dat er gebruikers kunnen zijn die uw afbeeldingen niet zien.
- SVG werkt niet voor complexe afbeeldingen zoals foto's. Het is een formaat dat alleen is ontworpen voor vormen en lijnen.
Wat is de volgende stap voor SVG?
De toekomst van SVG begint net. Als aangenomen mobiel afbeeldingsformaat (en standaard) zal het gebruik en de ontwikkeling van SVG alleen maar blijven groeien.
Volgens W3C is "SVG 2 momenteel in ontwikkeling en zal het nieuwe gebruiksvriendelijke functies aan SVG toevoegen, en nauwer integreren met HTML, CSS en de DOM, en niet meer door alle browsers ondersteunde functies."
Andere toevoegingen worden ook rondgeslingerd. Printhardwarebedrijven zoeken naar manieren om SVG beter te gebruiken voor printprocessen en worden ondersteund door marktleiders als Adobe en Canon. Het gebruik bij mapping en GIS breidt ook uit, waardoor betere mapping- en zoommogelijkheden mogelijk worden.
Wanneer je er echt over nadenkt, is er een bijna eindeloze mogelijkheid om SVG te gebruiken en te implementeren in projecten op internet en in gedrukt ontwerp. (Dat is een van de schoonheden van het op vectoren gebaseerde formaat.)
SVG-bronnen
Nu u wat meer enthousiast bent over SVG en kunt zien waarom en hoe het nuttig kan zijn voor uw projecten, hebben we een lijst met bronnen om u op weg te helpen.
- SVG voor het web exporteren met Adobe Illustrator
- Sluit SVG direct in HTML-pagina's in
- Aan de slag met SVG-videoserie
- SVG-profielen
- CSS-trucs: SVG gebruiken
Gevolgtrekking
Gebruikt u SVG al voor uw projecten? Zo niet, ben je klaar om de wijziging aan te brengen?
SVG groeit bijna dagelijks in populariteit en omdat het een open-source tool is, worden deze veranderingen en vorderingen onmiddellijk voor u gelezen. U bent niet gebonden aan één leverancier of product en kunt afbeeldingen maken die volledig compatibel zijn op het moderne internet.
Stock Foto's Hoffelijkheid van Creatieve Markt .
