Hvordan lage SVG-er med skalerbar, søkbar type

SVG-typen gir de samme verdifulle funksjonene som finnes i alle aspekter av SVG-grafikk laget i Adobe Illustrator CC : skalerbarhet, redigerbarhet i Illustrator og innebygd støtte i alle nettlesere. Disse funksjonene i seg selv argumenterer for eksport av grafisk innhold som inneholder type i SVG-format når det er målrettet for digital utvikling.

Selv utover fordelene du får når du bruker SVG for grafikk generelt, er noen spesialfunksjoner tilgjengelige når du har skrevet inn denne grafikken.

Utnytt verdien av skalerbar, søkbar type

Som du kanskje har lagt merke til, er jeg begeistret for det faktum at SVG-typen, når den åpnes i et nettleservindu, er søkbar med nettleseren. Vanligvis fungerer disse nettlesersøkeverktøyene bare med HTML-type.

Og SVG-typen er ikke bare søkbar; brukere kan finne tekst på en side, kopiere og lime inn og slå opp innhold. For eksempel, hvis en besøkende på en juicebar er interessert i om grønnkålshakene har sitronsaft eller ikke, kan han søke etter den teksten i SVG-filen, som vist her.

Søker etter tekst i en SVG-grafikk i Chrome.

Eller for den saks skyld, hvis en bruker ikke er sikker på hva pokker grønnkål er, kan han velge teksten og søke etter en definisjon, som vist.

Velge type i en SVG-grafikk i en nettleser

For å slå tilbake litt, kan du eksportere Illustrator-grafikk som inkluderer tekst for skjermer som PNG-er, GIF-er eller JPEG-er. Men de vil ikke være skalerbare, og de vil ikke beholde typen funksjonalitet som ble vist i de to foregående figurene.

Optimaliser typefunksjonalitet ved å lagre SVG-er

Jeg kommer snart tilbake til når og hvordan du lagrer SVG-filer og eksporterer til SVG. Men mens vi er på temaet SVG-type, må du vite at for å få SVG-typen til å oppføre seg på den måten som er demonstrert, må du lagre grafikken som en SVG. Og du må bruke spesifikke innstillinger slik at typen fungerer slik den skal når SVG-bildet vises i en nettleser.

Følg disse trinnene for å lagre tekst i et bilde som SVG-type:

1. Med grafikken klar til å overleveres til en webutvikler, velg Fil→Lagre som. Naviger til mappen der du vil lagre filen og skriv inn et filnavn.

Hold filnavn nettkompatible, som betyr bruk små bokstaver og tall, ikke bruk spesialtegn (bortsett fra bindestrek og understrek), og absolutt ikke bruk mellomrom.

Hvis du lagrer en fil du allerede har lagret til et annet format på nytt, kan du beholde filnavnet og plasseringen og gå videre til trinn 2.

2. I formatrullegardinmenyen i Lagre-dialogen velger du SVG og klikker Lagre.

Dialogboksen SVG-alternativer åpnes.

3. La SVG-profilene være satt til SVG 1.1 (gjeldende versjon, støttet av alle nettlesere.

De andre alternativene er ikke kritiske for det vi gjør her, men kort fortalt er de som følger:

• • Alternativ for underinnstilling: La underinnstilling være satt til Ingen. De andre alternativene er ikke operative for SVG-typen for nett.
  • Alternativer for bildeplassering: Disse alternativene gjelder bare hvis du har innebygd eller koblet (eller begge) kunstverk i Illustrator-filen.
  • Alternativer for CSS-egenskaper: Jeg beskriver alternativene for CSS-egenskaper senere i dette kapittelet, men den korte forklaringen er at de bestemmes av behovene til utvikleren du leverer filene til. Når du lagrer type som SVG, kan du bruke alle alternativene for CSS-egenskaper.

4. I den nedre delen av dialogboksen Avanserte alternativer fjerner du merket for Skriv ut færre elementer og Bruk element for tekst på banen.

Merk at disse alternativene er valgt som standard. Denne delen av dialogboksen SVG-alternativer skal se ut som følgende figur.

Lagre en SVG-grafikk for å bevare spesialtypefunksjoner.

Hvis du fjerner valget av disse alternativene, kan det øke filstørrelsen litt, men ved å fjerne merket for dem bevarer du hvordan teksten ser ut og egenskapene jeg har skrytt av i denne delen (søkbarhet, kopier og lim inn, slå opp i nettleseren og andre funksjoner, avhengig av nettlesermiljøet).

Avmerkingsboksen Responsive er valgt som standard. Denne innstillingen er ikke avgjørende for å bevare de spesielle egenskapene til SVG-typen. Her, som med de fleste alternativer, avhenger valget ditt av behovene til webutvikleren din. Når du er i tvil, er det et bredt anvendelig utdataalternativ å la Responsive-alternativet være valgt.

5. Klikk OK i dialogboksen SVG-alternativer for å lagre filen som en innebygd SVG.

Noen få merknader om SVG-type:

• Når dette skrives, er støtte for alle funksjoner av SVG-typen et arbeid som pågår. De grunnleggende funksjonene jeg har gått gjennom her fungerer i alle nettlesere, men støtte for forskjellige fonter kan kreve litt tilpasning av koden av nettutviklerpartneren din.
• Lurer du på om de kule valg-, redigerings- og søkefunksjonene til SVG-tekst gjelder tekst på en kurve? Svaret er avslørt i følgende figur. Spoiler: Ja!

Velge tekst på en bane i en SVG-fil i Safari-nettleseren

Legg til kodebiter i SVG-grafikk

Illustrator vil aldri være noens topprangerte koderedigerer, men den inkluderer en kul liten funksjon for å assosiere kode med elementer i en SVG-fil. La oss ta en rask titt på hvordan du legger til en kodebit når du vil legge til en lenke til en del av en SVG-grafikk. Trinnene nedenfor går gjennom å tilordne JavaScript til et objekt som får det objektet til å fungere som en lenke.

1. Med et objekt valgt, se SVG Interaktivitet-panelet.

Du kan vise dette panelet hvis det ikke er aktivt ved å velge Vindu→SVG-interaktivitet.

2. La hendelse settet til standard, Onclick.

Denne JavaScript-kommandoen utfører en funksjon (får noe til å skje) når en bruker klikker på det valgte objektet på en nettside.

3. I JavaScript-boksen bruker du denne syntaksen til å definere et koblingsmål:

window.open("[URL]");

Så hvis du for eksempel lenket til Wikipedia-siden om grønnkål, vil hele kodelinjen være det jeg har i figuren:

window.open("https://en.wikipedia.org/wiki/Kale");

4. Lagre Illustrator-filen som en SVG-fil.

Legge ved en JavaScript-kodebit til en SVG-fil for å lage en klikkbar lenke i grafikken.

Filen er klar til å overføres til nettutvikleren din. (Eller hvis det er din andre rolle, kan du bytte hatter og plukke opp filen i favorittkodeeditoren for å integrere den i et nettprosjekt).

Alternativt kan du ganske enkelt legge inn den lagrede SVG-filen på en nettside. Linken vil ikke være elegant (inntil en webdesigner justerer den genererte CSS-en, vil den for eksempel ikke inneholde et typisk lenkeikon når den holdes over). Men det vil fungere, og det vil definitivt være brukbart for prototyping og testing før nettsiden er ferdigstilt.

Ikke prøv å bruke Illustrators skiveteknikk for å lagre SVG-filer. Teknologien bak skiver er rasterbasert og passer ikke sammen med vektorbasert utdata.