Sizin Vebinizdə SVG Graphics qoymaq üçün necə

SVG və ya Ölçeklenebilir Vector Graphics daha mürəkkəb şəkillər çəkə və onları web səhifələrində göstərməyə imkan verir. Amma sadəcə SVG etiketlərini götürə və onları HTML-yə sala bilməzsən. Onlar görünməyəcək və səhifə yanlış olacaq. Bunun əvəzinə üç üsuldan birini istifadə etməlisiniz.

Embed SVG-yə obyektin etiketini istifadə edin

HTML etiketi, web səhifənizdə bir SVG qrafikini yerləşdirəcəkdir. Açmaq istədiyiniz SVG faylını təyin etmək üçün obyektin etiketini data özniteli ilə yazırsınız. SVG şəklinin genişliyini və hündürlüsünü (piksel olaraq) müəyyən etmək üçün genişlik və boyun xüsusiyyətlərini də daxil etməlisiniz.

Qarşıya yükləmə brauzerinin uyğunluğu üçün, oxumaq lazım olan növü atributunu daxil etməlisiniz:

type = "image / svg + xml"

və onu dəstəkləməyən brauzerlər üçün bir kod bazası (Internet Explorer 8 və aşağı). Sizin codebase SVG-i dəstəkləməyən brauzerlər üçün SVG pluginini göstərir. Ən çox istifadə edilən plugin Adobe adından: http://www.adobe.com/svg/viewer/install/. Lakin, bu plugin artıq Adobe tərəfindən dəstəklənmir. Digər seçim isə Savarese Software Research şirkətinin http://www.savarese.com/software/svgplugin/ səhifəsində yerləşən Ssrc SVG pluginidir.

Sizin obyektiniz belə görünür:

SVG üçün obyektin istifadə edilməsi haqqında göstərişlər

  • Genişlik və hündürlüyü ən azından göyərdiyiniz şəkildəki kimi böyük olduğundan əmin olun. Əks təqdirdə, şəkiliniz kəsilmiş ola bilər.
  • Düzgün məzmun tipini (type = "image / svg + xml") daxil etməsəniz SVG düzgün olaraq görünmür, buna görə də onu tərk etməyi məsləhət görmürəm.
  • SVG fayllarını görüntüləməyəcək brauzerlər üçün obyektin etiketi daxilindəki fallback məlumatını əlavə edə bilərsiniz.
  • SVG-nin və məzmun tipinin mənbəyini parametrlərdə də təyin edə bilərsiniz. Bu IE 6 və 7-də daha yaxşı işləyə bilər:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Qeyd edək ki, bunun üçün bir classid işi lazımdır.

Bir obyektin tag nümunəsindəki bir SVG bax.

Embed Tag ilə SVG yerləşdirin

SVG-ni daxil etdiyiniz digər bir seçim etiketi istifadə etməkdir. daxil olmaqla, obyektin etiketi ilə təxminən eyni xüsusiyyətləri istifadə edirsiniz. Yalnız fərq, məlumatların yerinə SVG sənəd URL'sini src xüsusiyyətində yerləşdirməkdir.

Gömme bu kimi görünür:

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 üçün Embed istifadə üçün məsləhətlər

  • Daxil etmə etiketi HTML4 etibarlı deyil, ancaq HTML5 etibarlıdır, buna görə də HTML4 səhifəsində istifadə edərsəniz, səhifənizin doğrulmayacağını unutmayın.
  • Ən yaxşı uyğunluq üçün src xüsusiyyətində tam quoalified domen adını istifadə edin.
  • Ayrıca, Adobe plugin ilə embed etiketini istifadə edərək, Mozilla sürümlerinin 1.0'dan 1.4'e kadar düşeceğini bildirir.

Bir embed tag nümunəsində bir SVG bax.

SVG əlavə etmək üçün iframe istifadə edin

Iframes web səhifələrinizdə bir SVG şəkli əlavə etmək üçün başqa asan bir yol. Bu, yalnız üç xüsusiyyətləri tələb edir: genişlik və hündürlük, adətən, və src sizin SVG faylınızın yerini göstərir.

Iframe bu kimi görünür: