Kuidas luua skaleeritava otsitava tüübiga SVG-sid

SVG-tüüp pakub samu väärtuslikke funktsioone, mida leidub kõigis Adobe Illustrator CC-s loodud SVG-graafika aspektides : skaleeritavus, redigeeritavus Illustratoris ja natiivne tugi kõigis brauserites. Need funktsioonid iseenesest väidavad teie graafilise sisu eksportimist, mis sisaldab tüüpi SVG-vormingus, kui see on suunatud digitaalseks arendamiseks.

Isegi lisaks eelistele, mis tekivad, kui kasutate SVG-d graafika jaoks üldiselt, on selle graafika sisestamisel saadaval mõned erifunktsioonid.

Kasutage skaleeritava otsitava tüübi väärtust

Nagu võisite märgata, olen põnevil, et brauseriaknas avatuna on SVG-tüüp brauseris otsitav. Tavaliselt töötavad need brauseri otsingutööriistad ainult HTML-i tüübiga.

Ja SVG tüüp pole mitte ainult otsitav; kasutajad saavad lehelt teksti leida, kopeerida ja kleepida ning sisu otsida. Näiteks kui mahlabaari külastajat huvitab, kas lehtkapsa kokteilides on sidrunimahla või mitte, saab ta otsida seda teksti SVG-failist, nagu siin näidatud.

SVG-graafika teksti otsimine Chrome'is.

Või sel juhul, kui kasutaja pole kindel, mis lehtkapsas on, saab ta valida teksti ja otsida definitsiooni, nagu näidatud.

SVG-graafika tüübi valimine brauseris

Natuke tagasi helistamiseks saate eksportida Illustratori graafikat, mis sisaldab ekraanitüüpe PNG-, GIF- või JPEG-vormingus. Kuid need ei ole skaleeritavad ega säilita kahel eelmisel joonisel näidatud tüüpi funktsioone.

Optimeerige tüübifunktsioone, salvestades SVG-d

Naasen peagi selle juurde, millal ja kuidas SVG-faile salvestada ja SVG-sse eksportida. Kuid kui me käsitleme SVG-tüüpi, peate teadma, et selleks, et SVG-tüüp käituks näidatud viisil, peate salvestama oma graafika SVG-vormingus. Ja peate kasutama konkreetseid sätteid, et tüüp toimiks brauseris SVG-pildi vaatamisel nii, nagu see peaks toimima.

Pildi tüübi salvestamiseks SVG-tüübina toimige järgmiselt.

1. Kui teie graafika on veebiarendajale edastamiseks valmis, valige Fail → Salvesta nimega. Liikuge kausta, kuhu soovite faili salvestada, ja sisestage failinimi.

Hoidke failinimed veebiga ühilduvana, mis tähendab, et kasutage väiketähti ja numbreid, ärge kasutage erimärke (välja arvatud sidekriips ja allkriips) ning kindlasti ärge kasutage tühikuid.

Kui salvestate juba salvestatud faili mõnes muus vormingus uuesti, võite jätta oma failinime ja asukoha alles ning liikuda edasi 2. sammu juurde.

2. Valige dialoogis Salvesta vormingu rippmenüüst SVG ja klõpsake nuppu Salvesta.

Avaneb SVG-suvandite dialoog.

