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

SVG или мащабируемата векторна графика ви позволяват да изчертавате много по-сложни изображения и да ги извеждате на уеб страници. Но не можете просто да вземете маркерите на SVG и да ги ударите в HTML. Те няма да се покажат и страницата ви ще бъде невалидна. Вместо това трябва да използвате един от трите начина.

Използвайте маркера на обекти за вграждане на SVG

HTML тагът ще вгради SVG графика във вашата уеб страница. Пишете обектен маркер с атрибут за данни, за да определите SVG файла, който искате да отворите. Трябва също така да включвате атрибути за ширина и височина, за да определите ширината и височината на вашето SVG изображение (в пиксели).

За съвместимост между различни браузъри трябва да включите типа атрибут, който трябва да се чете:

тип = "изображение / SVG + XML"

и кодова база за браузъри, които не я поддържат (Internet Explorer 8 и по-ниски). Вашата кодова база ще сочи към приставка SVG за браузъри, които не поддържат SVG. Най-често използваната приставка е от Adobe на адрес http://www.adobe.com/svg/viewer/install/. Тази приставка обаче вече не се поддържа от Adobe. Друга опция е плъгина SVS 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" ширина = "110" височина = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Имайте предвид, че това изисква класическа работа, за да може тя да работи.

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

Вградете SVG с маркера за вграждане

Друга опция, която имате за включване на SVG, е да използвате маркера. Използвате почти същите атрибути като обектен маркер, включително ширина <, височина, тип и кодова база>. Единствената разлика е, че вместо данни поставете SVG документа на документа в атрибута src.

Вграждането ви ще изглежда така:

src = "http://your-domain.here/z-circle.svg" width = "210" height = "210" type = "image / svg + xml" codebase = "http://www.adobe.com / svg / зрител / инсталиране "/>

Съвети за използване на вграждане за SVG

  • Маркерът за вграждане не е валиден за HTML4, но е валиден HTML5, така че ако го използвате на страница HTML4, трябва да запомните, че страницата ви няма да бъде потвърдена.
  • Използвайте напълно кваoлифицирано име на домейн в атрибута src за най-добра съвместимост.
  • Съществуват и някои съобщения, че използването на маркера за вграждане с приставката на Adobe ще сринем версиите на Mozilla от 1.0 до 1.4.

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

Използвайте вградена рамка за включване на SVG

Вградените рамки са друг лесен начин за включване на изображение на SVG във вашите уеб страници. Той изисква само три атрибута: ширина и височина както обикновено, и src сочещи към местоположението на вашия SVG файл.

Вашият iframe ще изглежда така: