Com crear SVG amb tipus escalable i cercable

El tipus SVG ofereix les mateixes funcions valuoses que es troben en tots els aspectes dels gràfics SVG creats a Adobe Illustrator CC : escalabilitat, editabilitat a Illustrator i suport natiu en tots els navegadors. Aquestes funcions en si mateixes defensen l'exportació del vostre contingut gràfic que contingui tipus en format SVG quan està orientat al desenvolupament digital.

Fins i tot més enllà dels avantatges que obteniu quan feu servir SVG per a gràfics en general, hi ha algunes funcions especials disponibles quan heu escrit aquests gràfics.

Aprofiteu el valor del tipus escalable i cercable

Com haureu observat, estic entusiasmat pel fet que el tipus SVG, quan s'obre en una finestra del navegador, es pot cercar amb el navegador. Normalment, aquestes eines de cerca del navegador funcionen només amb tipus HTML.

I el tipus SVG no només es pot cercar; els usuaris poden trobar text en una pàgina, copiar i enganxar i cercar contingut. Per exemple, si un visitant d'un bar de sucs està interessat a saber si els batuts de kale tenen suc de llimona o no, pot cercar aquest text al fitxer SVG, tal com es mostra aquí.

Cercant text en un gràfic SVG a Chrome.

O per això, si un usuari no està segur de què dimonis és la kale, pot seleccionar el text i cercar una definició, tal com es mostra.

Seleccionant el tipus en un gràfic SVG en un navegador

Per retrocedir una mica, podeu exportar gràfics d'Illustrator que incloguin tipus per a pantalles com PNG, GIF o JPEG. Però no seran escalables i no conservaran el tipus de funcionalitat de tipus demostrada a les dues figures anteriors.

Optimitzeu la funcionalitat de tipus desant SVG

Tornaré aviat a quan i com desar els fitxers SVG i exportar-los a SVG. Però tot i que estem parlant del tipus SVG, heu de saber que perquè el tipus SVG es comporti de la manera que s'ha demostrat, heu de desar el vostre gràfic com a SVG. I heu d'utilitzar configuracions específiques perquè el tipus actuï de la manera que se suposa quan es visualitza la imatge SVG en un navegador.

Per desar el tipus d'una imatge com a tipus SVG, seguiu aquests passos:

1. Amb el vostre gràfic a punt per lliurar-lo a un desenvolupador web, seleccioneu Fitxer→Desa com a. Navegueu a la carpeta on voleu desar el fitxer i introduïu un nom de fitxer.

Mantingueu els noms de fitxer compatibles amb la web, és a dir, utilitzeu lletres i números minúscules, no feu servir caràcters especials (excepte el guió i el guió baix) i, definitivament, no feu servir espais.

Si torneu a desar un fitxer que ja heu desat en un altre format, podeu conservar el nom i la ubicació del fitxer i passar al pas 2.

2. Al menú desplegable Format del diàleg Desa, trieu SVG i feu clic a Desa.

S'obre el diàleg Opcions SVG.

