Hoe maak ik een SVG bestand?

Misschien is de gemakkelijkste manier om geavanceerde SVG-bestanden te maken, het gebruik van een tool waarmee u waarschijnlijk al bekend bent: Adobe Illustrator. Hoewel het al geruime tijd mogelijk is om SVG-bestanden in Illustrator te maken, heeft Illustrator CC 2015 de SVG-functies toegevoegd en gestroomlijnd. Deze wijzigingen omvatten verschillende exportopties, schoner gegenereerde SVG-code en de mogelijkheid om SVG-bestanden te kopiëren en in een teksteditor te plakken.

SVG is een native bestandsindeling in Adobe Illustrator. Begin met het maken van een illustratie. Hier is een voorbeeld van een berengezicht:



Het SVG-bestand exporteren

U kunt de functie Opslaan als gebruiken om rechtstreeks in de SVG-indeling op te slaan. Kies Bestand > Opslaan als in de menubalk.

U kunt een bestand maken en vervolgens Bestand > Opslaan als kiezen om het bestand op te slaan.

Wijzig in het opslagvenster de indeling in SVG (svg) en klik vervolgens op Opslaan.



SVG-opties

Nadat u op opslaan hebt geklikt, wordt een venster met SVG-opties geopend. Dit venster biedt een verscheidenheid aan opties om mee te stoeien. Voor het grootste deel zijn de standaardopties in orde.

SVG-profielen: laat SVG 1.1 geselecteerd

• Lettertypen: deze twee opties zijn alleen van belang als u tekst in uw afbeelding hebt. Over het algemeen moet u uw type als SVG laten staan ​​in plaats van het naar contouren te converteren. Dit verbetert de bereikbaarheid. Laat deze opties als standaard.
• Afbeeldingslocaties: dit is alleen van belang als uw afbeelding rasterafbeeldingsbestanden bevat. Over het algemeen is dit niet van toepassing bij het maken van afbeeldingen voor het web. Het opnemen van rasterafbeeldingen in uw SVG verslaat het doel om ze in de eerste plaats te gebruiken.
• Behoud van Illustrator-bewerkingsmogelijkheden: u moet dit vakje uitgeschakeld laten. U kunt een ai-bestand altijd opslaan om later te bewerken. U kunt de SVG ook openen in Illustrator. Als u Behoud van bewerkingsmogelijkheden aanvinkt, wordt onnodige informatie aan uw bestand toegevoegd, waardoor het moeilijker te manipuleren wordt in een editor en de grootte groter wordt.

Geavanceerde mogelijkheden

Deze knop biedt verschillende "geavanceerde" opties voor uw SVG-bestand.

• CSS-eigenschappen: dit heeft invloed op hoe de gestileerde eigenschappen in uw SVG-bestand worden geschreven. Hoewel alle vier de opties zullen werken, zijn meestal stijlelementen of stijlkenmerken de beste opties. Voor een volledige vergelijking van de opties, zie Demystifying Adobe Illustrator's Advanced Options for SVG Work
• Ongebruikte grafische stijlen opnemen: Niet aangevinkt
• Decimale plaatsen: dit heeft invloed op de nauwkeurigheid van de cijfers in uw afbeeldingen. Meer decimalen zal resulteren in een iets grotere bestandsgrootte, terwijl het gebruik van weinig decimalen kan leiden tot verlies van detail. Houd er rekening mee dat de effecten van deze instelling over het algemeen heel subtiel zullen zijn.
• Minder elementen uitvoeren: aangevinkt laten
• Element gebruiken voor tekst op pad: aangevinkt laten
• Inclusief snijgegevens: niet aangevinkt
• XMP opnemen: niet aangevinkt
• Responsief: u moet dit vakje aanvinken om de grootte van uw afbeelding responsief aan te passen. Als dit vakje niet is aangevinkt, voegt Illustrator breedte- en hoogtekenmerken toe aan het svg-element in uw bestand. U kunt die attributen natuurlijk altijd later verwijderen.

SVG-codeknop

U kunt op elk moment op deze knop drukken om de tekst van het SVG-bestand te genereren. Het wordt automatisch geopend in de standaard teksteditor. U kunt dit gebruiken om te zien hoe uw uiteindelijke bestand eruit zal zien of zelfs de tekst eruit kopiëren en plakken.

We slaan onze afbeelding van het berengezicht op met behulp van de optie Stijlelementen in de vervolgkeuzelijst CSS-eigenschappen. Alle andere opties zijn standaard.