Adobe Illustrator Exportalternativ - CSS-tricks

Detta är mindre av ett utdrag och mer av en påminnelse om något jag letar upp ofta. När du skapar SVG-filer i Adobe Illustrator finns det ett par olika metoder för att exportera filerna. Båda metoderna innehåller en handfull alternativ, varav några glömmer jag helt vad de menar och vad man ska välja.

Metod 1: Spara som ...

Du skulle förmodligen inte använda den här metoden för att spara SVG för användning på webben. Detta är till stor del för att spara ett huvuddokument. I själva verket kanske du bara vill spara i Illustrator-formatet direkt. Du skulle använda några av de andra exportalternativen för att exportera till webben.

Det vanligaste sättet att spara en fil som SVG i Adobe Illustrator är att välja File > Save As… alternativet från huvudmenyn.

Illustrator öppnar ett dialogfönster där du frågar vad du ska namnge filen och var du ska spara den. Ännu viktigare, det frågar också vilken typ av fil som ska sparas som, i detta fall SVG. Inte SVG-komprimerad (svgz). Vanligt SVG.

Klicka på knappen Spara så visas en annan uppsättning alternativ. Det är här mitt minne tenderar att svika mig och jag måste leta efter nätet efter svar. Här är en skärmdump av ett perfekt optimalt sätt att spara en SVG-fil i Adobe Illustrator.

• SVG-profiler : Detta ställer in XML-dokumenttyp på den inledande taggen. SVG 1.1 är den senaste versionen, täcker det mest omfattande stödet och är sannolikt det mest lämpliga alternativet. Allt annat är antingen en äldre version eller en delmängd av SVG 1.1 och jag har ännu inte stött på ett problem när jag valde det.
• Typsnitt> Typ : Att välja "Konvertera till disposition" säkerställer att all inskriven text i filen exporteras är vektorvägar snarare än tecken. Glyfer har en chans att inte återges, men vektorbanor är alltid stora tummen upp.
• Alternativ> Bildplacering : Om rasterbilder (läs: JPG.webp, PNG, GIF) används i filen, vill vi välja alternativet "Länk". I annat fall kommer rasterbilden att bäddas in i filen och det suger prestandafördelarna direkt från SVG genom att öka filstorleken för att inkludera de extra tillgångarna. Bättre att referera till dem som länkar och se till att inkludera dessa källfiler i samma katalog som SVG-filen.
• Alternativ> Bildplats> Bevara redigeringsfunktioner för Illustrator : Den här har en enorm inverkan på utdata från SVG-filen. Eftersom du förmodligen sparar en "master" -kopia här, som inte är avsedd för oss på webben, skulle du låta detta vara markerat. Detta kommer att bevara Illustrators egna saker (som guider) nästa gång du öppnar filen. Avmarkerad betyder att sådana saker kommer att tas bort och förloras.
• Avancerade alternativ> CSS-egenskaper : Jag väljer "Presentationsattribut" för den här eftersom den placerar egenskaper (t.ex. fyllningar, streck och sådant) på lägsta specificitetsnivå. Till exempel . Detta utformar elementet, men är väldigt lätt att åsidosätta i CSS.
• Avancerade alternativ> Decimaler : Om du har bläddrat i koden för a , vet du att värdena som anger dessa former kan vara superexakta. Många gånger är de dock för exakta och lägger till den totala storleken på SVG-filen. Eftersom du sannolikt sparar en huvudfil här kan du hålla den ganska hög, eftersom filstorleken inte är mycket bekymmer.
• Avancerade alternativ> Kodning : Jag är inte en buff på UTF-kodning, men att lämna detta på "Unicode UTF-8" garanterar bakåtkompatibilitet. UTF-8-filstorlekar tenderar också att vara mindre än UTF-16, så det är en vinst i sig själv.
• Avancerade alternativ> Responsiv : Om du låter detta vara avmarkerat ställs fasta heightoch widthattribut till SVG. Jag kontrollerar det här alternativet eftersom det låter mig ställa in dessa attribut antingen i koden eller i CSS.

Metod 2: Exportera som

Ett annat sätt att få SVG från Adobe Illustrator är att välja File > Export > Export As… alternativet från huvudmenyn. Det finns dock ett andra sätt att komma dit med hjälp av åtgärdspanelen i Illustrator-arbetsytan.

Det här alternativet är perfekt om du vet att du kommer att använda den här filen direkt på webben och inte planerar att tippa med designen senare. Det ger färre inställningar och ett par alternativ som gör att filen kan optimera filen ytterligare för bättre prestanda. I själva verket är det bästa praxis att göra detta på en kopia av filen snarare än på själva huvudfilen, så det finns en version som kan öppnas och redigeras senare i Illustrator och en annan som är mer lämpad för servering på en produktionswebbplats.

• Styling : Vi täckte den här tidigare i metod 1-inställningarna, men jag väljer “Presentation Attributes” här eftersom det är ett sätt att organisera egenskaper på högsta attribut. Detta lägger till ordning på markeringen, flexibilitet i vår förmåga att utforma efterföljande attribut med CSS och leder ofta till mindre filstorlekar.
• Teckensnitt : Det här är en annan som vi täckte ovan, men genom att välja "Konvertera till konturer" byts tecken för vektorsökvägar för tecken som säkerställer att texten återges korrekt.
• Bilder : Detta är ännu en som vi täckte ovan, men att välja "Länk" förhindrar att bädda in rasterbilder i SVG, vilket gör filen mycket större.
• Objekt-ID : er : Den här inställningen ger Illustrator marschorder för hur man namnge ID: n i markeringen. Du kan berätta det för att namnge ID baserat på hur lagren heter i filen.
• Decimal : Färre decimaler i koden betyder mindre filstorlekar. Att ställa in detta 1är idealiskt och OK i många fall och har ingen märkbar skillnad i designen, men 2är vanligtvis säkert. Hur som helst är det värt att kontrollera hur SVG återges.
• Minify : Ja tack! Detta krossar koden för att minska det vita utrymmet och öka webbprestanda precis som att minifiera CSS.
• Responsiv : Precis som den första metoden är det perfekt att välja det här alternativet eftersom fasta heightoch widthattribut annars skulle placeras på SVG.