SVG grafikasini veb-saytingizga qanday joylashtirish mumkin

SVG yoki Scalable Vector Graphics sizni juda murakkab tasvirlarni chizish va ularni veb-sahifalarda ko'rsatish imkonini beradi. Biroq siz SVG taglarini olib, ularni HTML-ga sig'dirolmaysiz. Ular ko'rsatilmaydi va sizning sahifangiz yaroqsiz bo'ladi. Buning o'rniga, siz uch usuldan birini qo'llashingiz kerak.

Ob'ektni yorlig'ini Embed SVG-ga joylashtiring

HTML yorlig'i veb-sahifangizda SVG grafikasini joylashtiradi. Siz ob'ekt yorlig'ini siz ochmoqchi bo'lgan SVG faylini aniqlash uchun ma'lumotlar xususiyati bilan yozasiz. Siz SVG rasmingizning kengligi va balandligini (pikselda) aniqlash uchun kenglik va balandlik atributlarini o'z ichiga olishi kerak.

Qarama-brauzerlar uchun moslik uchun quyidagilarni o'qing:

tur = "image / svg + xml"

va uni qo'llab-quvvatlamaydigan brauzerlar uchun kod bazasi (Internet Explorer 8 va undan past). SVG-ni qo'llab-quvvatlamaydigan brauzerlar uchun SVG plaginini ko'rsataman. Eng ko'p ishlatiladigan plagin Adobe tomonidan http://www.adobe.com/svg/viewer/install/ sahifasida. Ammo, bu plagin Adobe tomonidan endi qo'llab-quvvatlanmaydi. Boshqa variant - http://www.savarese.com/software/svgplugin/ saytidagi Savarese Software Research kompaniyasining Ssrc SVG plaginlari.

Sizning ob'ektingiz shunday bo'ladi:

SVG uchun ob'ektdan foydalanish bo'yicha maslahatlar

  • Kenglik va balandlik kamida siz kiritayotgan rasm kabi katta ekanligiga ishonch hosil qiling. Aks holda, sizning rasmingiz kesilgan bo'lishi mumkin.
  • To'g'ri kontent turini (turi = "image / svg + xml") kiritmasangiz SVG to'g'ri ko'rsatilmasligi mumkin, shuning uchun uni qoldirishni tavsiya etmayman.
  • SVG-fayllarni aks ettiruvchi brauzerlar uchun obyekt tagidagi eskirib qolgan ma'lumotlarni qo'shishingiz mumkin.
  • SVG va kontent turini sizning parametrlarga o'rnatishingiz mumkin. Bu IE 6 va 7da yaxshiroq ishlaydi:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" kenglik = "110" balandligi = "60" codebase = "http://www.savarese.com/software/svgplugin/">

Buning uchun uni sinash uchun sinfdosh talab qiladi.

Agar ob'ekt yorlig'i misolida SVGni ko'rish.

Embed Tag bilan SVG joylashtiring

SVG-ni o'z ichiga olgan yana bir variant - bu tegdan foydalanish. <, Height, type va codebase> kengligi, shu jumladan, ob'ekt yorlig'i bilan deyarli bir xil xususiyatlardan foydalanasiz. Faqatgina farq shundaki, ma'lumotlar o'rniga siz SVG hujjatning URL manzilini src atributida joylashtirasiz.

Sizning embedingiz shunday bo'ladi:

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

SVG uchun Embed foydalanish uchun maslahatlar

  • Kiritish yorlig'i tegishli emas HTML4, biroq u HTML5 hisoblanadi, shuning uchun HTML4 sahifasida foydalansangiz, sizning sahifangiz tekshirilmaydi.
  • Eng yaxshi muvofiqligi uchun src xususiyati to'liq quoalified domen nomini ishlating.
  • Bundan tashqari, Adobe plaginida emblem yorlig'ini ishlatish Mozilla versiya 1.0 dan 1.4 ga tushishini bildiradi.

Agar emblem tagidagi bir SVGni ko'rish.

SVGni qo'shish uchun iframe foydalaning

Iframes sizning web-sahifalaringizda SVG rasmini kiritishning yana bir oson yo'li. Bu faqat uchta atributni talab qiladi: odatdagidek kenglik va balandlik va SVG faylingiz joylashgan joyga ishora qiluvchi src.

Sizning iframe shunday ko'rinadi: