SVG Optimizer Online

Is SVG optimizer se SVG markup minify karein, comments, metadata aur editor cruft strip karein, aur whitespace collapse karke file size chhota karein.

Aapka SVG aapke browser mein locally optimize hota hai aur kuch bhi server par upload nahi hota.

Banaya aur maintain kiya: Udit Agarwal

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

  1. Apna SVG source input box mein paste karein.
  2. Comments, metadata, editor data, dimensions, aur whitespace ke options apni zaroorat ke hisaab se toggle karein.
  3. Optimized output aur uske upar dikhaye gaye byte savings padhein.
  4. 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 — Prettier options ke saath JavaScript, TypeScript aur JSX/TSX ko beautify karein, ya plain JavaScript 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.

Code Formatters ke aur tools

  • MongoDB Query Beautifier — MongoDB queries aur find() statements ko aapke browser mein beautify aur indent karein.
  • MongoDB Aggregation Beautifier — MongoDB aggregation pipelines ko aapke browser mein beautify aur indent karein.
  • MongoDB Explorer — MongoDB document ya collection sample explore karein aur uske field schema aur types ka anumaan lagayein.
  • OpenAPI / Swagger Formatter — OpenAPI / Swagger specs (JSON ya YAML) ko format aur validate karein, aur paths tatha operations ginein.
  • CSS Unit Converter — px, rem, em, pt aur % ke beech live convert karein.
  • Glob to Regex — Ek glob pattern ko JavaScript regex mein convert karein aur test karein.
  • HTML to Markdown — HTML ko clean Markdown mein convert karein GFM tables ke saath.
  • TOML Formatter — TOML format karein aur use JSON se aur JSON tak convert karein.
  • logfmt to JSON Converter — logfmt key=value logs ko JSON mein aur wapas convert karein, seedhe aapke browser mein.
  • dotenv to JSON — .env file ko JSON object mein aur JSON ko wapas .env mein badlein
  • CSV to Markdown Table — CSV ya TSV ko ek GitHub-flavored Markdown table mein badlein
  • INI to JSON Converter — INI config ko JSON mein aur JSON ko wapas INI mein convert karein

Code Formatters ke sabhi tools dekhein (32) · Saare tools