Како да се стави SVG графика на вашата веб страница

SVG или скалабилна векторска графика ви овозможуваат да добиете многу покомплексни слики и да ги направите на веб-страници. Но, не можете едноставно да ги преземете SVG таговите и да ги удриме во вашиот HTML. Тие нема да се појават и вашата страница ќе биде неважечка. Наместо тоа, треба да користите еден од трите методи.

Користете ја ознаката "Object" за вградување на SVG

HTML-тагот ќе вметне графичка слика на SVG на вашата веб-страница. Вие ја запишувате ознаката за објект со атрибут на податоци за да ја дефинирате SVG-датотеката што сакате да ја отворите. Исто така треба да вклучите атрибути на ширина и висина за да ја дефинирате ширината и висината на вашата SVG слика (во пиксели).

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

type = "image / svg + xml"

и кодното место за прелистувачи кои не го поддржуваат (Internet Explorer 8 и пониски). Вашата база на податоци ќе укаже на SVG приклучок за прелистувачи кои не поддржуваат SVG. Најчесто користен приклучок е од Adobe на http://www.adobe.com/svg/viewer/install/. Сепак, овој приклучок веќе не е поддржан од Adobe. Друга опција е Ssrc SVG додатокот од Savarese Software Research на http://www.savarese.com/software/svgplugin/.

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

Совети за користење објект за SVG

  • Проверете дали ширината и висината се барем големи колку и сликата што ја вградувате. Во спротивно, вашата слика може да биде исечена.
  • Вашиот SVG може да не се прикаже правилно ако не го вклучите точниот тип на содржина (тип = "image / svg + xml"), па затоа не препорачувам да го напуштите.
  • Може да вклучите резервни информации во тагот на објектот за прелистувачи кои нема да прикажат SVG-датотеки.
  • Можете исто така да го поставите изворот на вашиот SVG и типот на содржина во параметри. Ова може да работи подобро во IE 6 и 7:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Забележете дека ова бара класа за да може да работи.

Приказ на SVG во пример за таг на објект.

Вградување на SVG со ознаката за вметнување

Друга опција што ја имате за вклучување на SVG е да ја користите ознаката. Вие ги користите речиси истите атрибути како ознака на објект, вклучувајќи ширина <, висина, тип и кодното место>. Единствената разлика е во тоа што наместо податоците, го ставате URL-то на SVG-документ во атрибутот src.

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

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / viewer / install "/>

Совети за користење Вградување за SVG

  • Темата за вметнување не е валидна HTML4, но таа е валидна HTML5, па ако ја користите во HTML4 страница, треба да запомните дека вашата страница нема да валидира.
  • Користете целосно quoalified име на домен во атрибутот src за најдобра компатибилност.
  • Исто така, постојат некои извештаи дека користењето на вметнатата таг со Adobe додатокот ќе ги сруши Mozilla верзиите 1.0 до 1.4.

Погледнете SVG во пример за прилог за вметнување.

Користете iframe да Вклучи SVG

Акорамки се уште еден лесен начин за вклучување на SVG слика на вашите веб страни. Потребни се само три атрибути: ширина и висина како и обично, а src укажува на локацијата на вашата SVG датотека.

Вашиот iframe ќе изгледа вака: