အရွယ်မှာ Vector Graphics သုံးပြီး၏အကျိုးကျေးဇူးများ
အရွယ်မှာ Vector Graphics, ဒါမှမဟုတ် SVG, ယနေ့က်ဘ်ဆိုက်ဒီဇိုင်းအတွက်အရေးပါသောအခန်းကဏ္ဍမှ။ သင်လက်ရှိဒီနေရာမှာသင်၏ဝဘ်ဒီဇိုင်းအလုပ်အတွက် SVG အသုံးမပြုနေတယ်ဆိုရင်တချို့သင်တို့သည်ဤမျှလုပ်နေတာ start သင့်ပါတယ်ဘာကြောင့်အကြောင်းပြချက်တွေအဖြစ်သင်တို့သည်ဤဖိုင်တွေကိုထောကျပံ့မအဟောင်းတွေ browser များအဘို့ကိုသုံးနိုင်သည် fallback ဖြစ်ကြသည်။
resolution
SVG ၏အကြီးမားဆုံးအကျိုးကျေးဇူး resolution ကိုလွတ်လပ်ရေးဖြစ်ပါတယ်။ SVG ဖိုင်တွေ vector ဂရပ်ဖစ်အစား pixel-based အကြောင်းအရာအကြမ်းပုံရိပ်တွေကြောင့်, သူတို့ကမည်သည့်ပုံရိပ်အရည်အသွေးဆုံးရှုံးမပါဘဲတခုမှာနိုင်ပါသည်။ သငျသညျဖို့လိုအပျကွောငျးကိုတုံ့ပြန်မှုဝက်ဘ်ဆိုက်များအတွက်တဲ့အခါဒီအထူးသဖြင့်အထောက်အကူဖြစ်ပါတယ် ကောင်းသောကြည့်ရှုခြင်းနှင့်မျက်နှာပြင်အရွယ်အစားနှင့်ကိရိယာများကိုကျယ်ပြန့်အကွာအဝေးကိုဖြတ်ပြီးကောင်းစွာအလုပ်မလုပ် ။
SVG ဖိုင်တွေဖွင့်ခဲ့သည်ဆို၏နိုင်ပါတယ်သို့မဟုတ်ချသင့်ရဲ့တုံ့ပြန်မှုက်ဘ်ဆိုက်၏ပြောင်းလဲအရွယ်အစားနှင့်အဆင်အပြင်လိုအပ်ချက်များကိုထားရှိရန်နှင့်သင်စိတ်မချရသောအရည်အသွေးမြင့်လမ်းကိုမဆိုခြေလှမ်းရှိခြင်းသူတို့အားဂရပ်ဖစ်စိုးရိမ်ရန်မလိုအပ်ပါဘူး။
ဖိုင်အရွယ်အစား
ပေါ်အကြောင်းအရာအကြမ်းပုံရိပ်တွေ (JPG, PNG, GIF ကို) ကို အသုံးပြု. နှင့်အတူစိန်ခေါ်မှုများတစ်ခုမှာ တုံ့ပြန်မှုဝက်ဘ်ဆိုက်များ သူတို့အားပုံရိပ်တွေများ၏ဖိုင်အရွယ်အစားပါပဲ။ အကြောင်းအရာအကြမ်းပုံရိပ်တွေအားနည်းချက်ကိုသူမြားကိုလုပျသောလမ်းစကေးဘူးသောကြောင့်, သငျသညျကိုသူတို့ပြသပါလိမ့်မည်သည့်အချိန်တွင်အကြီးဆုံးအရွယ်အစားမှာသင့်ရဲ့ pixel-based ပုံရိပ်တွေကယ်နှုတ်တော်မူရန်လိုအပ်သည်။ သင်အမြဲပုံတစ်ပုံကိုသေးငယ်အောင်နှင့်၎င်း၏အရည်အသွေးကိုထိန်းသိမ်းထားနိုင်သောကြောင့်ဤသူကားအဒါပေမယ့်တူညီတဲ့ပုံရိပ်တွေပိုကြီးအောင်များအတွက်စစ်မှန်သောမဟုတ်ပါဘူး။ အဆုံးရလဒ်သင်မကြာခဏသူတို့မလိုအပ်ဘဲတစ်ဦးအလွန်ကြီးမားတဲ့ file ကို download လုပ်ပါရန်အတင်းအကျပ်ခိုင်းစေလျက်ရှိသည်, ဆိုလိုတာကပုဂ္ဂိုလ်တစ်ဦးရဲ့ screen ပေါ်မှာပြသလျက်ရှိသည်ထက်ဝေးပိုကြီးဖြစ်ကြောင်းပုံရိပ်တွေရှိသည်ဆိုသောအချက်ဖြစ်ပါသည်။
SVG ဒီစိန်ခေါ်မှုအမှာစကားပြောကြား။ အဆိုပါအားနည်းချက်ကိုဂရပ်ဖစ်အရွယ်မှာကြောင့်, သင်မသက်ဆိုင်သူတွေကိုပုံရိပ်တွေကိုပြသခံရဖို့လိုအပ်နိုင်ပါသည်ဘယ်လောက်ကြီးမား၏အလွန်သေးငယ်တဲ့ဖိုင်အရွယ်အစားရှိနိုင်ပါသည်။ ဤသည်နောက်ဆုံးတွင် site တစ်ခု၏အလုံးစုံစွမ်းဆောင်မှုနှင့် download speed ကိုအပေါ်အပြုသဘောသက်ရောက်မှုရှိပါလိမ့်မယ်။
CSS ကို Styling
SVG ကုဒ်ကိုလည်းစာမျက်နှာ၏ HTML ကိုတိုက်ရိုက်ထည့်သွင်းနိုင်ပါသည်။ ဤသည်အဖြစ်လူသိများသည် "အင်လိုင်း SVG ။ " inline SVG သုံးပြီး၏အကျိုးကျေးဇူးများတဂရပ်ဖစ်အမှန်တကယ်သင့်ရဲ့ကုဒ်အပေါ် အခြေခံ. ဘရောက်ဇာများကရေးဆွဲနေကြသည်ကတည်းကတစ်ဦး image file ကိုဆွဲယူဖို့သည် HTTP တောင်းဆိုချက်ကိုစေရန်မလိုပါဖြစ်ပါတယ်။ နောက်ထပ်အကျိုးကျေးဇူး inline SVG CSS နဲ့ style အမျိုးမျိုးခံရနိုငျသောကွောငျ့ဖွစျသညျ။
တစ်ဦး SVG အိုင်ကွန်များ၏အရောင်ကိုပြောင်းလဲရန်လိုအပ်ပါတယ်? အဲဒီအစားတည်းဖြတ်ဆော့ဖ်ဝဲနှင့်ပို့ကုန်အချို့ကိုမျိုးအတွက် image ကိုဖွင့်လှစ်ခြင်းနှင့်နောက်တစ်ကြိမ်ဖိုင်ကို upload လုပ်ဖို့လိုအပ်နေ၏, သင်ရိုးရှင်းစွာ CSS ကိုအနည်းငယ်လိုင်းများနှင့်အတူ SVG ဖိုင်ပြောင်းလဲနိုင်သည်။
သင်တို့သည်လည်းမောက်စ်တင်ပြည်နယ်များပေါ်တွင်သို့မဟုတ်အချို့သောဒီဇိုင်းလိုအပ်ချက်အဘို့ထိုသူတို့ပြောင်းလဲပစ်ရန် SVG ဂရပ်ဖစ်ပေါ်ရှိအခြား CSS ကိုစတိုင်များကိုသုံးနိုင်သည်။ သင်ပင်စာမျက်နှာအချို့လှုပ်ရှားမှုနှင့်အပြန်အလှန်ဆက်သွယ် add ထိုဂရပ်ဖစ်လှုပ်ရှားနိုင်ပါတယ်။
animations
inline SVG ဖိုင်တွေက CSS နှင့်အတူ style အမျိုးမျိုးရနိုင်သောကြောင့်, သငျသညျအဖြစ်ကောင်းစွာသူတို့အပျေါမှာ CSS ကို animations တွေကိုသုံးနိုင်သည်။ CSS ကိုပြောင်းလွဲမှုများကိုနှင့်အသွင်ကူးပြောင်းမှု SVG ဖိုင်များတချို့ဘဝကိုထည့်သွင်းဖို့နှစ်ခုလွယ်ကူသောနည်းလမ်းများဖြစ်ကြသည်။ သငျသညျမှသွဇာလှမျးမိုးမရှိဘဲစာမျက်နှာပေါ်တွင်ကြွယ်ဝတဲ့ Flash ကိုကဲ့သို့အတွေ့အကြုံများရနိုင် Flash ကို အသုံးပြု. အတူပါလာသော, အားနည်းချက်တွေ ယနေ့ကွန်ရက်စာမျက်နှာတွေပေါ်မှာ။
SVG အသုံးပြုခြင်း
SVG ဖြစ်ပါတယ်ကဲ့သို့အစွမ်းထက်ဤဂရပ်ဖစ်သင်သည်သင်၏ website တွင်အသုံးပြုနေသည်သည်အခြား image ကို format နဲ့အစားမထိုးနိုင်ပါ။ နက်ရှိုင်းသောအရောင်အတိမ်အနက်ကိုလိုအပ်ကြောင်းဓါတ်ပုံများဆဲ JPG သို့မဟုတ်ဖြစ်ကောင်းတစ်ဦး PNG ဖိုင်ရောက်ထားရန်လိုအပ်ပါတယ်လိမ့်မယ်, ဒါပေမဲ့ icon များကဲ့သို့အရိုးရှင်းသောပုံရိပ်များ SVG အဖြစ်ကွပ်မျက်ခံရဖို့ဿုံတော်ပါတယ်ဖြစ်ကြသည်။
SVG လည်းကုမ္ပဏီအမှတ်တံဆိပ်သို့မဟုတ်ဂရပ်များနှင့်ဇယားကဲ့သို့ပိုမိုရှုပ်ထွေးသရုပ်ဖော်ပုံများများအတွက်သင့်လျော်သောနိုင်ပါတယ်။ ဂရပ်ဖစ်အားလုံးသည် CSS နဲ့ style အမျိုးမျိုးခံရဖို့တတ်နိုင်, အရွယ်မှာဖြစ်ခြင်းမှအကျိုး, ဤဆောင်းပါး၌ဖော်ပြထားသောအခြားအားသာချက်များပါလိမ့်မယ်။
အသက်ကြီး browser အတွက်ပံ့ပိုးမှု
SVG များအတွက်လက်ရှိထောက်ခံမှုခေတ်သစ်ကို web browser များအတွက်အလွန်ကောင်းလှ၏။ တကယ်ကဤဂရပ်ဖစ်များအတွက်ထောက်ခံမှုကင်းမဲ့သောသာ browser များက Internet Explorer ဗားရှင်းအဟောင်း (အောက်တွင်ဗားရှင်း 8 နဲ့) နှင့် Android ကိုအနည်းငယ်အဟောင်းတွေဗားရှင်းဖြစ်ကြသည်။ အားလုံးအားလုံး၌, browsing အတွက်လူဦးရေရဲ့တစ်ဦးအလွန်သေးငယ်တဲ့ရာခိုင်နှုန်းပါသေးသည်ဤဘရောက်ဇာကိုအသုံးပြုသည်နှင့်အရေအတွက်ကိုချုံ့ဖို့ရောက်နေပါတယ်။ ဤသည် SVG ယနေ့ကွန်ရက်စာမျက်နှာတွေပေါ်မှာတော်တော်လေးလုံခြုံစွာသုံးနိုငျဆိုလိုသည်။
သငျသညျ SVG များအတွက် fallback ပေးချင်ကြဘူးဆိုရင်နန်းကြိုးအမျှင်လေးများ Group မှ Grumpicon ကဲ့သို့သော tool ကိုသုံးနိုင်သည်။ ဤသည်သယံဇာတသင့်ရဲ့ SVG ပုံရိပ်ဖိုင်များကိုယူနှင့်အထက် browser များအဘို့ PNG fallback ဖန်တီးပါလိမ့်မယ်။
1/27/17 အပေါ်ဂျယ်ရမီ Girard တည်းဖြတ်