သင့်ရဲ့ Webpage အပေါ် SVG ဂရစ်ဖစ်ထားပါလုပ်နည်း

SVG သို့မဟုတ်အရွယ်မှာ Vector Graphics သင်အများကြီးပိုမိုရှုပ်ထွေးပုံရိပ်တွေဆွဲကြကုန်အံ့ , သူတို့က web စာမျက်နှာများပေါ်တွင်ပြန်ဆိုရှိသည်။ သင်တို့မူကားရိုးရှင်းစွာ SVG tags များယူနှင့်သင့်က HTML သို့သူတို့ကိုငါပါးရိုက်နိုင်မှာမဟုတ်ဘူး။ သူတို့ကတက်မပြပါလိမ့်မယ်နှင့်သင့်စာမျက်နှာကိုမမှန်ကန်တဲ့ဖြစ်လိမ့်မည်။ အဲဒီအစား, သငျသညျသုံးနည်းလမ်းများ၏တဦးတည်းကိုအသုံးပြုဖို့ရန်ရှိသည်။

Embed SVG ဖို့ Object ကို Tag ကိုသုံးပါ

အဆိုပါက HTML tag ကိုသင်၏ဝဘ်စာမျက်နှာတစ်ခု SVG ဂရပ်ဖစ်တွေကို embed ပါလိမ့်မယ်။ သင်ဖွင့်ချင်တဲ့ SVG ဖိုင်သတ်မှတ်မယ့်ဒေတာများကို attribute ကိုအတူအရာဝတ္ထု tag ကိုရေးပါ။ သင်တို့သည်လည်း width နဲ့ height (pixels ကိုအတွက်) သင့် SVG ပုံရိပ်ရဲ့ width နဲ့ height သတ်မှတ်ပေးရန် attributes ပါဝင်သည်သငျ့သညျ။

Cross-browser ကိုလိုက်ဖက်မှု, သင်ဖတ်သင့်သောအမျိုးအစားကို attribute ကပါဝင်သည်သငျ့သညျ:

အမျိုးအစား = "image / svg + xml"

နှင့် (Internet Explorer ကို 8 နဲ့အနိမ့်) ကကူညီပံ့ပိုးမ browser များများအတွက် codebase ။ သင့်ရဲ့ codebase SVG ကိုထောကျပံ့မ browser များတစ်ခု SVG plugin ကိုထောက်ပြမယ်။ အမြားဆုံးအသုံး plugin ကို http://www.adobe.com/svg/viewer/install/ မှာ Adobe မှဖြစ်ပါတယ်။ သို့သော်ဤ plugin ကိုမရှိတော့ Adobe ကကထောက်ခံသည်။ နောက်ထပ်ရွေးချယ်စရာ http://www.savarese.com/software/svgplugin/ မှာ Savarese ဆော့ဝဲသုတေသနကနေ Ssrc SVG plugin ကိုဖြစ်ပါတယ်။

သင့်ရဲ့အရာဝတ္ထုဤကဲ့သို့သောကြည့်ရှုမည်ဟု:

SVG များအတွက်အရာဝတ္ထုအသုံးပြုခြင်းများအတွက်သိကောင်းစရာများ

  • width နဲ့ height ကိုသင်မြှုပ်ထားကြောင်းပုံရိပ်ကိုအဖြစ်ကအနည်းဆုံးအဖြစ်အကြီးစားဖြစ်ကြောင်းကိုသေချာအောင်လုပ်ပါ။ ဒီလိုမှမဟုတ်ရင်သင့်ရဲ့ image ကိုညှခံရပေလိမ့်မည်။
  • သငျသညျမှန်ကန်သောအကြောင်းအရာအမျိုးအစား (type ကို = "image / svg + xml") မပါဝင်ပါဘူး, ဒါကြောင့်ငါကထွက်ထွက်ခွာအကြံပြုကြဘူးလျှင်သင့်ရဲ့ SVG မှန်ကန်စွာမပြပေမည်။
  • သငျသညျ SVG ဖိုင်တွေပြသမည်မဟုတ်ကြောင်းဘရောက်ဇာများအတွက်အရာဝတ္ထု tag ကိုအတွင်းအပြင် fallback သတင်းအချက်အလက်များပါဝင်နိုင်ပါသည်။
  • သင်တို့သည်လည်း parameters များကို၌သင်တို့၏ SVG ၏အရင်းအမြစ်နှင့်အကြောင်းအရာအမျိုးအစားသတ်မှတ်နိုင်သည်။ ဒါက IE ကို 6 နဲ့ 7 မှာပိုကောင်းတဲ့အလုပ်လုပ်စေခြင်းငှါ:
