Adobe Illustrator eksportindstillinger - CSS-tricks

Dette er mindre af et uddrag og mere af en påmindelse om noget, jeg ser ofte op. Når du opretter SVG-filer i Adobe Illustrator, er der et par forskellige metoder til eksport af filerne. Begge metoder inkluderer en håndfuld muligheder, hvoraf nogle glemmer jeg helt, hvad de betyder, og hvad jeg skal vælge.

Metode 1: Gem som ...

Du vil sandsynligvis ikke bruge denne metode til at gemme SVG til brug på internettet. Dette er stort set for at gemme et masterdokument. Faktisk vil du måske bare gemme i Illustrator-formatet direkte. Du bruger nogle af de andre eksportindstillinger til at eksportere til internettet.

Den mest almindelige måde at gemme en fil på som SVG i Adobe Illustrator er at vælge File > Save As… indstillingen fra hovedmenuen.

Illustrator skyder et dialogvindue op, hvor du bliver spurgt, hvad du skal navngive filen, og hvor den skal gemmes. Mere vigtigt er det også at spørge, hvilken type fil der skal gemmes som, i dette tilfælde er SVG. Ikke SVG komprimeret (svgz). Almindelig SVG.

Klik på knappen Gem, så vises et andet sæt valgmuligheder. Det er her min hukommelse har en tendens til at svigte mig, og jeg er nødt til at søge på nettet efter svar. Her er et screenshot af en perfekt optimal måde at gemme en SVG-fil på i Adobe Illustrator.

• SVG-profiler : Dette indstiller XML-dokumenttypen på åbningskoden . SVG 1.1 er den nyeste version, dækker den mest omfattende support og er sandsynligvis den mest egnede løsning. Alt andet er enten en ældre version eller en delmængde af SVG 1.1, og jeg har endnu ikke kørt ind i et problem, når jeg vælger det.
• Skrifttyper> Type : Valg af "Konverter til omrids" vil sikre, at al indtastet tekst i filen eksporteres, er vektorstier snarere end tegn. Glyffer har en chance for ikke at blive gengivet, men vektorstier er altid store tommelfinger op.
• Valg> Billedplacering : Hvis der bruges rasterbilleder (læs: JPG.webp, PNG, GIF) i filen, vil vi vælge "Link". Ellers vil rasterbilledet blive integreret i filen, og det suger ydelsesfordelene lige ud af SVG ved at øge filstørrelsen for at inkludere disse ekstra aktiver. Bedre at henvise til dem som links og sørg for at inkludere disse kildefiler i samme bibliotek som SVG-filen.
• Valg> Billedplacering> Bevar redigeringsfunktioner for Illustrator : Denne har en enorm indvirkning på output fra SVG-filen. Da du sandsynligvis gemmer en "master" -kopi her, som ikke er beregnet til os på internettet, skal du lade dette være markeret. Dette bevarer Illustrators proprietære ting (som guider) til næste gang du åbner filen. Umarkeret betyder, at sådanne ting fjernes og går tabt.
• Avancerede indstillinger> CSS-egenskaber : Jeg vælger "Præsentationsattributter" til denne, fordi den placerer egenskaber (f.eks. Fyld, streger og sådan) på det laveste specificitetsniveau. For eksempel . Dette stiler elementet, men det er meget let at tilsidesætte i CSS.
• Avancerede indstillinger> Decimaler : Hvis du har gennemsøgt koden til a , ved du, at de værdier, der angiver disse former, kan være superpræcise. Mange gange er disse dog for præcise og føjer til den samlede størrelse af SVG-filen. Da du sandsynligvis gemmer en masterfil her, kan du holde den ret høj, fordi filstørrelsen ikke er meget bekymrende.
• Avancerede indstillinger> Kodning : Jeg er ikke en buff på UTF-kodning, men at lade dette være på "Unicode UTF-8" sikrer bagudkompatibilitet. UTF-8-filstørrelser har også en tendens til at være mindre end UTF-16, så det er en gevinst i sig selv.
• Avancerede indstillinger> Responsiv : Hvis dette ikke markeres, indstilles faste heightog widthattributter i SVG. Jeg tjekker denne mulighed, fordi den lader mig indstille disse attributter enten i koden eller i CSS.

Metode 2: Eksportér som

En anden måde at få SVG fra Adobe Illustrator er at vælge File > Export > Export As… indstillingen fra hovedmenuen. Der er dog en anden måde at komme dertil ved hjælp af panelet Handlinger i Illustrator-arbejdsområdet.

Denne mulighed er ideel, hvis du ved, at du vil bruge denne fil direkte på nettet og ikke har planer om at rode med designet senere. Det giver langt færre indstillinger og et par muligheder, der gør det muligt for filen at optimere filen yderligere for bedre ydeevne. Faktisk er det bedste praksis at gøre dette på en kopi af filen snarere end på selve masterfilen, så der er en version, der kan åbnes og redigeres senere i Illustrator, og en anden, der er mere egnet til servering på et produktionswebsted.

• Styling : Vi dækkede denne tidligere i metode 1-indstillingerne, men jeg vælger "Præsentationsattributter" her, fordi det er en måde at organisere egenskaber på det højeste niveau attributter. Dette tilføjer ordre til markeringen, fleksibilitet i vores evne til at style de efterfølgende attributter med CSS og fører ofte til mindre filstørrelser.
• Skrifttype : Dette er en anden, som vi dækkede ovenfor, men ved at vælge "Konverter til konturer" byttes tegn med vektorstier for tegn, hvilket sikrer, at tekst gengives korrekt.
• Billeder : Dette er endnu en, vi dækkede ovenfor, men at vælge "Link" forhindrer, at indlejrede rasterbilleder pakkes i SVG, hvilket gør filen meget større.
• Objekt-id'er : Denne indstilling giver Illustrator marcherende ordrer til, hvordan man navngiver id'er i markeringen. Du kan fortælle det at navngive id'er baseret på, hvordan lagene er navngivet i filen.
• Decimal : Færre decimaler i koden betyder mindre filstørrelser. At indstille dette til 1er i mange tilfælde ideelt og OK og har ikke nogen mærkbar forskel i designet, men 2er typisk sikkert. Uanset hvad er det værd at kontrollere, hvordan SVG gengives.
• Minify : Ja, tak! Dette knuser koden ned for at reducere det hvide rum og øge webydelsen ligesom at minificere CSS.
• Responsiv : Præcis som den første metode, er valg af denne mulighed ideel, fordi faste heightog widthattributter ellers ville blive placeret på SVG.