Dette er mindre av et snutt og mer av en påminnelse om noe jeg ser ofte opp. Når du oppretter SVG-filer i Adobe Illustrator, er det et par forskjellige metoder for å eksportere filene. Begge metodene inkluderer en håndfull alternativer, hvorav noen glemmer jeg helt hva de betyr og hva jeg skal velge.
Metode 1: Lagre som ...
Du vil sannsynligvis ikke bruke denne metoden for å lagre SVG til bruk på nettet. Dette er i stor grad for å lagre et hoveddokument. Faktisk vil du kanskje bare lagre i Illustrator-formatet direkte. Du vil bruke noen av de andre eksportalternativene for å eksportere til Internett.
Den vanligste måten å lagre en fil som SVG i Adobe Illustrator er å velge File > Save As… alternativet fra hovedmenyen.
Illustrator vil skyte opp et dialogvindu som spør deg hva du skal gi filen navnet og hvor du skal lagre den. Enda viktigere, det spør også hvilken type fil du vil lagre som, i dette tilfellet er SVG. Ikke SVG komprimert (svgz). Vanlig SVG.
Klikk på Lagre-knappen, og et annet sett med alternativer vises. Det er her minnet mitt har en tendens til å svikte meg, og jeg må skure på nettet etter svar. Her er et skjermbilde av en perfekt optimal måte å lagre en SVG-fil på i Adobe Illustrator.
- SVG-profiler : Dette angir XML-dokumenttypen på åpningstaggen
. SVG 1.1 er den nyeste versjonen, dekker den mest omfattende støtten og er sannsynligvis det mest passende alternativet. Alt annet er enten en eldre versjon eller en delmengde av SVG 1.1, og jeg har ennå ikke fått et problem når jeg valgte det. - Skrifttyper> Type : Ved å velge "Konverter til omriss" vil du sikre at all skrevet tekst i filen blir eksportert, er vektorbaner i stedet for tegn. Glyfer har en sjanse for ikke å bli gjengitt, men vektorbaner er alltid store tommelen opp.
- Alternativer> Bildeplassering : Hvis rasterbilder (les: JPG.webp, PNG, GIF) brukes i filen, vil vi velge alternativet "Link". Ellers blir rasterbildet innebygd i filen, og det suger ytelsesfordelene rett ut av SVG ved å øke filstørrelsen for å inkludere de ekstra eiendelene. Bedre å referere til dem som lenker, og sørg for å ta med kildefilene i samme katalog som SVG-filen.
- Alternativer> Bildeplassering> Bevar redigeringsfunksjoner for Illustrator : Denne har en enorm innvirkning på utgangen av SVG-filen. Siden du sannsynligvis lagrer en "master" -kopi her, ikke beregnet for oss på nettet, vil du la dette være merket. Dette vil bevare proprietære ting fra Illustrator (som guider) neste gang du åpner filen. Ukontrollert vil bety at slike ting blir fjernet og tapt.
- Avanserte alternativer> CSS-egenskaper : Jeg velger "Presentasjonsattributter" for denne fordi den plasserer egenskaper (f.eks. Utfyllinger, strek og slikt) på det laveste spesifisitetsnivået. For eksempel
. Dette stiler elementet, men er veldig enkelt å overstyre i CSS. - Avanserte alternativer> Desimaler : Hvis du har surfet koden for a
, vet du at verdiene som spesifiserer disse figurene kan være super presise. Mange ganger er de imidlertid for presise og legger til den totale størrelsen på SVG-filen. Siden du sannsynligvis lagrer en hovedfil her, kan du holde denne ganske høy, fordi filstørrelsen ikke er særlig bekymringsfull. - Avanserte alternativer> Koding : Jeg er ikke en buff på UTF-koding, men å la dette stå på "Unicode UTF-8" sørger for bakoverkompatibilitet. UTF-8-filstørrelser har også en tendens til å være mindre enn UTF-16, så det er en gevinst i seg selv.
- Avanserte alternativer> Responsiv : Hvis du lar dette ikke være merket av, blir det satt faste
heightogwidthattributter på SVG. Jeg sjekker dette alternativet fordi det lar meg angi disse attributtene enten i koden eller i CSS.
Metode 2: Eksporter som
En annen måte å få SVG fra Adobe Illustrator er å velge File > Export > Export As… alternativet fra hovedmenyen. Det er imidlertid en annen måte å komme dit ved å bruke Actions-panelet i Illustrator-arbeidsområdet.
Dette alternativet er ideelt hvis du vet at du skal bruke denne filen direkte på nettet og ikke har tenkt å fikle med designet senere. Det gir mye færre innstillinger og et par alternativer som lar filen optimalisere filen ytterligere for bedre ytelse. Faktisk er det best å gjøre dette på en kopi av filen i stedet for på selve hovedfilen, så det er en versjon som kan åpnes og redigeres senere i Illustrator og en annen som er mer egnet for visning på et produksjonsnettsted.
- Styling : Vi dekket denne tidligere i Metode 1-innstillingene, men jeg velger “Presentasjonsattributter” her fordi det er en måte å organisere egenskaper på høyeste nivå attributter. Dette legger til markering, fleksibilitet i vår evne til å style de påfølgende attributtene med CSS, og fører ofte til mindre filstørrelser.
- Font : Dette er en annen vi dekket over, men ved å velge "Convert to Outlines" byttes tegn mot vektorbaner for tegn som sikrer at tekst gjengis riktig.
- Bilder : Dette er nok en annen vi dekket over, men å velge "Link" forhindrer at rasterbilder integreres i SVG, noe som gjør filen mye større.
- Objekt-ID-er : Denne innstillingen gir Illustrator marsjordre for hvordan du skal navngi ID-er i markeringen. Du kan fortelle den å navngi ID-er basert på hvordan lagene er navngitt i filen.
- Desimal : Færre desimaler i koden betyr mindre filstørrelser. Å sette dette til
1er ideelt og OK i mange tilfeller og vil ikke ha noen merkbar forskjell i designet, men2er vanligvis trygt. Uansett er det verdt å sjekke hvordan SVG blir gjengitt. - Minify : Ja takk! Dette knuser koden for å redusere mellomrom og øke webytelsen omtrent som å minifisere CSS.
- Responsiv : Akkurat som den første metoden, er det ideelt å velge dette alternativet fordi faste
heightogwidthattributter ellers ville bli plassert på SVG.