Vectorafbeeldingen exporteren in Inkscape voor het web

In deze tutorial laat ik je zien hoe je vectorafbeeldingen die je hebt gemaakt, kunt opslaan in het SVG-formaat (Scalable Vector Graphics). SVG-bestanden zijn bijzonder geschikt voor gebruik op het internet omdat ze weinig opslagruimte vereisen en tot elke grootte kunnen worden geschaald zonder kwaliteitsverlies. Het maakt niet uit of je je bedrijfslogo, een pictogram of een tekening hebt - nadat je je vectorafbeelding in Inkscape hebt gemaakt, zal ik je vertrouwd maken met het opslagproces zodat je je werk optimaal kunt gebruiken voor het web.

Belangrijke informatie

• SVG-bestanden bieden een hoge schaalbaarheid en een kleine bestandsgrootte.
• Inkscape slaat vectorafbeeldingen op in SVG-formaat, dat speciale informatie bevat over lagen en hulplijnen.
• Er zijn verschillende types SVG: de native Inkscape SVG en geoptimaliseerde SVG's, die meer geschikt zijn voor het web.

Stap voor stap instructies

Om je vectorafbeelding op te slaan in SVG-formaat, ga je als volgt te werk:

Ten eerste moet je ervoor zorgen dat je ontwerp is afgerond in Inkscape. Als dit het geval is, klik dan op Bestand in de bovenste menubalk.

Selecteer in het uitklapmenu de optie Opslaan als. Dit opent een nieuw venster waarin je de locatie en het bestandstype kunt selecteren.

Standaard slaat Inkscape op in zijn eigen SVG-formaat, dat informatie bevat over de lagen en structuur van je ontwerp. Voor webgebruik is het echter beter om een geoptimaliseerde versie te gebruiken. Zoek de locatie op je harde schijf waar je het bestand wilt opslaan.

Selecteer normaal SVG of geoptimaliseerd SVG in het vervolgkeuzemenu voor het bestandstype. Selecteer voor de eerste poging normaal SVG.

Geef het bestand een naam, bijvoorbeeld Logo_normal, en bevestig met Opslaan. Dit bestand is nu opgeslagen in normaal SVG-formaat.

Je zal zien dat dit bestand meestal kleiner is dan de Inkscape SVG, die ongeveer 11 KB groot kan zijn. De normale SVG kan zo klein zijn als 6 KB, wat beduidend minder geheugen in beslag neemt.

Herhaal nu het proces door opnieuw te klikken op Bestand en dan Opslaan als, maar selecteer deze keer Geoptimaliseerde SVG.

Hernoem het bestand bijvoorbeeld tot Logo_optimised en sla het op. Je wordt om een aantal opties gevraagd. Hier kun je CSS attributen converteren naar XML attributen en verschillende optimalisatie-instellingen maken. Ik raad je aan de opties te kiezen die je het beste lijken.

Bevestig je keuze en bekijk de nieuwe bestandsgrootte. Vaak zal de geoptimaliseerde versie slechts 4 KB groot zijn. Dit laat zien dat het bestand met deze methode nog verder is gecomprimeerd.

Als je nu de bestanden opent in de browser, zul je zien dat zowel de normale als de geoptimaliseerde SVG er identiek uitzien. Voer de URL's van de bestanden in de adresbalk van je browser in om het resultaat te controleren.

Om de schaalbaarheid te testen, kun je het zoomniveau van de browser aanpassen. Als u bijvoorbeeld inzoomt tot 50% of tot 300%. Je zult merken dat de randen scherp blijven, ongeacht het zoomniveau.

Deze eigenschappen van SVG-bestanden maken ze geschikt voor gebruik op websites. Je kunt er zeker van zijn dat je logo helder en duidelijk wordt weergegeven op alle apparaten, ongeacht hoe groot je het weergeeft.

Door SVG-indeling te gebruiken voor je afbeeldingen, verklein je niet alleen de bestandsgrootte, maar zorg je er ook voor dat de kwaliteit van je ontwerpen op elke resolutie behouden blijft.

Samenvatting

In deze tutorial heb je geleerd hoe je vectorafbeeldingen kunt opslaan in SVG-formaat. Hierdoor kun je je ontwerpen efficiënt gebruiken voor het web en heb je het voordeel van schaalbaarheid en een kleine bestandsgrootte.