SVG ဖိုင်အရွယ်အစားကို ဘယ်လိုလျှော့ချရမလဲ။

.svg ဖိုင်ကို ဆွဲထည့်ပါ သို့မဟုတ် ၎င်း၏ရင်းမြစ်ကုဒ်ကို ကူးထည့်ပါ၊ မူရင်းရွေးချယ်မှုများကို ထားရှိပြီး မူရင်း နှင့် ပိုကောင်းအောင် ပြုပြင်ပြီး အရွယ်အစားများကို နှိုင်းယှဉ်ကြည့်ပါ။ ထို့နောက် သေးငယ်သွားသော ရလဒ်ကို ရယူရန် .svg ဒေါင်းလုဒ် သို့မဟုတ် ကူးပါ ကို အသုံးပြုပါ။

SVG optimizer သည် မူရင်းအတိုင်း ဘာတွေကို ဖယ်ရှားပေးသနည်း။

မူရင်းအားဖြင့် မှတ်ချက်များ၊ title, desc နှင့် Inkscape သို့မဟုတ် Sodipodi ဒေတာများအပါအဝင် metadata များ၊ ပိုနေသော နေရာလွတ်များ၊ မလိုအပ်သော မူရင်း attribute များနှင့် XML declaration တို့ကို ဖယ်ရှားပေးပြီး ဂဏန်းများကို ဒသမ ၂ နေရာအထိ ညှိပေးပါသည်။

ပိုကောင်းအောင်ပြင်ပြီးနောက် element ID များကို အဘယ်ကြောင့် ချန်ထားသနည်း။

Element id attribute များကို ဖယ်ရှားခြင်းကို CSS သို့မဟုတ် JavaScript animation များက ထို ID များကို ကိုးကားနေနိုင်သောကြောင့် မူလက ပိတ်ထားသည်။ သင့်စာမျက်နှာတွင် ဘာမှမမူတည်မှသာ ဖွင့်ပါ။

ငါ့ SVG animation တွေ ဘာကြောင့် ပျောက်သွားတာလဲ။

လုံခြုံရေးအတွက် script tag များ၊ on-event attribute များ၊ ပြင်ပကိုးကားမှုများနှင့် animate၊ set ကဲ့သို့သော SMIL animation element များကို ဖယ်ရှားသောကြောင့် ပြုပြင်ပြီး SVG သည် တည်ငြိမ်ပုံဖြစ်သွားသည်။

ပိုကောင်းအောင်ပြင်ထားသော SVG ကို React သို့မဟုတ် CSS တွင် သုံးနိုင်ပါသလား။

သုံးနိုင်ပါသည်။ ကူးပါ နှင့် .svg ဒေါင်းလုဒ် အပြင် attribute များကို camelCase သို့ ပြောင်းပေးသည့် JSX အဖြစ်ကူးယူခြင်း နှင့် CSS နောက်ခံကူးယူခြင်း တို့လည်း ရှိပါသည်။ Visual preview ကြောင့် ပုံထွက်မှန်ကန်မှု ရှိမရှိကိုလည်း စစ်ဆေးနိုင်ပါသည်။

တကယ် အခမဲ့လား။

ဟုတ်ပါသည်။ ကိရိယာအားလုံးကို အကောင့်ဖွင့်ရန် သို့မဟုတ် ခရက်ဒစ်ကတ်ပေးရန် မလိုဘဲ အခမဲ့ အသုံးပြုနိုင်ပါသည်။ လုပ်ဆောင်ချက်များကို ကျွန်ုပ်တို့၏ ဆာဗာများပေါ်တွင် မဟုတ်ဘဲ သင့်စက်ထဲတွင်သာ ပြုလုပ်ပေးသောကြောင့် အခမဲ့ ဝန်ဆောင်မှုပေးနိုင်ခြင်း ဖြစ်ပါသည်။

ကျွန်ုပ်၏ဖိုင်များ အပ်လုဒ်လုပ်သလား။

မဟုတ်ပါ။ သင့်ဖိုင်များကို သင့်ဘရောက်ဇာထဲတွင်ပင် ဖွင့်၍ လုပ်ဆောင်ပြီး LibraTool သို့ မပို့ပါ။ ကိရိယာအချို့သည် အရင်ဆုံး လုပ်ဆောင်မှုအင်ဂျင် သို့မဟုတ် AI မော်ဒယ်ကို သင့်ဘရောက်ဇာသို့ ဒေါင်းလုဒ်လုပ်ပါသည်၊ ထိုဒေါင်းလုဒ်တွင် သင့်ဒေတာ မပါဝင်ပါ။

မိုဘိုင်းတွင် အလုပ်လုပ်ပါသလား?

