Kuinka luoda SVG-tiedostoja skaalautuvalla, haettavalla tyypillä

SVG-tyyppi tarjoaa samat arvokkaat ominaisuudet kuin Adobe Illustrator CC :llä luodussa SVG-grafiikassa : skaalattavuus, muokattavuus Illustratorissa ja natiivi tuki kaikissa selaimissa. Nämä ominaisuudet itsessään puoltavat tekstiä sisältävän graafisen sisällön vientiä SVG-muodossa, kun se on suunnattu digitaaliseen kehitykseen.

Jopa niiden etujen lisäksi, joita koet, kun käytät SVG:tä grafiikkaan yleensä, joitain erikoisominaisuuksia on saatavana, kun kirjoitat nämä grafiikat.

Hyödynnä skaalautuvan, haettavan tyypin arvoa

Kuten olet ehkä huomannut, olen innoissani siitä, että SVG-tyyppiä selainikkunassa avattaessa voidaan etsiä selaimella. Normaalisti nämä selaimen hakutyökalut toimivat vain HTML-tyypin kanssa.

Ja SVG-tyyppi ei ole vain haettavissa; käyttäjät voivat etsiä tekstiä sivulta, kopioida ja liittää sekä etsiä sisältöä. Jos esimerkiksi mehubaarin vierailija on kiinnostunut siitä, onko lehtikaalipirtelöissä sitruunamehua vai ei, hän voi etsiä tekstiä SVG-tiedostosta, kuten tässä näkyy.

Etsitään tekstiä SVG-kuvasta Chromessa.

Tai jos käyttäjä ei ole varma, mikä helvetin lehtikaali on, hän voi valita tekstin ja etsiä määritelmää kuvan osoittamalla tavalla.

SVG-kuvan tyypin valitseminen selaimessa

Soittaa takaisin hieman, sinä voit viedä Illustrator grafiikkaa, jotka sisältävät tyypin näytöt PNGs, GIF, JPEG. Mutta ne eivät ole skaalautuvia, eivätkä ne säilytä kahdessa edellisessä kuvassa esitettyä tyyppitoimintoa.

Optimoi tyyppitoimintoja tallentamalla SVG-tiedostoja

Palaan pian siihen, milloin ja miten SVG-tiedostoja tallennetaan ja viedään SVG-muotoon. Mutta kun puhumme SVG-tyypistä, sinun on tiedettävä, että saadaksesi SVG-tyypin käyttäytymään esitetyllä tavalla, sinun on tallennettava grafiikkasi SVG-muodossa. Ja sinun on käytettävä tiettyjä asetuksia, jotta tyyppi toimii niin kuin sen pitäisi toimia, kun SVG-kuvaa katsotaan selaimessa.

Voit tallentaa kuvan tyypin SVG-muodossa seuraavasti:

1. Kun grafiikka on valmis luovutettavaksi verkkokehittäjälle, valitse Tiedosto→Tallenna nimellä. Siirry kansioon, johon haluat tallentaa tiedoston, ja anna tiedostonimi.

Pidä tiedostonimet verkkoyhteensopivina, mikä tarkoittaa, että käytä pieniä kirjaimia ja numeroita, älä käytä erikoismerkkejä (paitsi yhdysviiva ja alaviiva) äläkä ehdottomasti käytä välilyöntejä.

Jos tallennat jo tallentamasi tiedoston toiseen muotoon, voit säilyttää tiedostonimesi ja sijaintisi ja siirtyä vaiheeseen 2.

2. Valitse Tallenna-valintaikkunan avattavasta muotovalikosta SVG ja napsauta Tallenna.

SVG-asetukset-valintaikkuna avautuu.

