Kā izveidot SVG ar mērogojamu, meklējamu veidu

SVG tips nodrošina tās pašas vērtīgās funkcijas, kas atrodamas visos Adobe Illustrator CC izveidotās SVG grafikas aspektos : mērogojamību, rediģējamību programmā Illustrator un vietējo atbalstu visās pārlūkprogrammās. Šīs funkcijas pašas par sevi liecina par jūsu grafiskā satura eksportēšanu SVG formātā, ja tas ir paredzēts digitālajai attīstībai.

Pat papildus priekšrocībām, kas rodas, lietojot SVG grafikai kopumā, dažas īpašas funkcijas ir pieejamas, ievadot šīs grafikas.

Izmantojiet mērogojamā, meklējamā tipa vērtību

Kā jūs, iespējams, pamanījāt, esmu sajūsmā par to, ka SVG tips, kad tas tiek atvērts pārlūkprogrammas logā, ir meklējams ar pārlūkprogrammu. Parasti šie pārlūkprogrammas meklēšanas rīki darbojas tikai ar HTML veidu.

Un SVG veids ir ne tikai meklējams; lietotāji var atrast tekstu lapā, kopēt un ielīmēt, kā arī meklēt saturu. Piemēram, ja sulas bāra apmeklētājs interesējas par to, vai kāpostu kokteiļos ir vai nav citrona sulas, viņš var meklēt šo tekstu SVG failā, kā parādīts šeit.

Pārlūkā Chrome tiek meklēts teksts SVG grafikā.

Vai arī šajā gadījumā, ja lietotājs nav pārliecināts, kas tas ir, viņš var atlasīt tekstu un meklēt definīciju, kā parādīts attēlā.

SVG grafikas veida atlasīšana pārlūkprogrammā

Lai mazliet atgrieztos, varat eksportēt Illustrator grafiku, kurā ir ietverts ekrānu tips kā PNG, GIF vai JPEG. Taču tie nebūs mērogojami, un tie nesaglabās tāda veida funkcionalitāti, kāda parādīta iepriekšējos divos attēlos.

Optimizējiet tipa funkcionalitāti, saglabājot SVG

Es drīz atgriezīšos pie jautājuma, kad un kā saglabāt SVG failus un eksportēt uz SVG. Bet, kamēr mēs runājam par tēmu par SVG veidu, jums jāzina, ka, lai SVG tips darbotos parādītajā veidā, jums ir jāsaglabā grafika kā SVG. Un jums ir jāizmanto īpaši iestatījumi, lai tips darbotos tā, kā tam vajadzētu rīkoties, kad SVG attēls tiek skatīts pārlūkprogrammā.

Lai saglabātu attēla veidu kā SVG veidu, veiciet šīs darbības:

1. Kad grafiks ir gatavs nodošanai tīmekļa izstrādātājam, izvēlieties Fails → Saglabāt kā. Pārejiet uz mapi, kurā vēlaties saglabāt failu, un ievadiet faila nosaukumu.

Failu nosaukumiem jābūt saderīgiem ar tīmekli, kas nozīmē, ka izmantojiet mazos burtus un ciparus, neizmantojiet speciālās rakstzīmes (izņemot domuzīmi un pasvītrojumu) un noteikti neizmantojiet atstarpes.

Ja atkārtoti saglabājat failu, kuru jau esat saglabājis citā formātā, varat saglabāt faila nosaukumu un atrašanās vietu un pāriet uz 2. darbību.

2. Saglabāšanas dialoglodziņā esošajā formāta nolaižamajā izvēlnē izvēlieties SVG un noklikšķiniet uz Saglabāt.

Tiek atvērts dialoglodziņš SVG opcijas.

