Waarom je logo opslaan als SVG?
SVG is het ideale formaat voor logo's op websites, in apps en voor digitale toepassingen. Het is lichtgewicht, schaalbaar en wordt ondersteund door alle moderne browsers. In deze gids laten we je precies zien hoe je vanuit Adobe Illustrator een optimaal SVG bestand exporteert.
SVG exporteren in 5 stappen
Stap 1: Bereid je ontwerp voor
Zet alle tekst om naar contouren via Tekst > Contouren maken. Verwijder verborgen lagen en ongebruikte elementen. Zorg dat alle objecten op één laag staan of logisch georganiseerd zijn. Controleer of er geen rastereffecten (schaduwen, blur) in je ontwerp zitten, want deze worden als bitmap in de SVG ingesloten.
Stap 2: Pas het artboard aan
Selecteer al je objecten (Ctrl/Cmd+A) en ga naar Object > Artboards > Aanpassen aan illustratiegrenzen. Dit zorgt ervoor dat het artboard strak om je logo past zonder overbodige witruimte. Je kunt ook handmatig het Artboard-gereedschap (Shift+O) gebruiken.
Stap 3: Kies de juiste exportmethode
Ga naar Bestand > Exporteren > Exporteren als. Kies SVG als bestandstype. Je kunt ook Bestand > Opslaan als > SVG gebruiken, maar 'Exporteren als' geeft je meer controle over de uitvoerinstellingen en levert doorgaans een schoner bestand op.
Stap 4: Stel de SVG-opties in
In het SVG-optiescherm: kies SVG-profiel 'SVG 1.1', stel het lettertype in op 'Contouren omzetten', kies 'Presentatie-attributen' bij CSS-eigenschappen. Zet Decimalen op 2 voor een goede balans tussen bestandsgrootte en precisie. Schakel 'Responsief' in als je logo flexibel moet schalen.
Stap 5: Controleer het resultaat
Open het geëxporteerde SVG bestand in een webbrowser om te controleren of alles er correct uitziet. Vergelijk het met je origineel in Illustrator. Let op of kleuren kloppen, vormen intact zijn en het bestand netjes schaalt wanneer je in- en uitzoomt in de browser.
Optimale SVG-exportinstellingen
Voor de beste resultaten gebruik je deze instellingen: SVG-profiel 1.1, CSS-eigenschappen op 'Presentatie-attributen', Decimalen op 2, Codering UTF-8. Schakel 'Illustrator-bewerkingsmogelijkheden behouden' uit om het bestand kleiner te houden. Als je logo geen afbeeldingen bevat, kies dan 'Koppelen' bij afbeeldingslocatie. Voor extra optimalisatie kun je het bestand daarna door SVGO of een vergelijkbaar hulpmiddel halen.
Extra tips voor optimale SVG-export
Gebruik zo min mogelijk ankerpunten voor kleinere bestanden. Vermijd clipping masks waar mogelijk en maak vormen in plaats daarvan met Pathfinder. Gebruik geen transparantie-effecten van Illustrator, maar stel in plaats daarvan de opacity direct in op het object. Groepeer logische elementen samen zodat de SVG-code overzichtelijk blijft. Overweeg om 'SVG-code weergeven' te gebruiken om de code te inspecteren voordat je exporteert.
Veelgestelde vragen
Waarom ziet mijn SVG er anders uit dan in Illustrator?
Dit komt vaak door rastereffecten (schaduwen, blur, verloop met transparantie) die niet goed naar SVG vertaald worden. Zet alle effecten om naar eenvoudige vectorvormen of verwijder ze. Controleer ook of tekst is omgezet naar contouren.
Welk SVG-profiel moet ik kiezen?
Kies SVG 1.1 voor de breedste browsercompatibiliteit. SVG Tiny is bedoeld voor mobiele apparaten met beperkte capaciteit en is voor de meeste toepassingen niet nodig.
Hoe maak ik mijn SVG kleiner?
Verminder het aantal ankerpunten, gebruik hele getallen voor kleuren, verwijder onnodige metadata en gebruik een SVG-optimizer zoals SVGO. In Illustrator kun je 'Pad vereenvoudigen' gebruiken om het aantal punten te verminderen.
Perfect SVG bestand uit Illustrator
Met de juiste instellingen en voorbereiding exporteer je vanuit Illustrator een perfect SVG bestand voor je website. Heb je geen Illustrator of wil je zeker zijn van een optimaal resultaat? Logo in Vector levert je logo als geoptimaliseerd SVG bestand, klaar voor direct gebruik op je website.