De meeste afbeeldingen bestaan uit een raster van gekleurde puntjes. Vergroot je zo’n bestand, dan worden die puntjes zichtbaar en oogt het wazig. Dat is de reden dat je logo op een nieuwe telefoon net niet strak staat.
Er bestaat een ander soort bestand dat dat probleem niet kent. Het slaat namelijk geen puntjes op maar vormen.
Een cirkel wordt bewaard als de opdracht teken een cirkel. Die opdracht kun je op elke grootte uitvoeren.
Voor logo’s en iconen is dat precies wat je wilt. Voor foto’s werkt het niet, en dat is meteen de hele afweging.
Beeld dat uit vormen bestaat en dus op elke grootte scherp blijft.
Wat is SVG?
SVG is een vectorbestand dat beeld opbouwt uit vormen in plaats van beeldpunten. Het bestand bevat instructies en geen plaatje.
Daardoor is het altijd scherp, of je het nu twintig of tweeduizend pixels breed toont. Meer over dat verschil lees je bij pixel.
Waarom dat op moderne schermen uitmaakt
Die schermen gebruiken twee of drie punten waar er vroeger een zat. Een gewone afbeelding heeft dan te weinig informatie.
Een vectorbestand wordt simpelweg opnieuw getekend. Meer daarover lees je bij retina.
Voor foto’s gebruik je het nooit. Een gezicht bestaat niet uit vormen en zou een enorm bestand opleveren.
De grens
Hoe meer detail, hoe minder geschikt. Een vlak logo is ideaal, een gedetailleerde tekening met verlopen niet meer.
Bij twijfel: is het getekend, dan werkt het. Is het gefotografeerd, dan niet.
Wat het je oplevert
Scherpte op elk scherm, en meestal een klein bestand. Een logo van een paar kilobyte is heel normaal.
Dat scheelt in je laadtijd, zeker als het bovenaan je pagina staat. Meer daarover lees je bij pagespeed.
Je kunt de kleuren sturen
Dat is een voordeel dat weinig mensen kennen. Bij het kleuren aanpassen wisselt een icoon van kleur zodra iemand er met de muis overheen gaat.
Dat gaat via code en niet via een tweede bestand. Je hebt dus geen aparte versie nodig per kleur.
Uploaden in WordPress
Standaard staat dat uit, en dat heeft een reden. Zo’n bestand kan code bevatten die in je pagina wordt uitgevoerd.
Het openzetten voor iedereen is dus onverstandig. Zeker als meerdere mensen kunnen uploaden.
Hoe ik het regel
Ik sta het alleen toe voor beheerders en laat de bestanden vooraf opschonen. Dat gaat met een kleine uitbreiding of via het thema.
Vraag je bouwer dat in te richten. Zet het niet zelf open met een willekeurige plugin die je online vindt.
Je logo als vectorbestand krijgen
Vraag het op bij wie je logo heeft ontworpen. Hij heeft het vrijwel zeker liggen, want hij heeft het zo getekend.
Krijg je alleen een klein plaatje aangeleverd, dring dan aan. Dat bestand hoort bij je huisstijl en je hebt het gekocht.
Vergeet de beschrijving niet
Ook een vectorbestand heeft een tekstalternatief nodig. Voorleessoftware kan een vorm niet benoemen.
Geef er dus een naam bij, zie alt-tekst. Bij een logo is de bedrijfsnaam meestal genoeg.
Bewaar je bestanden zelf
Zet je vectorbestanden bij je andere huisstijlbestanden. Bij een nieuwe site of een drukwerkopdracht heb je ze meteen bij de hand.
Is je logo ooit alleen als plaatje gemaakt, dan kan een vormgever het natekenen. Dat is werk van een uur of twee.
Een paar bestanden zonder instelling
Heb je er maar enkele, dan kan je bouwer ze rechtstreeks in je thema plaatsen. Dan hoef je het uploaden helemaal niet open te zetten.
Dat is de veiligste route. Zeker als er meerdere mensen op je site kunnen werken.
Waar het het meest oplevert
Bij kleine elementen met scherpe randen. Een logo, een icoon in je menu of een pictogram bij een knop.
Bij een grote sfeerfoto ziet vrijwel niemand het verschil. Begin dus bij je logo als je moet kiezen.
Meer vragen over SVG
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is SVG?
Wanneer gebruik je SVG en wanneer een gewone afbeelding?
Waarom is mijn logo als SVG scherper?
Kun je SVG uploaden in WordPress?
Is SVG goed voor je laadtijd?
Hoe krijg ik mijn logo als SVG?
Wat is SVG?
Vectorbestanden gebruik je voor je logo, iconen, eenvoudige illustraties, grafieken en schema’s.
Voor foto’s gebruik je het nooit. Een gezicht bestaat niet uit vormen en zou een enorm bestand opleveren.
De grens is simpel: hoe meer detail, hoe minder geschikt. Een vlak logo is ideaal, een gedetailleerde tekening met verlopen niet meer.
Bij twijfel de vuistregel: is het getekend, dan werkt het. Is het gefotografeerd, dan niet.
Ook je favicon kun je zo aanleveren in moderne browsers. Juist bij dat kleine icoontje valt onscherpte het meest op.
Houd de vuistregel aan: is het getekend, dan werkt het, is het gefotografeerd, dan niet.
Je hoeft je bestaande foto’s dus niet om te zetten. Begin bij je logo en je iconen, want daar zit de winst. Zet je bestaande foto’s dus niet om, want dat levert niets op. Begin bij je logo en je iconen. Een gezicht bestaat nu eenmaal niet uit vormen.
Wanneer gebruik je SVG en wanneer een gewone afbeelding?
SVG is een bestandsformaat dat beeld opbouwt uit vormen in plaats van beeldpunten. Het bestand bevat instructies en geen plaatje.
Een cirkel wordt bewaard als de opdracht teken een cirkel. Die opdracht kun je op elke grootte uitvoeren.
Daardoor blijft het altijd scherp, of je het nu twintig of tweeduizend pixels breed toont.
De meeste andere afbeeldingen bestaan uit een raster van gekleurde puntjes. Vergroot je zo’n bestand, dan worden die puntjes zichtbaar en oogt het wazig.
Dat is precies de reden dat je logo op een nieuwe telefoon net niet strak staat. Als vectorbestand speelt dat probleem niet.
Vraag je bouwer of je logo als vectorbestand op je site staat. Dat is in een minuut te controleren.
Het verklaart namelijk waarom je logo op je briefpapier strak staat en op je site net niet. Kijk vooral naar je logo en de iconen in je menu. Daar valt de meeste winst te halen.
Waarom is mijn logo als SVG scherper?
Omdat moderne schermen twee of drie beeldpunten gebruiken waar er vroeger een zat.
Een gewone afbeelding heeft dan te weinig informatie. Het toestel rekt je bestand op en verzint de tussenliggende punten.
Een vectorbestand wordt simpelweg opnieuw getekend, op precies de maat die nodig is. Er valt niets op te rekken.
Daarom blijft het strak op elk toestel, ook op schermen die over vijf jaar op de markt komen.
Bij kleine elementen met scherpe randen valt dat het meest op. Een logo, een icoon in je menu of een pictogram bij een knop.
Bekijk je logo een keer op een nieuwe telefoon en zoom in. Zie je zachte randen, dan is het geen vectorbestand.
Dat blijft ook zo op schermen die er over vijf jaar zijn. Een vectorbestand is toekomstbestendig, een plaatje niet. Vraag je vormgever om het originele bestand als je twijfelt. Hij heeft het vrijwel zeker liggen. Zoom daarvoor in tot het logo je halve scherm vult.
Kun je SVG uploaden in WordPress?
Standaard staat dat uit, en dat heeft een reden. Zo’n bestand kan code bevatten die in je pagina wordt uitgevoerd.
Het openzetten voor iedereen is dus onverstandig. Zeker als meerdere mensen op je site kunnen uploaden.
Ik sta het alleen toe voor beheerders en laat de bestanden vooraf opschonen. Dat gaat met een kleine uitbreiding of via het thema.
Vraag je bouwer dat in te richten. Zet het niet zelf open met een willekeurige plugin die je online vindt.
Heb je maar een paar van deze bestanden, dan kan je bouwer ze ook rechtstreeks in je thema plaatsen. Dan hoef je die instelling helemaal niet aan te passen.
Zet het uploaden niet zelf open met een willekeurige plugin. Laat je bouwer dat inrichten met opschoning erbij.
Heb je maar een paar van deze bestanden, laat ze dan rechtstreeks in je thema zetten. Dan hoeft die instelling helemaal niet aan. Vraag je bouwer om opschoning bij het uploaden. Dat is de reden dat WordPress dit standaard uit heeft staan.
Hoe krijg ik mijn logo als SVG?
Vraag het op bij wie je logo heeft ontworpen. Hij heeft het vrijwel zeker liggen, want hij heeft het zo getekend.
Krijg je alleen een klein plaatje aangeleverd, dring dan aan. Dat bestand hoort bij je huisstijl en je hebt ervoor betaald.
Bewaar het daarna zelf ook, bij je andere huisstijlbestanden. Bij een nieuwe website of een drukwerkopdracht heb je het meteen bij de hand.
Is je logo ooit alleen als plaatje gemaakt, dan kan een vormgever het natekenen. Dat is werk van een uur of twee.
Vergeet ten slotte de tekstbeschrijving niet. Voorleessoftware kan een vorm niet benoemen, dus geef er een naam bij.
Vraag het op bij je vormgever en bewaar het zelf bij je huisstijlbestanden.
Dring aan als je alleen een klein plaatje krijgt. Dat bestand hoort bij je huisstijl en je hebt ervoor betaald. Bewaar het daarna zelf ook bij je huisstijlbestanden. Dan hoef je het bij een volgende opdracht niet opnieuw op te vragen.
Ziet je logo er niet strak uit op je site en weet je niet welk bestand je hebt? Stuur me de link via het formulier hieronder. Ik kijk welk formaat er wordt gebruikt en wat je bij je vormgever zou moeten opvragen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Vectorbestand, vectorafbeelding, scalable vector graphics
