Mange af de mest dramatiske ændringer i, hvordan Illustrator bruges , finder sted inden for oversættelse af vektorbilleder til nettet, og det undervurderede SVG-format er nøgleleddet i den proces. SVG-filer opretholder de skattede skalerbarhedsfunktioner i vektorgrafik og understøttes næsten universelt i websteder og webudviklingsmiljøer. Når du forbereder vektorgrafik til nettet, er det vigtigt at undgå Illustrators standardeffekter og i stedet bruge SVG-filtre.
Illustrator kommer med et anstændigt, men minimalistisk sæt SVG-filtre, men her er nogle tips til, hvordan du finder og tilføjer SVG-filtre samt ressourcer til at oprette dine egne SVG-filtre. For dem, der arbejder med web- og app-udviklere, kan du gøre deres liv nemmere og mere produktive ved at tjekke snydearket til udlevering af SVG-kode.
Sådan anvender du SVG-filtre i Illustrator
Når du opretter SVG-filer til skærmbilleder i Illustrator, og du vil anvende effekter (som skygger), bør du anvende dem som SVG-filtre. På den måde bevarer dine SVG-filer uendelig skalerbarhed uden forvrængning.
Følgende trin leder dig gennem anvendelsen af et SVG-filter på grafik i Illustrator:
Vælg det eller de objekter, som du anvender filteret på.
Vælg Effekt→SVG-filtre.
Vælg et filter fra den liste, der vises.
De fleste filtre har beskrivende navne. For eksempel er dem med skygge i navnet drop-shadows, dem med gaussisk i navnet er gaussiske sløringer. Arbejdsgangen er lidt mærkelig og rund, men du skal først vælge et filter for at få adgang til alle tilgængelige muligheder for at anvende et.
Sådan ændres det valgte filter:
- Hold det objekt, som filteret blev anvendt på, markeret, og åbn panelet Udseende ved at vælge Vindue→ Udseende.
- I panelet Udseende skal du klikke på SVG-filteret, der vises i sektionen Fyld i panelet. Panelet Anvend SVG-filter åbnes.
- I panelet Anvend SVG-filter skal du ændre det anvendte filter.
- For at se, hvordan filteret vil se ud, skal du markere afkrydsningsfeltet Preview, som vist på figuren.

Når du har valgt et filter, skal du klikke på OK i panelet Anvend SVG-filter.
Sådan tilføjer du SVG-filtre til Illustrator
Illustrators sæt af SVG-filtre er minimalistisk, men du kan forbedre det ved at designe dine egne filtre eller downloade færdigpakkede sæt SVG-filtre fra onlinekilder. At designe filtre involverer kodning, men det kan lade sig gøre, hvis du er fortrolig med HTML. Jeg anbefaler selvstudiet på w3Schools til oprettelse af SVG-filtre. Eller du kan købe sæt filtre online, og endda finde nogle gode sæt gratis SVG-filtre hos Creatingo .
Når du har købt eller oprettet dine egne SVG-filtre, kan du se, hvordan du installerer dem i Illustrator:
Vælg Effekt→SVG-filtre→Importer SVG-filter.
I dialogboksen, der åbnes, skal du navigere til og dobbeltklikke på den SVG-filterfil, du har oprettet eller downloadet gratis.
Den fil, du leder efter, skal være en SVG-fil (flere filtre er samlet i en enkelt SVG-fil).
Dine nye filtre er nu tilgængelige i undermenuen SVG-filtre.
Vælg Effekt→SVG-filtre for at anvende dine nye filtre på valgte objekter.
Sådan afleverer du SVG-kode fra Illustrator til en udvikler
Ofte bliver den SVG-grafik, du laver i Illustrator, afleveret til spildesignere, animatorer, infografik eller andet output, hvor udviklere vil arbejde med koden bag SVG-grafikken. Som illustrator behøver du ikke vide, hvordan du opretter den kode, men du skal muligvis vide, hvordan du får den og overdrager den til en udvikler. Sådan gør du.
Vejen til eksport af din SVG-grafik som kode går gennem Illustrators Gem-funktioner. Menuen Gem har muligheder (ikke let at finde), der eksporterer din fil som SVG-kode. Du vil sandsynligvis gerne være i realtidskommunikation med din skærmudvikler, mens du genererer den kode, fordi flere muligheder bestemmes af, hvordan den kode vil blive brugt:
Vælg Filer → Gem (eller Gem som, hvis du gemmer en fil igen).
I den dialog, der åbnes, skal du vælge SVG fra menuen Format.
Ignorer SVGZ-filindstillingen, som er til en komprimeret fil, der ikke vises i browsere.
Klik på Gem for at åbne dialogboksen SVG-indstillinger.
Vælg altid SVG 1.1 i rullemenuen SVG-profiler. Andre versioner er forældede.
Hvis du har indlejret eller sammenkædet billeder i din SVG-fil, skal du vælge Integrer fra rullemenuen Billedplaceringer. Rådfør dig dog med din webudvikler om dette valg først.
Vælg Bevar Illustrator-redigeringsmuligheder for at gøre filen redigerbar i Illustrator.
Dette valg øger filstørrelsen, men giver dig mulighed for at arbejde med en enkelt SVG-fil, som du kan redigere, opdatere og dele med webudviklere.
Hvis knappen Flere indstillinger vises, skal du klikke på den for at få adgang til avancerede indstillinger. og foretag dine valg.
I det væsentlige genererer de forskellige muligheder CSS med din fil, der definerer egenskaber på følgende måder. Rådfør dig med din webudvikler-teamkammerat om, hvordan du definerer disse CSS-egenskaber:
- Præsentationsattributter indlejrer styling i SVG-kode. Denne mulighed er den enkleste og standard. Brug dette, hvis du ikke samarbejder med en web- eller appudvikler.
- De to Typografiattributter indstillinger er afhængige af CSS til at styre styling hvor det er muligt.
- Style Elements genererer klassestilvælgere til styling.
- Indstillingen Inkluder ubrugte stilarter genererer kode, der sandsynligvis øger SVG-filstørrelsen uden at tilføje funktionel værdi.
Fravælg de fem afkrydsningsfelter nederst i dialogboksen SVG-indstillinger, medmindre din udvikler-partner anmoder om, at du vælger dem.
Disse muligheder er til højt specialiserede applikationer.
For at generere SVG-kode baseret på de valg, du foretager i dialogboksen SVG-indstilling, skal du klikke på knappen SVG-kode .
Den genererede SVG-kode vises i dit operativsystems teksteditor. Du kan gemme koden som en tekstfil ved hjælp af dit operativsystems teksteditor og aflevere filen til en udvikler.
Når du har genereret kode, skal du klikke på OK for at gemme din fil.
Du kan genåbne og redigere denne fil i Illustrator.