Kaip sukurti SVG su keičiamu, ieškomu tipu

SVG tipas suteikia tas pačias vertingas funkcijas, kurios yra visose „ Adobe Illustrator CC“ sukurtos SVG grafikos aspektuose : keičiamumą, redaguojamumą „Illustrator“ ir vietinį palaikymą visose naršyklėse. Šios funkcijos pačios savaime verčia eksportuoti grafinį turinį, kuriame yra tipas SVG formatu, kai jis skirtas skaitmeninei plėtrai.

Netgi neskaitant pranašumų, kuriuos patiriate, kai naudojate SVG grafikai apskritai, kai kurios specialios funkcijos pasiekiamos įvedus tą grafiką.

Išnaudokite keičiamo, ieškomo tipo vertę

Kaip jau galėjote pastebėti, aš džiaugiuosi, kad SVG tipo, atidaryto naršyklės lange, galima ieškoti naudojant naršyklę. Paprastai šie naršyklės paieškos įrankiai veikia tik su HTML tipu.

Ir SVG tipo galima ne tik ieškoti; vartotojai gali rasti tekstą puslapyje, kopijuoti ir įklijuoti bei ieškoti turinio. Pavyzdžiui, jei sulčių baro lankytojas domisi, ar kopūstų kokteiliuose yra citrinos sulčių, jis gali ieškoti to teksto SVG faile, kaip parodyta čia.

Ieškoma teksto SVG grafinėje naršyklėje „Chrome“.

Arba, jei vartotojas nėra tikras, kas yra kopūstas, jis gali pasirinkti tekstą ir ieškoti apibrėžimo, kaip parodyta.

SVG grafikos tipo pasirinkimas naršyklėje

Norėdami šiek tiek skambinti atgal, galite eksportuoti „Illustrator“ grafiką, apimančią ekranų tipą, kaip PNG, GIF arba JPEG. Tačiau jie nebus keičiami ir neišsaugos tokio tipo funkcionalumo, kaip parodyta ankstesniuose dviejuose paveiksluose.

Optimizuokite tipo funkcionalumą išsaugodami SVG

Netrukus grįšiu prie to, kada ir kaip išsaugoti SVG failus ir eksportuoti į SVG. Tačiau kol mes kalbame apie SVG tipo temą, turite žinoti, kad norėdami, kad SVG tipas veiktų taip, kaip parodyta, turite išsaugoti savo grafiką kaip SVG. Ir jūs turite naudoti konkrečius nustatymus, kad tipas veiktų taip, kaip turėtų, kai SVG vaizdas peržiūrimas naršyklėje.

Norėdami išsaugoti tipą vaizde kaip SVG tipą, atlikite šiuos veiksmus:

1. Kai grafika yra paruošta perduoti žiniatinklio kūrėjui, pasirinkite Failas → Išsaugoti kaip. Eikite į aplanką, kuriame norite išsaugoti failą, ir įveskite failo pavadinimą.

Laikykite failų pavadinimus suderinamus su žiniatinkliu, ty naudokite mažąsias raides ir skaičius, nenaudokite specialiųjų simbolių (išskyrus brūkšnį ir pabraukimą) ir tikrai nenaudokite tarpų.

Jei iš naujo išsaugote failą, kurį jau išsaugojote kitu formatu, galite pasilikti failo pavadinimą ir vietą ir pereiti prie 2 veiksmo.

2. Išskleidžiamajame formato meniu Įrašyti dialogo lange pasirinkite SVG ir spustelėkite Įrašyti.

Atsidaro dialogo langas SVG parinktys.

3. Palikite SVG profilius nustatytus į SVG 1.1 (dabartinė versija, palaikoma visose naršyklėse).

Kitos parinktys nėra labai svarbios tam, ką čia darome, bet trumpai jos yra tokios:

• • Pogrupio parinktis: palikite subrinkinį nustatytą į Nėra. Kitos parinktys neveikia SVG tipui žiniatinkliui.
  • Vaizdo vietos parinktys: šios parinktys taikomos tik tuo atveju, jei į Illustrator failą įdėjote arba susiejote (arba abu) meno kūrinius.
  • CSS ypatybių parinktys: CSS ypatybių parinktis aprašysiu vėliau šiame skyriuje, tačiau trumpas paaiškinimas yra toks, kad jas lemia kūrėjo, kuriam perduodate failus, poreikiai. Išsaugodami tipą kaip SVG, galite naudoti bet kurią CSS ypatybių parinktį.