3. Atstājiet SVG profilus iestatītu uz SVG 1.1 (pašreizējā versija, ko atbalsta visas pārlūkprogrammas.

Citas iespējas nav būtiskas tam, ko mēs šeit darām, bet īsumā tās ir šādas:

• • Apakšiestatījuma opcija: Atstājiet apakšiestatījumu iestatītu uz Nav. Citas opcijas nedarbojas SVG tipam tīmeklim.
  • Attēla atrašanās vietas opcijas: šīs opcijas ir piemērojamas tikai tad, ja savā Illustrator failā esat ieguljis vai saistījis (vai abus) mākslas darbus.
  • CSS Properties opcijas: CSS Properties opcijas es aprakstīšu vēlāk šajā nodaļā, taču īss skaidrojums ir tāds, ka tās nosaka izstrādātāja vajadzības, kuram jūs nododat failus. Saglabājot veidu kā SVG, varat izmantot jebkuru no CSS rekvizītu opcijām.

4. Dialoglodziņa Papildu opcijas apakšējā sadaļā noņemiet atzīmi no opcijas Izvadīt mazāk elementu un izmantot elementu tekstam ceļā.

Ņemiet vērā, ka šīs opcijas ir atlasītas pēc noklusējuma. Šai jūsu SVG opciju dialoga sadaļai vajadzētu izskatīties šādi.

SVG grafikas saglabāšana, lai saglabātu īpaša veida funkcijas.

Atceļot šo opciju atlasi, faila lielums var nedaudz palielināties, taču, noņemot atlasi, tiek saglabāts teksta izskats un rekvizīti, ar kuriem esmu lepojies šajā sadaļā (meklējamība, kopēšana un ielīmēšana, meklēšana pārlūkprogrammā un citas funkcijas, atkarībā no pārlūkošanas vides).

Pēc noklusējuma ir atzīmēta izvēles rūtiņa Adaptīvs. Šis iestatījums nav būtisks, lai saglabātu īpašos SVG tipa atribūtus. Šeit, tāpat kā lielākajā daļā iespēju, jūsu izvēle ir atkarīga no jūsu tīmekļa izstrādātāja vajadzībām. Ja rodas šaubas, atlasītās opcijas Atsaucība ir plaši piemērojama izvades opcija.

5. Noklikšķiniet uz Labi dialoglodziņā SVG opcijas, lai saglabātu failu kā iegulto SVG.

Dažas piezīmes par SVG veidu:

• Šobrīd tiek izstrādāts atbalsts visām SVG veida funkcijām. Šeit apskatītās pamatfunkcijas darbojas jebkurā pārlūkprogrammā, taču, lai atbalstītu dažādus fontus, jūsu tīmekļa izstrādātāja partnerim var būt nepieciešama koda korekcija.
• Vai vēlaties uzzināt, vai šīs lieliskās SVG teksta atlases, rediģēšanas un meklēšanas funkcijas attiecas uz tekstu līknē? Atbilde ir parādīta nākamajā attēlā. Spoileris: Jā!

Teksta atlasīšana ceļā SVG failā pārlūkprogrammā Safari

Pievienojiet koda fragmentus SVG grafikai

Illustrator nekad nebūs neviena visaugstāk novērtētais koda redaktors, taču tajā ir iekļauta maza forša funkcija koda saistīšanai ar SVG faila elementiem. Īsi apskatīsim, kā pievienot koda fragmentu, ja vēlaties pievienot saiti SVG grafikas daļai. Tālāk norādītajās darbībās ir aprakstīta JavaScript piešķiršana objektam, kas liks šim objektam darboties kā saitei.

1. Kad objekts ir atlasīts, skatiet SVG interaktivitātes paneli.

Šo paneli var parādīt, ja tas nav aktīvs, izvēloties Logs → SVG interaktivitāte.

2. Atstājiet iestatījumu Notikums uz noklusējuma iestatījumu Onclick.

Šī JavaScript komanda veic funkciju (lai kaut kas notiktu), kad lietotājs tīmekļa lapā noklikšķina uz atlasītā objekta.

3. JavaScript lodziņā izmantojiet šo sintaksi, lai definētu saites mērķi:

window.open("[URL]");

Piemēram, ja jūs veidojat saiti uz Vikipēdijas lapu par lapu kāposti, visa koda rinda būtu tāda, kāda man ir attēlā:

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

4. Saglabājiet Illustrator failu kā SVG failu.

JavaScript fragmenta pievienošana SVG failam, lai grafikā izveidotu noklikšķināmu saiti.

Fails ir gatavs nodot jūsu tīmekļa izstrādātājam. (Vai arī, ja tā ir jūsu cita loma, varat mainīt cepures un paņemt failu savā iecienītākajā koda redaktorā, lai to integrētu tīmekļa projektā).

Varat arī vienkārši iegult saglabāto SVG failu tīmekļa lapā. Saite nebūs eleganta (piemēram, kamēr tīmekļa dizainers nepielāgo ģenerēto CSS, tajā nav iekļauta tipiska saites ikona, kad tā tiks virzīta virs kursora). Bet tas darbosies, un tas noteikti būs izmantojams prototipēšanai un testēšanai pirms tīmekļa lapas pabeigšanas.

Nemēģiniet izmantot Illustrator slice tehniku ​​SVG failu saglabāšanai. Slāņu tehnoloģija ir balstīta uz rastra un nesaskan ar vektoru izvadi.