Zo doe je dat!

De beste tip voor het gebruik van logo’s & iconen met of zonder transparante achtergrond op jouw WordPress website.

Voor het gebruik van een logo op je website wordt er gangbaar gebruik gemaakt van bijvoorbeeld een PNG (met transparante achtergrond). Het nadeel van een bestand als een PNG is dat het een vaste afmeting heeft, en daardoor op verschillende formaten niet altijd even goed werkt en zelfs wazig oogt. En omdat er tegenwoordig met veel verschillende schermformaten rekening moet worden gehouden (een responsive design), is er een grote kans dat een van je websitebezoekers gebruik maakt van een formaat scherm waarbij die PNG net niet mooi weergegeven wordt. Je design schaalt mooi mee, maar het logo is daar niet voor gemaakt vanwege zijn vaste afmeting.

Van PNG naar SVG

De oplossing hiervoor is het gebruik van SVG (Scalable Vector Graphics) bestanden als logo! Dit is een schaalbaar bestand bestaande uit puur vector lijnen, dit houdt in dat hij zich aanpast aan het scherm waarop de website bezichtigd wordt en dus niet in kwaliteit achteruitgaat. Daarnaast is het bestand ook nog eens erg licht in gewicht, dus fijn voor de (laad)snelheid van je website.

Een PNG weegt een stuk zwaarder dan een SVG, en is doorgaans ook zwaarder dan een JPEG.

Help! Wanneer ik een SVG bestand upload bij media in WordPress geeft hij een melding, wat nu? No problemos: zo opgelost!

 

WordPress ondersteund SVG bestanden vooralsnog niet zelf, maar er zijn wel plugins hiervoor zoals SVG support. Zoek onder plugins > nieuwe plugins > naar SVG Support > installeren > activeren > uploaden maar! Heel simpel!

Hoe krijg je een SVG bestand van jouw logo?

Heb jij geen SVG bestand van jouw logo? Indien je je logo hebt laten ontwerpen door een grafisch vormgever of illustrator kun je aan hen vragen je logo om te laten zetten naar SVG. Indien de originele bewerkingsbestanden (mits opgemaakt in vectoren) aanwezig zijn is dit alleen een kwestie van opnieuw exporteren en vrij vlot realiseerbaar. Heb je alleen je logo in een JPEG of PNG, dan zou hij wellicht opnieuw moeten worden opgemaakt. Hoe snel dit gedaan is hangt af van de complexiteit van je logo. Heb je de bewerkingsbestanden in illustrator (.ai) wel tot je beschikking? Open je bestand in Illustrator > save as > optie ‘SVG (svg)’ in plaats van ‘Adobe illustrator (ai)’. 

Kom je er niet uit? Neem gerust contact op; samen hebben we het vast zo gepiept!

Meer blogs lezen?

 

Ga terug naar de blogpagina om meer interessante artikelen te lezen.  Loop je ergens tegen aan waar je graag een artikel over zou willen lezen? Stuur me gerust een bericht en wie weet kun je jouw onderwerp binnenkort teruglezen op de blog!