Exportopties voor Adobe Illustrator - CSS-trucs

Dit is minder een fragment en meer een herinnering voor iets dat ik vaak opzoek. Wanneer u SVG-bestanden maakt in Adobe Illustrator, zijn er een aantal verschillende methoden om de bestanden te exporteren. Beide methoden bevatten een handvol opties, waarvan ik sommige totaal vergeet wat ze betekenen en wat ik moet selecteren.

Methode 1: Opslaan als ...

U zou deze methode waarschijnlijk niet gebruiken om SVG op te slaan voor gebruik op internet. Dit is grotendeels voor het opslaan van een hoofddocument. In feite wilt u misschien gewoon rechtstreeks opslaan in de Illustrator-indeling. U zou enkele van de andere exportopties gebruiken om voor het web te exporteren.

De meest gebruikelijke manier om een ​​bestand op te slaan als SVG in Adobe Illustrator, is door de File > Save As… optie in het hoofdmenu te kiezen .

Illustrator zal een dialoogvenster openen waarin u wordt gevraagd hoe u het bestand een naam geeft en waar u het opslaat. Wat nog belangrijker is, het vraagt ​​ook welk type bestand moet worden opgeslagen, in dit geval is dit SVG. Niet SVG gecomprimeerd (svgz). Gewoon ol 'SVG.

Klik op de knop Opslaan en er verschijnt nog een set opties. Dit is waar mijn geheugen me de neiging heeft om in de steek te laten en ik moet het web afzoeken naar antwoorden. Hier is een screenshot van een perfect optimale manier om een ​​SVG-bestand op te slaan in Adobe Illustrator.

• SVG-profielen : dit stelt het XML-documenttype in op de openingstag . SVG 1.1 is de nieuwste versie, biedt de meest uitgebreide ondersteuning en is waarschijnlijk de meest geschikte optie. Al het andere is een oudere versie of een subset van SVG 1.1 en ik moet nog een probleem tegenkomen bij het selecteren ervan.
• Lettertypen> Type : Als u "Converteren naar omtrek" selecteert, zorgt u ervoor dat alle getypte tekst in het bestand dat wordt geëxporteerd, vectorpaden zijn in plaats van glyphs. Glyphs hebben een kans om niet te worden weergegeven, maar vectorpaden zijn altijd een grote duim omhoog.
• Opties> Afbeeldingslocatie : Als er rasterafbeeldingen (lees: JPG.webp, PNG, GIF) in het bestand worden gebruikt, dan willen we de optie "Link" selecteren. Anders wordt de rasterafbeelding in het bestand ingesloten en dat zuigt de prestatievoordelen rechtstreeks uit de SVG op door de bestandsgrootte te vergroten om die extra items op te nemen. Het is beter om ze als links te noemen en zorg ervoor dat u die bronbestanden opneemt in dezelfde map als het SVG-bestand.
• Opties> Afbeeldingslocatie> Bewerkingsmogelijkheden van Illustrator behouden : deze heeft een enorme impact op de uitvoer van het SVG-bestand. Aangezien u hier waarschijnlijk een "hoofd" -exemplaar opslaat, niet bedoeld voor ons op internet, laat u dit aangevinkt. Hierdoor blijven eigendommen van Illustrator (zoals handleidingen) behouden voor de volgende keer dat u het bestand opent. Als dit niet is aangevinkt, betekent dit dat dergelijke dingen worden weggenomen en verloren gaan.
• Geavanceerde opties> CSS-eigenschappen : ik selecteer "Presentatie-eigenschappen" voor deze omdat het eigenschappen (bijv. Vullingen, streken en dergelijke) op het laagste niveau van specificiteit plaatst. Bijvoorbeeld . Dit geeft het element een stijl, maar is in CSS heel gemakkelijk te overschrijven.
• Geavanceerde opties> Decimale plaatsen : als u door de code voor a hebt gebladerd , weet u dat de waarden die die vormen specificeren super nauwkeurig kunnen zijn. Vaak zijn die echter te nauwkeurig en dragen ze bij aan de algehele grootte van het SVG-bestand. Aangezien u hier waarschijnlijk een hoofdbestand opslaat, kunt u dit redelijk hoog houden, omdat de bestandsgrootte niet echt een probleem is.
• Geavanceerde opties> Codering : ik ben geen fan van UTF-codering, maar als ik dit op "Unicode UTF-8" laat staan, is compatibiliteit met eerdere versies gegarandeerd. Bovendien zijn UTF-8-bestanden meestal kleiner dan UTF-16, dus dat is een overwinning op zich.
• Geavanceerde opties> Responsief : Als u dit niet aanvinkt, worden vaste heighten widthattributen op de SVG ingesteld. Ik vink deze optie aan omdat ik die attributen in de code of in de CSS kan instellen.

Methode 2: exporteren als

Een andere manier om SVG van Adobe Illustrator te krijgen, is door de File > Export > Export As… optie in het hoofdmenu te kiezen . Er is echter een tweede manier om daar te komen door het deelvenster Handelingen in de Illustrator-werkruimte te gebruiken.

Deze optie is ideaal als u weet dat u dit bestand rechtstreeks op internet gaat gebruiken en niet van plan bent om later aan het ontwerp te sleutelen. Het biedt veel minder instellingen en een aantal opties waarmee het bestand het bestand verder kan optimaliseren voor betere prestaties. In feite is het het beste om dit te doen op een kopie van het bestand in plaats van op het hoofdbestand zelf, dus er is één versie die later in Illustrator kan worden geopend en bewerkt en een andere die geschikter is voor weergave op een productiewebsite.

• Styling : we hebben dit eerder behandeld in de instellingen van Methode 1, maar ik kies hier "Presentation Attributes" omdat het een manier is om eigenschappen te ordenen op attributen van het hoogste niveau. Dit voegt orde toe aan de opmaak, flexibiliteit in ons vermogen om de volgende attributen op te maken met CSS, en leidt vaak tot kleinere bestandsgroottes.
• Lettertype : dit is een ander lettertype dat we hierboven hebben behandeld, maar als u "Converteren naar contouren" kiest, worden glyphs vervangen door vectorpaden voor tekens, wat ervoor zorgt dat de tekst correct wordt weergegeven.
• Afbeeldingen : Dit is nog een andere die we hierboven hebben besproken, maar als u "Link" kiest, wordt voorkomen dat ingesloten rasterafbeeldingen worden ingepakt in de SVG, waardoor het bestand een stuk groter wordt.
• Object-ID's : deze instelling geeft Illustrator-marcherende opdrachten voor het benoemen van ID's in de opmaak. U kunt het vertellen om ID's een naam te geven op basis van hoe de lagen in het bestand worden genoemd.
• Decimaal : Minder decimalen in de code betekent kleinere bestandsgroottes. Dit instellen 1is in veel gevallen ideaal en OK en heeft geen merkbaar verschil in het ontwerp, maar 2is doorgaans veilig. Hoe dan ook, het is de moeite waard om te controleren hoe de SVG wordt weergegeven.
• Verkleinen : Ja graag! Hierdoor wordt de code gekraakt om witruimte te verkleinen en de webprestaties te verbeteren, net zoals het verkleinen van CSS.
• Responsief : Precies zoals bij de eerste methode, is het selecteren van deze optie ideaal omdat fixed heighten widthattributen anders op de SVG zouden worden geplaatst.