3. Jätä SVG-profiilien arvoksi SVG 1.1 (nykyinen versio, jota kaikki selaimet tukevat.

Muut vaihtoehdot eivät ole kriittisiä sille, mitä teemme täällä, mutta lyhyesti ne ovat seuraavat:

• • Alijoukkoasetus: Jätä osa-asetukseksi Ei mitään. Muut vaihtoehdot eivät ole käytettävissä SVG-tyypillä webille.
  • Kuvan sijainnin valinnat: Nämä asetukset ovat käytettävissä vain, jos olet upottanut tai linkittänyt (tai molemmat) kuvitusta Illustrator-tiedostoosi.
  • CSS-ominaisuuksien asetukset: Kuvaan CSS-ominaisuuksien asetukset myöhemmin tässä luvussa, mutta lyhyt selitys on, että ne määräytyvät sen kehittäjän tarpeiden mukaan, jolle luovutat tiedostot. Kun tallennat tyyppiä SVG-muodossa, voit käyttää mitä tahansa CSS-ominaisuudet.

4. Poista Lisäasetukset-valintaikkunan alaosasta Output vähemmän elementtejä ja Käytä elementtiä tekstissä polulla -valinta .

Huomaa, että nämä vaihtoehdot on valittu oletusarvoisesti. Tämän SVG-asetukset-valintaikkunan osan pitäisi näyttää seuraavalta kuvalta.

SVG-grafiikan tallentaminen erityisten ominaisuuksien säilyttämiseksi.

Näiden vaihtoehtojen valinnan poistaminen saattaa suurentaa tiedostokokoasi hieman, mutta poistamalla valinnan säilytät tekstin ulkoasun ja ominaisuudet, joista olen kerskunut tässä osiossa (hakukyky, kopiointi ja liittäminen, haku selaimessa ja muut ominaisuudet, riippuen selausympäristöstä).

Responsiivinen-valintaruutu on oletusarvoisesti valittuna. Tämä asetus ei ole kriittinen SVG-tyypin erikoisattribuuttien säilyttämiselle. Tässä, kuten useimmissa vaihtoehdoissa, valintasi riippuu verkkokehittäjäsi tarpeista. Jos olet epävarma, Responsive-vaihtoehdon jättäminen valituksi on laajalti sovellettavissa oleva tulostusvaihtoehto.

5. Napsauta OK SVG-asetukset-valintaikkunassa tallentaaksesi tiedoston upotettavana SVG-tiedostona.

Muutama huomautus SVG-tyypistä:

• Tätä kirjoitettaessa kaikkien SVG-tyyppisten ominaisuuksien tuki on työn alla. Tässä käymäni perusominaisuudet toimivat kaikilla selaimilla, mutta eri fonttien tuki saattaa vaatia koodin säätämistä verkkokehittäjäkumppaniltasi.
• Mietitkö, pätevätkö SVG-tekstin hienot valinta-, muokkaus- ja hakuominaisuudet käyrän tekstiin? Vastaus käy ilmi seuraavasta kuvasta. Spoileri: Kyllä!

Tekstin valitseminen polussa SVG-tiedostossa Safari-selaimessa

Lisää koodinpätkiä SVG-grafiikkaan

Illustratorista ei koskaan tule kenenkään parhaita koodieditoria, mutta se sisältää hienon pienen ominaisuuden koodin yhdistämiseen SVG-tiedoston elementteihin. Katsotaanpa nopeasti, kuinka voit lisätä koodinpätkän, kun haluat lisätä linkin SVG-grafiikan osaan. Alla olevissa vaiheissa käydään läpi JavaScriptin määrittäminen objektille, joka saa objektin toimimaan linkkinä.

1. Kun kohde on valittuna, tarkastele SVG-vuorovaikutteisuuspaneelia.

Voit näyttää tämän paneelin, jos se ei ole aktiivinen, valitsemalla Ikkuna→SVG-vuorovaikutus.

2. Jätä Tapahtuman oletusasetukseksi Onclick.

Tämä JavaScript-komento suorittaa toiminnon (saa jotain tapahtumaan), kun käyttäjä napsauttaa valittua objektia verkkosivulla.

3. Määritä linkin kohde JavaScript-ruudussa käyttämällä tätä syntaksia:

window.open("[URL]");

Jos esimerkiksi linkität lehtikaalin Wikipedia-sivulle, koko koodirivi olisi sama kuin kuvassa:

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

4. Tallenna Illustrator-tiedosto SVG-tiedostona.

JavaScript-koodinpätkän liittäminen SVG-tiedostoon napsautettavan linkin luomiseksi grafiikkaan.

Tiedosto on valmis luovutettavaksi verkkokehittäjällesi. (Tai jos se on toinen roolisi, voit vaihtaa hattuja ja poimia tiedoston suosikkikoodieditorissasi integroidaksesi sen verkkoprojektiin).

Vaihtoehtoisesti voit upottaa tallennetun SVG-tiedoston verkkosivulle. Linkki ei ole tyylikäs (ennen kuin web-suunnittelija säätelee luotua CSS:ää, se ei esimerkiksi sisällä tyypillistä linkkikuvaketta, kun se vie hiiren sen päälle). Mutta se toimii, ja se on varmasti huollettavissa prototyyppien tekemiseen ja testaukseen ennen verkkosivun viimeistelyä.

Älä yritä käyttää Illustratorin slice-tekniikkaa SVG-tiedostojen tallentamiseen. Viipaleiden takana oleva tekniikka on rasteripohjaista, eikä se liity vektoripohjaiseen tulosteeseen.