ရပါတယ်။ iOS နှင့် Android ရှိ ခေတ်သစ်မိုဘိုင်းဘရောက်ဇာများတွင် ဘာမျှ ထည့်သွင်းစရာမလိုဘဲ အလုပ်လုပ်ပါသည်။ အလွန်ကြီးသောဖိုင်များသည် ဖုန်းတွင် နှေးနိုင်ပါသည် သို့မဟုတ် မှတ်ဉာဏ်ပြည့်သွားနိုင်ပါသည်၊ ထိုသို့သောဖိုင်များအတွက် ကွန်ပျူတာကို သုံးပါ။

✨

အခမဲ့ SVG ပြင်ဆင်/ချုံ့စက်

SVG ဖိုင်အရွယ်အစား အများကြီး လျှော့ချရန် metadata ဖြုတ်၊ whitespace ချုံ့ပြီး ဒဿမ round ပြုလုပ်ပါ — ပုံမှန်အားဖြင့် 30-70% လျှော့ချနိုင်သည်။ Visual preview မည်သည်မှ မပျက်မစီး စစ်ဆေးသည်。

ဖိုင်အရွယ်အစားသည် သင့်စက်ပေါ်တွင် မူတည်ပါသည်ဖိုင်များ ကိုယ်ပိုင်အဖြစ် ကျန်နေသည်လော့ဂ်အင် မလိုပါထာဝရ အခမဲ့

Load ပြီးသည်နှင့် offline အလုပ်လုပ်သည်

ဖိုင်ကို ဤနေရာသို့ ချပါ သို့မဟုတ် ရွေးရန် နှိပ်ပါ

SVG · သင့်စက်ထဲတွင်သာ လုပ်ဆောင်ပါသည်

သို့မဟုတ် ကလစ်ဘုတ်မှ ကူးထည့်ရန် Ctrl+V နှိပ်ပါ

ဖိုင်များ ကြည့်ရှုပါ

— သို့မဟုတ် SVG ကို အောက်တွင် ကူးထည့်ပါ —

သင်၏ ဖိုင်များသည် သင်၏ စက်ပစ္စည်းကို ဘယ်တော့မှ မထွက်ပါ။ လုပ်ဆောင်မှုများ အားလုံး သင်၏ ဘရောက်ဆာတွင် ဒေသတွင်းမှ ဖြစ်ပွားသည်။

အသုံးများသော အသုံးပြုမှုများ

ထုတ်လုပ်မှုအတွက် SVG အိုင်ကွန်များကို အကောင်းဆုံးဖြစ်အောင်ပြင်ပါမထုတ်ပြန်မီ အိုင်ကွန် SVG များမှ မလိုအပ်သော metadata များကို ဖယ်ရှားပါ — ပုံမှန်အားဖြင့် 50-80% လျော့ကျသည်။
ကုန်အမှတ်တံဆိပ်လိုဂို SVG များကို အကောင်းဆုံးဖြစ်အောင်ပြင်ပါအရည်အသွေးမလျှော့ဘဲ ဝဘ်ဆိုက်မြန်မြန်ဖွင့်နိုင်ရန် SVG လိုဂိုဖိုင်အရွယ်အစားကို လျှော့ပါ။
ပုံဆွဲများနှင့် Hero SVG များကို အကောင်းဆုံးဖြစ်အောင်ပြင်ပါပိုကြီးသော ပုံဆွဲများ (hero၊ အလှဆင်ဂရပ်ဖစ်) အတွက် အကောင်းဆုံးပြုလုပ်ခြင်းဖြင့် ဖိုင်အရွယ်အစား 30-70% လျှော့နိုင်သည်။
JavaScript bundle အရွယ်အစားကို လျှော့ပါSVG များကို React component အဖြစ် import လုပ်သည့်အခါ သို့မဟုတ် ကုဒ်ထဲတွင် inline ထည့်သည့်အခါ အကောင်းဆုံးပြုလုပ်ခြင်းက သင့် JS bundle ကို ကျုံ့စေသည်။
Figma / Sketch SVG export များကို သန့်ရှင်းပါFigma နှင့် Sketch SVG export များတွင် metadata အများအပြားပါသည်။ ထုတ်လုပ်မှုတွင် မသုံးမီ ဖယ်ရှားပါ။

မည်သို့ အလုပ်လုပ်သည်

ဤကိရိယာသည် သင့် browser ထဲတွင် လုံးဝ လုပ်ဆောင်သော ကိုယ်တိုင်ရေးထားသော optimizer တစ်ခုကို သုံး၍ SVG ဖိုင်အရွယ်အစားကို လျှော့ချသည် — library၊ server မပါဝင်ပါ။ ၎င်းသည် pass နှစ်ခုကို ပေါင်းစပ်သည်: attribute-level တိကျမှုအတွက် browser ၏ built-in DOMParser/XMLSerializer နှင့် comment ဖယ်ရှားခြင်း၊ metadata ဖယ်ရှားခြင်းနှင့် whitespace ချုံ့ခြင်းအတွက် target regex substitution များ။

