Како направити СВГ са скалабилним типом који се може претраживати

СВГ тип пружа исте вредне карактеристике које се налазе у свим аспектима СВГ графике креиране у Адобе Иллустратор ЦЦ : скалабилност, могућност уређивања у Иллустратор-у и изворна подршка у свим претраживачима. Те карактеристике саме по себи представљају аргумент за извоз вашег графичког садржаја који садржи тип у СВГ формату када је намењен за дигитални развој.

Чак и поред предности које имате када користите СВГ за графику уопште, неке посебне функције су доступне када унесете ту графику.

Искористите вредност скалабилног типа који се може претраживати

Као што сте можда приметили, узбуђен сам због чињенице да се СВГ тип, када се отвори у прозору прегледача, може претраживати помоћу претраживача. Обично ти алати за претрагу претраживача раде само са ХТМЛ типом.

А СВГ тип није само претражив; корисници могу пронаћи текст на страници, копирати и налепити и тражити садржај. На пример, ако посетиоца сока бара занима да ли шејкови од кеља имају лимунов сок или не, може да претражи СВГ датотеку за тај текст, као што је приказано овде.

Претраживање СВГ графике за текст у Цхроме-у.

Или што се тога тиче, ако корисник није сигуран шта је дођавола кељ, може да изабере текст и потражи дефиницију, као што је приказано.

Избор типа у СВГ графику у претраживачу

Да бисте се мало вратили, можете да извезете Иллустратор графику која укључује тип за екране као ПНГ, ГИФ или ЈПЕГ. Али они неће бити скалабилни и неће задржати врсту функционалности типа приказану на претходне две слике.

Оптимизујте функционалност типа тако што ћете сачувати СВГ

Ускоро ћу се вратити на то када и како сачувати СВГ датотеке и извести их у СВГ. Али док смо на теми СВГ типа, морате да знате да да би се СВГ тип понашао на приказан начин, морате да сачувате своју графику као СВГ. И морате да користите одређена подешавања како би тип деловао онако како треба када се СВГ слика гледа у прегледачу.

Да бисте сачували тип унутар слике као СВГ тип, пратите ове кораке:

1. Када је ваша графика спремна за предају веб програмеру, изаберите Филе→Саве Ас. Идите до фасцикле у којој желите да сачувате датотеку и унесите назив датотеке.

Нека називи датотека буду веб компатибилни, што значи да користите мала слова и бројеве, не користите посебне знакове (осим цртице и доње црте) и дефинитивно немојте користити размаке.

Ако поново чувате датотеку коју сте већ сачували у другом формату, можете задржати име датотеке и локацију и прећи на 2. корак.

2. У падајућем менију за формат у дијалогу Сачувај, изаберите СВГ и кликните на Сачувај.

Отвара се дијалог СВГ опције.

3. Оставите СВГ профиле подешене на СВГ 1.1 (тренутна верзија, подржана од свих претраживача.

Остале опције нису критичне за оно што ми овде радимо, али укратко су следеће:

• • Опција подпоставке: Оставите подпоставку постављену на Ништа. Остале опције нису оперативне за СВГ тип за веб.
  • Опције локације слике: Ове опције су применљиве само ако сте у своју Иллустратор датотеку уградили или повезали (или обоје) уметничко дело.
  • Опције ЦСС својстава: Описујем опције ЦСС својстава касније у овом поглављу, али кратко објашњење је да су оне одређене потребама програмера коме предајете датотеке. Када чувате тип као СВГ, можете користити било коју од опција ЦСС својстава.

4. У доњем одељку дијалога Напредне опције поништите избор поља Излаз мање елемената и Користи елемент за текст на путањи.

Имајте на уму да су ове опције подразумевано изабране . Овај одељак вашег дијалога СВГ опција би требало да изгледа као на следећој слици.

Чување СВГ графике ради очувања посебних карактеристика типа.

Поништавање избора ових опција може мало повећати величину датотеке, али њиховим опозивањем, очуваћете како текст изгледа и својства којима сам се хвалио у овом одељку (могућност претраживања, копирање и лепљење, тражење у претраживачу и друге функције, у зависности од окружења за прегледање).

Поље за потврду Респонсиве је подразумевано изабрано. Ово подешавање није критично за очување посебних атрибута СВГ типа. Овде, као и код већине опција, ваш избор зависи од потреба вашег веб програмера. Када сте у недоумици, остављање изабране опције Респонсиве је широко применљива излазна опција.

5. Кликните на ОК у дијалогу СВГ опције да бисте сачували датотеку као СВГ који се може уградити.

Неколико напомена о СВГ типу:

• Од овог писања, подршка за све функције типа СВГ је у току. Основне функције кроз које сам овде прошетао раде у било ком претраживачу, али подршка за различите фонтове може захтевати подешавање кода од стране вашег партнера за веб програмере.
• Да ли се питате да ли се те сјајне функције одабира, уређивања и претраживања СВГ текста примењују на текст на кривој? Одговор је откривен на следећој слици. Спојлер: Да!

Избор текста на путањи у СВГ датотеци у Сафари претраживачу

Додајте исечке кода у СВГ графику

Иллустратор никада неће бити ничији најбоље оцењени уређивач кода, али укључује сјајну малу функцију за повезивање кода са елементима СВГ датотеке. Хајде да накратко погледамо како да додате исечак кода када желите да додате везу на део СВГ графике. Кораци у наставку воде кроз додељивање ЈаваСцрипт-а објекту који ће учинити да тај објекат функционише као веза.

1. Са изабраним објектом, погледајте панел СВГ интерактивности.

Можете приказати овај панел ако није активан одабиром Прозор→СВГ интерактивност.

2. Оставите догађај подешен на подразумевани, Онцлицк.

Ова ЈаваСцрипт команда обавља функцију (да се нешто деси) када корисник кликне на изабрани објекат на веб страници.

3. У оквиру ЈаваСцрипт користите ову синтаксу да дефинишете циљ везе:

виндов.опен("[УРЛ]");

Дакле, на пример, ако се повезујете са страницом Википедије о калеу, цео ред кода би био оно што имам на слици:

виндов.опен("хттпс://ен.википедиа.орг/вики/Кале");

4. Сачувајте Иллустратор датотеку као СВГ датотеку.

Прилагање исечка ЈаваСцрипт-а у СВГ датотеку да бисте направили везу на коју се може кликнути у графику.

Датотека је спремна за предају вашем веб програмеру. (Или ако је то ваша друга улога, можете променити шешире и покупити датотеку у свом омиљеном уређивачу кода да бисте је интегрисали у веб пројекат).

Алтернативно, можете једноставно да уградите сачувану СВГ датотеку у веб страницу. Веза неће бити елегантна (све док веб дизајнер не подеси генерисани ЦСС, неће укључивати типичну икону везе када пређете курсором преко, на пример). Али то ће радити и дефинитивно ће бити услужно за израду прототипа и тестирање пре него што се веб страница заврши.

Не покушавајте да користите Иллустраторову технику пресека за чување СВГ датотека. Технологија која стоји иза резова је заснована на растеру и не спаја се са излазом заснованим на векторима.