3. Deixeu els perfils SVG configurats a SVG 1.1 (la versió actual, compatible amb tots els navegadors.

Les altres opcions no són crítiques per al que estem fent aquí, però breument són les següents:

• • Opció de subconjunt: deixeu el subconjunt establert a Cap. Les altres opcions no són operatives per al tipus SVG per al web.
  • Opcions d'ubicació de la imatge: aquestes opcions només són aplicables si heu incrustat o enllaçat (o ambdues) obres d'art al vostre fitxer Illustrator.
  • Opcions de propietats CSS: descric les opcions de propietats CSS més endavant en aquest capítol, però l'explicació breu és que estan determinades per les necessitats del desenvolupador a qui esteu lliurant els fitxers. Quan deseu el tipus com a SVG, podeu utilitzar qualsevol de les opcions de propietats CSS.

4. A la secció inferior del diàleg Opcions avançades, desmarqueu l'opció Emet menys elements i Utilitzeu l'element per al text al camí.

Tingueu en compte que aquestes opcions estan seleccionades per defecte. Aquesta secció del vostre diàleg d'Opcions SVG hauria de semblar a la figura següent.

Desar un gràfic SVG per conservar les característiques de tipus especials.

Si deseleccioneu aquestes opcions, podeu augmentar lleugerament la mida del fitxer, però si les deseleccioneu, conserveu l'aspecte del text i les propietats de les quals m'he presumit en aquesta secció (capacitat de cerca, copiar i enganxar, cercar al navegador i altres funcions, segons l'entorn de navegació).

La casella de selecció Responsive està seleccionada per defecte. Aquesta configuració no és crítica per preservar els atributs especials del tipus SVG. Aquí, com amb la majoria d'opcions, la vostra elecció depèn de les necessitats del vostre desenvolupador web. En cas de dubte, deixar l'opció de resposta seleccionada és una opció de sortida àmpliament aplicable.

5. Feu clic a D'acord al quadre de diàleg Opcions SVG per desar el fitxer com a SVG incrustable.

Algunes notes sobre el tipus SVG:

• En el moment d'escriure aquest article, el suport per a totes les funcions del tipus SVG és un treball en curs. Les característiques bàsiques que he explicat aquí funcionen amb qualsevol navegador, però el suport per a diferents tipus de lletra pot requerir alguns ajustaments del codi per part del vostre soci desenvolupador web.
• Et preguntes si aquestes característiques fantàstiques de selecció, edició i cerca del text SVG s'apliquen al text en una corba? La resposta es revela a la figura següent. Spoiler: Sí!

Selecció de text en un camí en un fitxer SVG al navegador Safari

Afegiu fragments de codi als gràfics SVG

Illustrator no serà mai l'editor de codi millor valorat per ningú, però inclou una petita funció fantàstica per associar codi amb elements d'un fitxer SVG. Fem una ullada ràpida a com afegir un fragment de codi quan voleu afegir un enllaç a una part d'un gràfic SVG. Els passos següents passen per assignar JavaScript a un objecte que farà que aquest objecte funcioni com un enllaç.

1. Amb un objecte seleccionat, visualitzeu el tauler d'interactivitat SVG.

Podeu mostrar aquest panell si no està actiu escollint Finestra → Interactivitat SVG.

2. Deixeu l'Esdeveniment establert al valor predeterminat, Onclick.

Aquesta ordre de JavaScript realitza una funció (fer que passi alguna cosa) quan un usuari fa clic a l'objecte seleccionat en una pàgina web.

3. Al quadre JavaScript, utilitzeu aquesta sintaxi per definir una destinació d'enllaç:

window.open("[URL]");

Així, per exemple, si estiguéssiu enllaçant a la pàgina de la Viquipèdia a kale, la línia completa de codi seria la que tinc a la figura:

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

4. Deseu el fitxer Illustrator com a fitxer SVG.

Adjuntant un fragment de JavaScript a un fitxer SVG per crear un enllaç en què es pot fer clic al gràfic.

El fitxer està a punt per lliurar-lo al vostre desenvolupador web. (O si aquesta és la vostra altra funció, podeu canviar de barret i recollir el fitxer al vostre editor de codi preferit per integrar-lo en un projecte web).

Alternativament, simplement podeu incrustar el fitxer SVG desat en una pàgina web. L'enllaç no serà elegant (fins que un dissenyador web no modifiqui el CSS generat, no inclourà una icona d'enllaç típica quan es passa el cursor per sobre, per exemple). Però funcionarà i definitivament serà útil per a la creació de prototips i les proves abans que finalitzi la pàgina web.

No intenteu utilitzar la tècnica de tall d'Illustrator per desar fitxers SVG. La tecnologia que hi ha darrere de les rodanxes està basada en ràster i no es combina amb la sortida basada en vectors.