3. Jätke SVG-profiilide olekuks SVG 1.1 (praegune versioon, mida toetavad kõik brauserid.

Ülejäänud valikud ei ole meie tegevuse jaoks kriitilised, kuid lühidalt on need järgmised:

• • Alamhulga valik: jätke alamhulga väärtuseks Puudub. Teised valikud ei tööta SVG-tüüpi veebi jaoks.
  • Pildi asukoha valikud: need suvandid kehtivad ainult siis, kui olete oma Illustratori faili manustatud või linginud (või mõlemad).
  • CSS-i atribuutide valikud: CSS-i atribuutide valikuid kirjeldan selles peatükis hiljem, kuid lühiselgitus on see, et need on määratud selle arendaja vajadustega, kellele failid üle annate. Kui salvestate tüübi SVG-vormingus, saate kasutada mis tahes CSS-i atribuutide suvandeid.

4. Tühjendage dialoogiboksi Täpsemad suvandid alumises jaotises valik Väljuta vähem elemente ja Kasutage elementi tee teksti jaoks.

Pange tähele, et need valikud on vaikimisi valitud . See SVG-suvandite dialoogi jaotis peaks välja nägema nagu järgmine joonis.

SVG-graafika salvestamine, et säilitada eritüüpi funktsioone.

Nende valikute tühistamine võib teie faili suurust veidi suurendada, kuid nende valiku tühistades säilitate teksti välimuse ja omadused, millega olen selles jaotises kiitlenud (otsitavus, kopeerimine ja kleepimine, brauseris otsimine ja muud funktsioonid, olenevalt sirvimiskeskkonnast).

Märkeruut Reagatiivne on vaikimisi märgitud. See säte ei ole SVG-tüüpi eriatribuutide säilitamiseks kriitilise tähtsusega. Siin, nagu enamiku valikute puhul, sõltub teie valik teie veebiarendaja vajadustest. Kui kahtlete, on suvandi Responsive valituks jätmine laialdaselt kasutatav väljundvalik.

5. Faili manustatava SVG-vormingus salvestamiseks klõpsake dialoogiaknas SVG suvandid nuppu OK.

Mõned märkused SVG tüübi kohta:

• Selle kirjutamise seisuga on kõigi SVG-tüüpi funktsioonide tugi pooleli. Põhifunktsioonid, millest siin olen läbi käinud, töötavad igas brauseris, kuid erinevate fontide tugi võib nõuda teie veebiarendaja partnerilt koodi mõningast kohandamist.
• Kas soovite teada, kas need lahedad SVG-teksti valimise, muutmise ja otsimise funktsioonid kehtivad ka kõvera teksti puhul? Vastus on näidatud järgmisel joonisel. Spoiler: Jah!

SVG-faili teel oleva teksti valimine Safari brauseris

Lisage SVG-graafikale koodilõigud

Illustrator ei ole kunagi kellegi kõrgeima reitinguga koodiredaktor, kuid see sisaldab väikest lahedat funktsiooni koodi seostamiseks SVG-faili elementidega. Vaatame lühidalt, kuidas lisada koodilõiku, kui soovite lisada lingi SVG-graafika osale. Alltoodud sammud kirjeldavad JavaScripti määramist objektile, mis paneb selle objekti lingina toimima.

1. Kui objekt on valitud, vaadake paneeli SVG interaktiivsus.

Kui see pole aktiivne, saate selle paneeli kuvada, valides Aken → SVG interaktiivsus.

2. Jätke suvand Sündmus vaikeväärtuseks Onclick.

See JavaScripti käsk täidab funktsiooni (pane midagi juhtuma), kui kasutaja klõpsab valitud objektil veebilehel.

3. Kasutage JavaScripti kastis lingi sihtmärgi määramiseks järgmist süntaksit:

window.open("[URL]");

Näiteks kui lingite lehtkapsas asuvale Wikipedia lehele, oleks kogu koodirida see, mis mul on joonisel:

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

4. Salvestage Illustratori fail SVG-failina.

JavaScripti koodilõigu lisamine SVG-failile, et luua graafikus klõpsatav link.

Fail on teie veebiarendajale üleandmiseks valmis. (Või kui see on teie teine ​​roll, saate muuta mütsi ja valida faili oma lemmikkoodiredaktorisse, et integreerida see veebiprojekti).

Teise võimalusena saate salvestatud SVG-faili lihtsalt veebilehele manustada. Link ei ole elegantne (kuni veebidisainer ei kohanda loodud CSS-i, ei sisalda see näiteks tüüpilist lingiikooni, kui selle kohale hõljub). Kuid see töötab ja seda saab kindlasti kasutada prototüüpide loomiseks ja testimiseks enne veebilehe valmimist.

Ärge proovige SVG-failide salvestamiseks kasutada Illustratori viilutehnikat. Viilude taga olev tehnoloogia on rastripõhine ega haaku vektorpõhise väljundiga.