1
DOMParser သည် SVG ကို sanitize လုပ်သည်
Optimize မလုပ်မီ browser ၏ DOMParser သည် SVG ကို XML အဖြစ် ဖတ်ပြီး element တိုင်းကို လျှောက်သည်။ Script tag များ၊ event handler များ (on* attribute မည်သည့်တစ်ခုမဆို)၊ animation element များနှင့် ပြင်ပ URL ကိုးကားချက်များကို သင်ရွေးချယ်ထားသော optimization option မည်သည့်တစ်ခုမဆို ဖယ်ရှားသည် — ၎င်းသည် ရွေးချယ်ချက်များ မည်သို့ ဖြစ်စေ run လုပ်သည်။
2
DOM-based ဒသမ ဝိုင်းခြင်း
ဒသမ ဝိုင်းခြင်း ဖွင့်ထားပါက optimizer သည် parse လုပ်ထားသော DOM ကို ဒုတိယအကြိမ် လျှောက်ပြီး သိထားသော numeric attribute များ (path d data, coordinates, transform values, stroke widths, etc.) တွင်သာ ဝိုင်းခြင်းကို အသုံးချသည်၊ .5.5 ကဲ့သို့ ချိတ်ဆက်ထားသော path တန်ဖိုးများကို မဖျက်ဆီးဘဲ floating-point ဂဏန်းတစ်ခုချင်းစီကို ကိုက်ညီသော regex တစ်ခုကို သုံး၍။
3
Regex pass များသည် serialize လုပ်ထားသော markup ကို ရှင်းလင်းသည်
XMLSerializer သည် normalize လုပ်ထားသော XML ကို ထုတ်ပေးသည်၊ ထို့နောက် target string replacement များသည် HTML comment များ၊ Inkscape/Sodipodi editor metadata၊ XML declaration၊ (version="1.1" ကဲ့သို့) မလိုအပ်သော default attribute များနှင့် tag ကြား whitespace များကို ဖယ်ရှားသည် — text node content ကို ဘယ်တော့မှ မထိတွေ့စေရန် pass တစ်ခုစီကို ကျဉ်းမြောင်းစွာ scope ချထားသည်။
4
Gzip size နှင့် export format များ
Browser ၏ CompressionStream API သည် input နှင့် output နှစ်ခုစလုံး၏ အမှန်တကယ် gzip size ကို တွက်ချက်ပေးသည်၊ ၎င်းသည် web ပေါ်ရှိ transfer cost ကို ဆုံးဖြတ်ပေးသောအရာ ဖြစ်သောကြောင့်ဖြစ်သည်။ Optimize လုပ်ထားသော SVG ကို ဒေါင်းလုဒ်ဆွဲနိုင်သည်၊ raw SVG အဖြစ် ကူးယူနိုင်သည်၊ React JSX-ready camelCase attribute များသို့ ပြောင်းလဲနိုင်သည် (သို့) CSS data URI အဖြစ် encode လုပ်နိုင်သည် — conversion အားလုံးကို local တွင် ဖြစ်ပျက်ပါသည်။

သင့် SVG ကို သင့် browser tab ထဲတွင် လုံးဝ ဖတ်ယူပြီး လုပ်ဆောင်ပါသည် — ဖိုင် byte များသည် သင့်စက်ကို ဘယ်တော့မှ မထွက်ပါ။

ဆက်နွှယ်သော ကိရိယာများ

🗜️

CSS ချုံ့/လှပဆင်စက်

ဖိုင်အရွယ်အစား လျှော့ချရန် CSS minify ပြုလုပ်ပါ သို့မဟုတ် ဖတ်နိုင်ရေးအတွက် minified CSS ကို beautify ပြုလုပ်ပါ။ ချက်ချင်း၊ browser တွင်。

ကြိုးစားပါ

🗜️

GIF ဖိုင်ချုံ့ကိရိယာ

လှုပ်ရှားသော GIF ကို ပိုသေးအောင်လုပ်ပါ။ Discord ၏ 256 KB အီမိုဂျီ သို့မဟုတ် 512 KB စတစ်ကာကဲ့သို့ အရွယ်အစားကန့်သတ်ချက်အောက်သို့ ဆန့်အောင်လုပ်ပါ၊ သို့မဟုတ် အရောင်၊ အကျယ်နှင့် ဖရိန်များကို ကိုယ်တိုင်ရွေးပါ။ ဘရောက်ဇာတွင် လုပ်ဆောင်သည်။ GIF ကို မတင်ပါ။

ကြိုးစားပါဖိုင်များ ဒေသတွင်း ကျန်ရှိသည်

📄

PDF ချုံ့ကိရိယာ

PDF ဖိုင်များကို ချုံ့၍ အရွယ်အစား လျှော့ချပါ။ အရည်အသွေးအဆင့်ကို ရွေးပါ — ပိုချုံ့ခြင်းဆိုသည်မှာ ဖိုင်ပိုသေးသော်လည်း ပုံအရည်အသွေး ပိုနိမ့်ခြင်းဖြစ်သည်။