SVG Optimizer
SVG minify karein: comments, metadata aur editor cruft hatayein, aur whitespace collapse karein.
Aapka SVG aapke browser mein locally optimize hota hai aur kuch bhi server par upload nahi hota.
Raster images bhi chhoti karni hain? Image Optimizer try karein.
SVG Optimizer ke baare mein
Yeh SVG optimizer SVG markup minify karta hai taaki aapke icons aur graphics chhote ship hon aur tezi se load hon. Figma, Illustrator, Inkscape, ya Sketch se export kiya gaya ek SVG paste karein aur tool XML prolog, doctype, comments, metadata, aur Inkscape, Sodipodi, aur Adobe ka editor-specific cruft strip karta hai, phir bytes bachane ke liye whitespace collapse karta hai. Aap optionally root width aur height attributes drop kar sakte hain taaki viewBox graphic ko responsive layouts ke liye poori tarah scalable rakhe. Yeh front-end developers, designers, aur un sab ke liye ek handy, lightweight SVGO alternative hai jinhein SVG minify karna ya icons ko HTML, CSS, ya React components mein inline karna hai. Sab kuch aapke browser mein locally process hota hai, aur tool before aur after byte count report karta hai taaki aap theek dekh sakein ki aapki file kitni chhoti hui.
Features
- XML prolog aur DOCTYPE declarations strip karta hai jinki inline aur web SVGs ko zaroorat nahi
- Exported markup saaf karne ke liye comments hata deta hai
- metadata, title, aur desc elements delete karta hai jo file size bloat karte hain
- Inkscape, Sodipodi, aur Adobe ka editor cruft, namespaced attributes ke saath, saaf karta hai
- Optionally root width aur height hata deta hai taaki viewBox graphic ko scalable rakhe
- Tags ke beech whitespace aur redundant spacing collapse karta hai
- Optimized byte count aur saved percentage dikhata hai
- Har cleanup on ya off toggle karein taaki aap theek wahi markup rakhein jo chahiye
SVG Optimizer kaise use karein
- Apna SVG source input box mein paste karein.
- Comments, metadata, editor data, dimensions, aur whitespace ke options apni zaroorat ke hisaab se toggle karein.
- Optimized output aur uske upar dikhaye gaye byte savings padhein.
- Optimized SVG copy karein aur use apne project mein drop karein.
Example
Input
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<!-- heart icon -->
<title>heart</title>
<path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/>
</svg>
Output
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/></svg>
Prolog, comment, aur title hata diye gaye aur whitespace collapse ho gaya.
Common errors aur troubleshooting
- Dimensions hatane ke baad graphic gaayab ho jaata hai ya galat size ka dikhta hai. — Width aur height hatana sirf tab kaam karta hai jab SVG mein ek viewBox ho. Agar koi viewBox nahi hai, to dimensions toggle off rakhein.
- Aapke CSS ya JavaScript dwara referenced ek ID ya label saaf ho gaya. — editor-data option data-name aur namespaced editor attributes hata deta hai. Ise off karein agar aapka code un hooks par depend karta hai.
- Accessibility toot jaati hai kyunki title aur desc strip ho gaye. — metadata option title aur desc elements hata deta hai. Ise disable karein jab aap screen-reader labels ke liye un par depend karte hain.
- Paste karne ke baad output khaali hai. — Optimizer ko asli SVG markup chahiye; pakka karein ki aapne poora svg element paste kiya hai, sirf ek file path ya ek binary image nahi.
Aksar pooche jaane wale sawaal
- SVG Optimizer kya hai aur kya hata deta hai?
- Yeh ek in-browser SVG minifier hai jo XML prolog, doctype, comments, metadata, title aur desc, aur Inkscape, Sodipodi, aur Adobe jaise tools ka editor cruft strip karta hai, phir whitespace collapse karta hai. Aap har step ko toggles se control karte hain.
- Is tool se ek SVG kaise minify karun?
- Apna SVG markup input box mein paste karein, jo cleanups chahein toggle karein, phir optimized output copy karein. Byte count aur saved percentage result ke upar aate hain taaki aap shrink confirm kar sakein.
- Kya optimize karne se mera SVG dikhne mein badlega?
- Nahi, default settings sirf non-visual data aur whitespace hatate hain. Visual paths aur shapes preserve rehte hain, isliye rendered graphic bilkul same rehta hai.
- Kya mujhe width aur height attributes hatane chahiye?
- Unhein sirf tab drop karein jab aapke SVG mein ek viewBox ho. viewBox graphic ko scalable rakhta hai, jo responsive aur CSS-sized icons ke liye ideal hai.
- SVG Optimizer SVGO se kaise alag hai?
- Yeh ek lightweight, dependency-free optimizer hai jo sabse aam SVGO cleanups browser mein cover karta hai, bina koi build tool ya Node setup install kiye.
- Kya mera SVG kahin upload hota hai?
- Nahi. SVG Optimizer aapke markup ko aapke browser mein locally process karta hai, isliye aapka data device se bahar nahi jaata aur kuch bhi server par upload nahi hota.
Related tools
- CSS / SCSS Formatter — CSS/SCSS/LESS beautify ya minify karein, properties sort karein aur duplicates hatayein.
- HTML Formatter — HTML beautify ya minify karein, inline CSS/JS format karein aur result preview karein.
- XML Formatter — XML ko beautify, minify aur validate karein, aur XML ↔ JSON convert karein.
- JS / TS Formatter — JavaScript, TypeScript aur JSX/TSX ko Prettier options ke saath beautify ya minify karein.
- Image Optimizer — Images ko re-encode aur chhota karein (JPEG/WebP/PNG), optional resize ke saath.
- Image Format Converter — Images ko PNG, JPEG aur WebP ke beech poori tarah aapke browser mein convert karein.
- Open Graph Generator — Open Graph aur Twitter meta tags generate karein, social card preview ke saath.
- Mermaid Diagram Renderer — Mermaid diagrams (flow, sequence, gantt) ko aapke browser mein SVG mein render karein.
Saare ArrayKit tools