4. Apatinėje dialogo lango Išplėstinės parinktys skiltyje panaikinkite Išvesti mažiau elementų ir Naudoti elementą tekste kelyje žymėjimą .

Atminkite, kad šios parinktys yra pasirinktos pagal numatytuosius nustatymus. Ši SVG parinkčių dialogo skiltis turėtų atrodyti taip, kaip toliau pateiktame paveikslėlyje.

Išsaugokite SVG grafiką, kad būtų išsaugotos specialios tipo funkcijos.

Panaikinus šių parinkčių pasirinkimą, failo dydis gali šiek tiek padidėti, tačiau panaikinę jų pasirinkimą išsaugosite, kaip atrodo tekstas ir ypatybės, kuriomis giriuosi šiame skyriuje (paieška, kopijavimas ir įklijavimas, paieška naršyklėje ir kitos funkcijos, priklausomai nuo naršymo aplinkos).

Pagal numatytuosius nustatymus yra pažymėtas žymės langelis Responsive. Šis nustatymas nėra labai svarbus norint išsaugoti specialius SVG tipo atributus. Čia, kaip ir daugumos parinkčių atveju, jūsų pasirinkimas priklauso nuo žiniatinklio kūrėjo poreikių. Jei kyla abejonių, palikti pasirinktą Responsive parinktį yra plačiai taikoma išvesties parinktis.

5. Spustelėkite Gerai dialogo lange SVG parinktys, kad išsaugotumėte failą kaip įterpiamąjį SVG.

Keletas pastabų apie SVG tipą:

• Šiuo metu visoms SVG tipo funkcijoms palaikymas šiuo metu vyksta. Pagrindinės funkcijos, kurias čia apžiūrėjau, veikia bet kurioje naršyklėje, tačiau norint palaikyti skirtingus šriftus, žiniatinklio kūrėjo partneris gali šiek tiek pakoreguoti kodą.
• Ar jums įdomu, ar tos puikios SVG teksto pasirinkimo, redagavimo ir paieškos funkcijos taikomos kreivės tekstui? Atsakymas parodytas toliau pateiktame paveikslėlyje. Spoileris: Taip!

SVG failo kelio teksto pasirinkimas „Safari“ naršyklėje

Pridėkite kodo fragmentus prie SVG grafikos

„Illustrator“ niekada nebus niekieno geriausiai įvertintas kodo redaktorius, tačiau jame yra puiki galimybė susieti kodą su SVG failo elementais. Trumpai pažvelkime, kaip pridėti kodo fragmentą, kai norite pridėti nuorodą į SVG grafikos dalį. Toliau pateikiami veiksmai, kaip priskirti „JavaScript“ objektui, todėl objektas veiks kaip nuoroda.

1. Pasirinkę objektą peržiūrėkite SVG interaktyvumo skydelį.

Galite parodyti šį skydelį, jei jis neaktyvus, pasirinkdami Langas → SVG interaktyvumas.

2. Įvykis palikite numatytąjį „Onclick“.

Ši „JavaScript“ komanda atlieka funkciją (padaryti ką nors), kai vartotojas tinklalapyje spusteli pasirinktą objektą.

3. „JavaScript“ laukelyje naudokite šią sintaksę, kad apibrėžtumėte nuorodos tikslą:

window.open("[URL]");

Taigi, pavyzdžiui, jei pateikiate nuorodą į Vikipedijos puslapį apie kopūstus, visa kodo eilutė būtų tokia, kokią turiu paveikslėlyje:

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

4. Išsaugokite „Illustrator“ failą kaip SVG failą.

„JavaScript“ fragmento pridėjimas prie SVG failo, kad grafike būtų sukurta spustelėjama nuoroda.

Failas paruoštas perduoti žiniatinklio kūrėjui. (Arba jei tai kitas jūsų vaidmuo, galite pakeisti skrybėles ir pasiimti failą mėgstamoje kodo rengyklėje, kad integruotumėte jį į žiniatinklio projektą).

Arba galite tiesiog įterpti išsaugotą SVG failą į tinklalapį. Nuoroda nebus elegantiška (pavyzdžiui, kol žiniatinklio dizaineris nepataisys sugeneruoto CSS, joje nebus įprastos nuorodos piktogramos, kai užvesite pelės žymeklį). Bet jis veiks ir tikrai bus tinkamas prototipų kūrimui ir bandymams prieš baigiant kurti tinklalapį.

Nebandykite naudoti Illustrator slice technikos SVG failams išsaugoti. Pjūvių technologija yra pagrįsta rastriniu pagrindu ir nesusijusi su vektorine išvestimi.