Hur man skapar SVG:er med skalbar, sökbar typ

SVG-typ ger samma värdefulla funktioner som finns i alla aspekter av SVG-grafik skapad i Adobe Illustrator CC : skalbarhet, redigerbarhet i Illustrator och inbyggt stöd i alla webbläsare. Dessa funktioner talar i och för sig för att exportera ditt grafiska innehåll som innehåller typ i SVG-format när det är inriktat på digital utveckling.

Även utöver de fördelar du får när du använder SVG för grafik i allmänhet, finns vissa specialfunktioner tillgängliga när du har skrivit in den grafiken.

Utnyttja värdet av skalbar, sökbar typ

Som du kanske har noterat är jag glad över det faktum att SVG-typ, när den öppnas i ett webbläsarfönster, är sökbar med webbläsaren. Normalt fungerar dessa webbläsarsökverktyg endast med HTML-typ.

Och SVG-typ är inte bara sökbar; användare kan hitta text på en sida, kopiera och klistra in och slå upp innehåll. Till exempel, om en besökare på en juicebar är intresserad av om grönkålshaken har citronsaft eller inte, kan han söka i SVG-filen efter den texten, som visas här.

Söker efter text i en SVG-grafik i Chrome.

Eller för den delen, om en användare inte är säker på vad kale är, kan han välja texten och söka efter en definition, som visas.

Välj typ i en SVG-grafik i en webbläsare

För att ringa tillbaka lite, du kan exportera Illustrator-grafik som inkluderar typ för skärmar som PNG, GIF eller JPEG. Men de kommer inte att vara skalbara och de kommer inte att behålla den typ av funktionalitet som visades i de två föregående figurerna.

Optimera typfunktionaliteten genom att spara SVG:er

Jag återkommer snart till när och hur man sparar SVG-filer och exporterar till SVG. Men medan vi är inne på ämnet SVG-typ, måste du veta att för att få SVG-typen att bete sig på det sätt som visas måste du spara din grafik som en SVG. Och du måste använda specifika inställningar så att typen fungerar som den ska när SVG-bilden visas i en webbläsare.

För att spara text i en bild som SVG-typ, följ dessa steg:

1. Med din grafik redo att lämnas till en webbutvecklare, välj Arkiv→Spara som. Navigera till mappen där du vill spara filen och ange ett filnamn.

Håll filnamn webbkompatibla, vilket innebär att använda gemener och siffror, använd inte specialtecken (förutom bindestreck och understreck), och använd definitivt inte mellanslag.

Om du sparar om en fil som du redan har sparat till ett annat format kan du behålla ditt filnamn och din plats och gå vidare till steg 2.

2. Välj SVG i rullgardinsmenyn för format i dialogrutan Spara och klicka på Spara.

Dialogrutan SVG-alternativ öppnas.

3. Lämna SVG-profilerna inställda på SVG 1.1 (den nuvarande versionen, som stöds av alla webbläsare.

De andra alternativen är inte avgörande för vad vi gör här, men kortfattat är de följande:

• • Alternativ för underinställning: Lämna underinställning inställd på Ingen. De andra alternativen är inte operativa för SVG-typ för webb.
  • Alternativ för bildplats: Dessa alternativ är endast tillämpliga om du har inbäddat eller länkat (eller båda) konstverk i din Illustrator-fil.
  • Alternativ för CSS-egenskaper: Jag beskriver alternativen för CSS-egenskaper längre fram i det här kapitlet, men den korta förklaringen är att de bestäms av behoven hos utvecklaren som du lämnar över filerna till. När du sparar typ som SVG kan du använda något av alternativen för CSS-egenskaper.

4. I den nedre delen av dialogrutan Avancerade alternativ avmarkerar du Output Fewer Elements och Use Element for Text on Path.

Observera att dessa alternativ är valda som standard. Den här delen av dialogrutan SVG-alternativ bör se ut som följande bild.

Spara en SVG-grafik för att bevara specialtyper.

Om du avmarkerar dessa alternativ kan din filstorlek öka något, men genom att avmarkera dem bevarar du hur texten ser ut och egenskaperna som jag har skrytt om i det här avsnittet (sökbarhet, kopiera och klistra in, slå upp i webbläsaren och andra funktioner, beroende på webbläsarmiljön).

Kryssrutan Responsiv är markerad som standard. Denna inställning är inte avgörande för att bevara de speciella attributen för SVG-typ. Här, som med de flesta alternativ, beror ditt val på behoven hos din webbutvecklare. Om du är osäker är att låta alternativet Responsive valts vara ett allmänt tillämpbart utmatningsalternativ.

5. Klicka på OK i dialogrutan SVG-alternativ för att spara filen som en inbäddningsbar SVG.

Några anteckningar om SVG-typ:

• När detta skrivs är stöd för alla funktioner av SVG-typ ett pågående arbete. De grundläggande funktionerna jag har gått igenom här fungerar i vilken webbläsare som helst, men stöd för olika typsnitt kan kräva att din webbutvecklarpartner justerar koden.
• Undrar du om de coola markerings-, redigera- och sökfunktionerna i SVG-text gäller text på en kurva? Svaret avslöjas i följande figur. Spoiler: Ja!

Markera text på en sökväg i en SVG-fil i webbläsaren Safari

Lägg till kodavsnitt till SVG-grafik

Illustrator kommer aldrig att vara någons högst rankade kodredigerare, men den innehåller en cool liten funktion för att associera kod med element i en SVG-fil. Låt oss ta en snabb titt på hur du lägger till ett kodavsnitt när du vill lägga till en länk till en del av en SVG-grafik. Stegen nedan går igenom att tilldela JavaScript till ett objekt som får det objektet att fungera som en länk.

1. Med ett objekt markerat, visa panelen SVG Interactivity.

Du kan visa den här panelen om den inte är aktiv genom att välja Fönster→SVG-interaktivitet.

2. Lämna händelsen som standard, Onclick.

Detta JavaScript-kommando utför en funktion (få något att hända) när en användare klickar på det valda objektet på en webbsida.

3. I JavaScript-rutan använder du den här syntaxen för att definiera ett länkmål:

window.open("[URL]");

Så, till exempel, om du länkade till Wikipedia-sidan om grönkål, skulle hela kodraden vara vad jag har i figuren:

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

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

Bifoga ett JavaScript-utdrag till en SVG-fil för att skapa en klickbar länk i grafiken.

Filen är redo att överlämnas till din webbutvecklare. (Eller om det är din andra roll kan du byta hatt och hämta filen i din favoritkodredigerare för att integrera den i ett webbprojekt).

Alternativt kan du helt enkelt bädda in den sparade SVG-filen på en webbsida. Länken kommer inte att vara elegant (förrän en webbdesigner justerar den genererade CSS, kommer den inte att inkludera en typisk länkikon när den hålls över, till exempel). Men det kommer att fungera, och det kommer definitivt att vara användbart för prototyper och testning innan webbsidan är färdig.

Försök inte använda Illustrators segmentteknik för att spara SVG-filer. Tekniken bakom skivor är rasterbaserad och samverkar inte med vektorbaserad utdata.