classid = "CLSID: 1339B54C-3453-11D2-93B9-000000000000" width ကို = "110" height = "60" codebase = "http://www.savarese.com/software/svgplugin/">

ဒီကအလုပ်မလုပ်စေရန်တစ်ဦး classid လိုအပ်ပါတယ်သတိပြုပါ။

object တစ်ခု tag ကိုဥပမာထဲမှာတစ်ခု SVG ရှုမြင်ကြသည်။

အဆိုပါ embed Tag ကိုအတူ embed SVG

SVG အပါအဝင်များအတွက်သင်ရှိသည်နောက်ထပ် option ကို tag ကိုသုံးစွဲဖို့ဖြစ်ပါတယ်။ သငျသညျအကျယ် <, အရပ်, အမျိုးအစားနှင့် codebase> အပါအဝင်အရာဝတ္ထု tag ကိုအဖြစ်နီးပါးတူညီ attribute တွေ, ကိုအသုံးပြုပါ။ တစ်ခုတည်းသောခြားနားချက်အစားအချက်အလက်များ၏, သင် src attribute နဲ့သင့်ရဲ့ SVG စာရွက်စာတမ်း URL ကိုနေရာချသောကွောငျ့ဖွစျသညျ။

သင့်ရဲ့ embed ဤကဲ့သို့သောကြည့်ရှုမည်ဟု:

src = "http://your-domain.here/z-circle.svg" width ကို = "210" height = "210" အမျိုးအစား = "image / svg + xml" codebase = "http://www.adobe.com / svg / ကြည့်ရှုသူ / "install />

SVG များအတွက် Embed အသုံးပြုခြင်းများအတွက်သိကောင်းစရာများ

  • အဆိုပါ embed tag ကိုတရားဝင် HTML4 သည်မဟုတ်, ကခိုင်လုံသော HTML5 ကိုဖြစ်တယ်, ဒါသငျသညျတခု HTML4 စာမျက်နှာများတွင်အသုံးပြုရန်လျှင်, သင်သည်သင်၏စာမျက်နှာမှန်ကန်ကြောင်းသက်သေပြမည်မဟုတ်ကြောင်းသတိရသင့်တယ်။
  • အကောင်းဆုံးလိုက်ဖက်မှုများအတွက် src attribute ကိုတစ်ဦးအပြည့်အဝ quoalified domain name ကိုသုံးပါ။
  • အဆိုပါ Adobe က plugin ကိုအတူ embed tag ကိုသုံးပြီး Mozilla ကဗားရှင်း 1.4 မှ 1.0 crash လိမ့်မည်ဟုအချို့သောအစီရင်ခံစာများလည်းရှိပါတယ်။

တစ်ဦး embed tag ကိုဥပမာထဲမှာတစ်ခု SVG ရှုမြင်ကြသည်။

SVG Include တစ်ခု iframe ကိုသုံးပါ

iframe သင်၏ဝဘ်စာမျက်နှာများကိုတခုတခုအပေါ်မှာ SVG image ကိုထည့်သွင်းရန်အခြားလွယ်ကူသောနည်းလမ်းဖြစ်သည်။ သင့်ရဲ့ SVG ဖိုင်ရဲ့တည်နေရာကို width နဲ့ height ပုံမှန်အတိုင်းကဲ့သို့၎င်း, src Point: ဒါဟာသုံးဦးသာ attribute တွေလိုအပ်ပါတယ်။

သင့်ရဲ့ iframe ဤကဲ့သို့သောကြည့်ရှုမည်ဟု: