Sådan opretter du SVGer med skalerbar, søgbar type

SVG-typen giver de samme værdifulde funktioner, som findes i alle aspekter af SVG-grafik oprettet i Adobe Illustrator CC : skalerbarhed, redigerbarhed i Illustrator og indbygget understøttelse i alle browsere. Disse funktioner argumenterer i sig selv for at eksportere dit grafiske indhold, der indeholder type i SVG-format, når det er målrettet til digital udvikling.

Selv ud over de fordele, du opnår, når du bruger SVG til grafik generelt, er nogle specielle funktioner tilgængelige, når du har indtastet den grafik.

Udnyt værdien af ​​skalerbar, søgbar type

Som du måske har bemærket, er jeg begejstret for, at SVG-typen, når den åbnes i et browservindue, er søgbar med browseren. Normalt fungerer disse browsersøgeværktøjer kun med HTML-typen.

Og SVG-typen er ikke kun søgbar; brugere kan finde tekst på en side, kopiere og indsætte og slå indhold op. For eksempel, hvis en besøgende på en juicebar er interesseret i, om grønkålshakene har citronsaft eller ej, kan han søge i SVG-filen efter den tekst, som vist her.

Søger efter tekst i en SVG-grafik i Chrome.

Eller for den sags skyld, hvis en bruger ikke er sikker på, hvad pokker grønkål er, kan han vælge teksten og søge efter en definition, som vist.

Valg af type i en SVG-grafik i en browser

Hvis du vil ringe tilbage lidt, du kan eksportere Illustrator-grafik, der inkluderer type til skærme som PNG, GIF eller JPEG. Men de vil ikke være skalerbare, og de vil ikke bibeholde den type funktionalitet, der er vist i de foregående to figurer.

Optimer typefunktionalitet ved at gemme SVG'er

Jeg vender snart tilbage til, hvornår og hvordan man gemmer SVG-filer og eksporterer til SVG. Men mens vi er på emnet SVG-type, skal du vide, at for at få SVG-typen til at opføre sig som vist, skal du gemme din grafik som en SVG. Og du skal bruge specifikke indstillinger, så typen opfører sig, som den skal, når SVG-billedet ses i en browser.

Følg disse trin for at gemme tekst i et billede som SVG-type:

1. Med din grafik klar til aflevering til en webudvikler, vælg Filer→Gem som. Naviger til den mappe, hvor du vil gemme filen, og indtast et filnavn.

Hold filnavne webkompatible, hvilket betyder brug små bogstaver og tal, brug ikke specialtegn (undtagen bindestreg og understregning), og brug absolut ikke mellemrum.

Hvis du gemmer en fil, du allerede har gemt, i et andet format igen, kan du beholde dit filnavn og din placering og gå videre til trin 2.

2. Vælg SVG i formatrullemenuen i dialogboksen Gem, og klik på Gem.

Dialogboksen SVG-indstillinger åbnes.

3. Lad SVG-profilerne være indstillet til SVG 1.1 (den aktuelle version, understøttet af alle browsere.

De andre muligheder er ikke kritiske for det, vi laver her, men kort fortalt er de følgende:

• • Indstilling af underindstilling: Lad underindstilling være indstillet til Ingen. De andre muligheder er ikke operative for SVG-typen til web.
  • Indstillinger for billedplacering: Disse muligheder gælder kun, hvis du har indlejret eller sammenkædet (eller begge) illustrationer i din Illustrator-fil.
  • Indstillinger for CSS-egenskaber: Jeg beskriver mulighederne for CSS-egenskaber senere i dette kapitel, men den korte forklaring er, at de er bestemt af behovene hos den udvikler, som du afleverer filerne til. Når du gemmer type som SVG, kan du bruge enhver af CSS-egenskaberne.

4. I den nederste del af dialogboksen Avancerede indstillinger skal du fravælge Output Færre elementer og Brug element til tekst på sti.

Bemærk, at disse muligheder er valgt som standard. Denne sektion af din SVG-indstillingsdialog skal se ud som den følgende figur.

Gemmer en SVG-grafik for at bevare specialtypefunktioner.

Hvis du fravælger disse indstillinger, kan du øge din filstørrelse en smule, men ved at fravælge dem bevarer du, hvordan tekst ser ud, og de egenskaber, som jeg har pralet med i dette afsnit (søgbarhed, kopier-og-indsæt, slå op i browser og andre funktioner, afhængigt af browsermiljøet).

Afkrydsningsfeltet Responsive er markeret som standard. Denne indstilling er ikke afgørende for at bevare de særlige attributter for SVG-typen. Her, som med de fleste muligheder, afhænger dit valg af din webudviklers behov. Når du er i tvivl, er det en bredt anvendelig outputmulighed at lade den Responsive-indstilling være valgt.

5. Klik på OK i dialogboksen SVG-indstillinger for at gemme filen som en indlejrbar SVG.

Et par bemærkninger om SVG-type:

• Når dette skrives, er understøttelse af alle funktioner af SVG-typen et igangværende arbejde. De grundlæggende funktioner, jeg har gennemgået her, fungerer i enhver browser, men understøttelse af forskellige skrifttyper kan kræve en vis tilpasning af koden af ​​din webudviklerpartner.
• Undrer du dig over, om de seje valg-, redigerings- og søgefunktioner i SVG-tekst gælder for tekst på en kurve? Svaret afsløres i følgende figur. Spoiler: Ja!

Markering af tekst på en sti i en SVG-fil i Safari-browseren

Tilføj kodestykker til SVG-grafik

Illustrator vil aldrig være nogens topbedømte kodeeditor, men den indeholder en cool lille funktion til at forbinde kode med elementer i en SVG-fil. Lad os tage et hurtigt kig på, hvordan du tilføjer et kodestykke, når du vil tilføje et link til en del af en SVG-grafik. Trinene nedenfor går gennem tildeling af JavaScript til et objekt, der får det objekt til at fungere som et link.

1. Med et objekt valgt, se SVG-interaktivitetspanelet.

Du kan få vist dette panel, hvis det ikke er aktivt, ved at vælge Vindue→SVG-interaktivitet.

2. Lad hændelsen være indstillet til standard, Onclick.

Denne JavaScript-kommando udfører en funktion (få noget til at ske), når en bruger klikker på det valgte objekt på en webside.

3. Brug denne syntaks i JavaScript-feltet til at definere et linkmål:

window.open("[URL]");

Så hvis du for eksempel linkede til Wikipedia-siden om grønkål, ville den fulde kodelinje være, hvad jeg har i figuren:

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

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

Vedhæftning af et uddrag af JavaScript til en SVG-fil for at oprette et klikbart link i grafikken.

Filen er klar til at overdrage til din webudvikler. (Eller hvis det er din anden rolle, kan du skifte hatte og hente filen i din foretrukne kodeeditor for at integrere den i et webprojekt).

Alternativt kan du blot integrere den gemte SVG-fil på en webside. Linket vil ikke være elegant (indtil en webdesigner justerer den genererede CSS, vil det ikke inkludere et typisk linkikon, når det f.eks. holdes over). Men det vil fungere, og det vil helt sikkert være brugbart til prototyping og test, før websiden er færdiggjort.

Forsøg ikke at bruge Illustrators udsnitsteknik til at gemme SVG-filer. Teknologien bag udsnit er rasterbaseret og passer ikke sammen med vektorbaseret output.