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ą.
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.
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:
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ą:
SVG failo kelio teksto pasirinkimas „Safari“ naršyklėje
„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.
Pagrindinės formos, tokios kaip kvadratai ir apskritimai, yra būtinos Adobe Illustrator. Sužinokite, kaip jas kurti efektyviau ir optimizuokite savo dizaino įgūdžius!
Sužinokite, kaip efektyviai sujungti sluoksnius „Photoshop CS6“, kad optimizuotumėte failo dydį ir pagerintumėte darbo efektyvumą.
Sužinokite apie pagrindinius „Illustrator CC“ formos įrankius, tokius kaip stačiakampiai, elipsės, daugiakampiai ir žvaigždės, ir kaip juos efektyviai naudoti.
Sužinokite, kaip „Illustrator“ pritaikyti skaidrumą SVG grafikai. Sužinokite, kaip išvesti SVG su skaidriu fonu ir pritaikyti skaidrumo efektus.
Importavę vaizdus į „Adobe XD“, neturėsite daug redagavimo valdymo galimybių, tačiau galite keisti vaizdų dydį ir pasukti juos taip, kaip darytumėte bet kurią kitą formą. Taip pat galite lengvai apvalinti importuoto vaizdo kampus naudodami kampinius valdiklius. Vaizdų užmaskavimas Nustatydami uždarą formą […]
Kai turite tekstą Adobe XD projekte, galite pradėti keisti teksto ypatybes. Šios ypatybės apima šriftų šeimą, šrifto dydį, šrifto svorį, lygiavimą, tarpą tarp simbolių (įbrėžimas ir sekimas), eilučių tarpus (pirmaujantis), užpildymą, kraštinę (brūkšnį), šešėlį (metamas šešėlis) ir fono suliejimą. Taigi pažiūrėkime, kaip šios savybės taikomos. Apie skaitomumą ir šriftą […]
Kaip ir „Adobe Illustrator“, „Photoshop“ piešinių lentos suteikia galimybę viename dokumente sukurti atskirus puslapius arba ekranus. Tai gali būti ypač naudinga, jei kuriate ekranus mobiliajai programai ar nedidelei brošiūrai. Galite galvoti apie piešinių lentą kaip apie specialų sluoksnių grupės tipą, sukurtą naudojant skydelį Sluoksniai. Jos […]
Daugelis įrankių, kuriuos rasite skydelyje „InDesign Tools“, naudojami linijoms ir formoms piešti puslapyje, todėl galite įvairiais būdais kurti įdomius savo leidinių brėžinius. „InDesign“ viduje galite kurti bet ką – nuo pagrindinių formų iki sudėtingų brėžinių, o ne naudoti piešimo programą, pvz., […]
Teksto įvyniojimas naudojant Adobe Illustrator CC nėra tas pats, kas įvynioti dovaną – tai lengviau! Teksto apvyniojimas verčia tekstą apvynioti aplink grafiką, kaip parodyta šiame paveikslėlyje. Ši funkcija bet kuriam kūriniui gali suteikti šiek tiek kūrybiškumo. Grafika verčia tekstą apvynioti aplink jį. Pirmiausia sukurkite […]
Kuriant „Adobe Illustrator CC“ dažnai reikia tikslaus dydžio (pavyzdžiui, 2 x 3 colių) formos. Sukūrus formą, geriausias būdas pakeisti jos dydį iki tikslių išmatavimų yra naudoti transformavimo skydelį, parodytą šiame paveikslėlyje. Pasirinkite objektą ir pasirinkite Langas → Transformuoti į […]
