Како ставити СВГ графику на своју веб страницу

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

Користите Објецт Таг за Ембед СВГ

ХТМЛ таг ће уградити СВГ графику на вашу веб страницу. Пишете ознаку објекта са атрибутом података како бисте дефинисали СВГ датотеку коју желите отворити. Такође треба укључити атрибуте ширине и висине како бисте дефинирали ширину и висину ваше СВГ слике (у пикселима).

За компатибилност унакрсног претраживача, требало би да укључите атрибут типа који би требало да прочита:

типе = "имаге / свг + кмл"

и кодни код за претраживаче који га не подржавају (Интернет Екплорер 8 и ниже). Ваша база података би указала на СВГ плугин за прегледаче који не подржавају СВГ. Најчешће коришћени додатак је Адобе од хттп://ввв.адобе.цом/свг/виевер/инсталл/. Међутим, овај додатак више не подржава Адобе. Друга опција је Ссрц СВГ плугин из Саваресе Софтваре Ресеарцх на хттп://ввв.саваресе.цом/софтваре/свгплугин/.

Ваш објекат би изгледао овако:

<објецт дата = "рецтангле.свг" видтх = "110" хеигхт = "60" типе = "имаге / свг + кмл" цодебасе = "хттп://ввв.саваресе.цом/софтваре/свгплугин/">

Савети за коришћење објекта за СВГ

цлассид = "ЦЛСИД: 1339Б54Ц-3453-11Д2-93Б9-000000000000" видтх = "110" хеигхт = "60" цодебасе = "хттп://ввв.саваресе.цом/софтваре/свгплугин/">

Имајте на уму да то захтијева класу да би то учинило.

Погледајте СВГ у примеру ознаке објекта.

Уградите СВГ са ознаком Ембед

Друга опција коју имате за укључивање СВГ-а јесте да користите ознаку. Користите готово исте атрибуте као ознака објекта, укључујући ширину <, висину, тип и кодирање>. Једина разлика је у томе што уместо података ставите СВГ УРЛ адресу документа у атрибут срц.

Ваш уграђивање би изгледало овако:

срц = "хттп://иоур-домаин.хере/з-цирцле.свг" видтх = "210" хеигхт = "210" типе = "имаге / свг + кмл" цодебасе = "хттп://ввв.адобе.цом / свг / виевер / инсталл "/>

Савети за коришћење уградње за СВГ

Погледајте СВГ у примјеру уграђене ознаке.

Користите ифраме за укључивање СВГ-а

Ифраме су још један једноставан начин да укључите СВГ слику на своје веб странице. Потребно је само три атрибута: ширина и висина као и обично, а срц указује на локацију ваше СВГ датотеке.

Ваш ифраме би изгледао овако:

<ифраме срц = "хттп://вебдесигн.абоут.цом/од/екамплес/л/з-триангле.свг" видтх = "370" хеигхт = "370">

Савети за коришћење ифраме за СВГ

Ифраме ће приказати границу око слике, осим ако не уклоните границу са стилом, као што је

стиле = "бордер: ноне;"

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

Погледајте СВГ у примеру ознаке ифраме.