PageSourceSearch

https://svgoptimizer.com/

html svgoptimizer.com collected 2026-10-04 13:25:02 UTC 21,694 bytes, 483 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>SVG Optimizer – Optimize SVG Images Online</title>
7  <meta name="description" content="This free online tool is all you need for optimizing SVG images. In just two simple steps it will take care of lossless SVG optimization for you.">
8
9  <meta property="og:type" content="website">
10  <meta property="og:site_name" content="SVG Optimizer">
11  <meta property="og:title" content="Optimize SVG Images Online">
12  <meta property="og:description" content="Optimize SVG files for free. Lossless compression in your browser.">
13  <meta property="og:url" content="https://svgoptimizer.com/">
14
15  <meta name="twitter:card" content="summary">
16  <meta name="twitter:title" content="Optimize SVG Images Online">
17  <meta name="twitter:description" content="Optimize SVG files for free. Lossless compression in your browser.">
18
19  <link rel="icon" href="/images/favicon.svg">
20  <link rel="canonical" href="https://svgoptimizer.com/">
21  
22  <link rel="alternate" hreflang="x-default" href="https://svgoptimizer.com/">
23  
24  <link rel="alternate" hreflang="en" href="https://svgoptimizer.com/">
25  
26  <link rel="alternate" hreflang="de" href="https://svgoptimizer.com/de/">
27  
28  <link rel="alternate" hreflang="es" href="https://svgoptimizer.com/es/">
29  
30  <link rel="alternate" hreflang="fr" href="https://svgoptimizer.com/fr/">
31  
32  <link rel="alternate" hreflang="id" href="https://svgoptimizer.com/id/">
33  
34  <link rel="alternate" hreflang="it" href="https://svgoptimizer.com/it/">
35  
36  <link rel="alternate" hreflang="ja" href="https://svgoptimizer.com/ja/">
37  
38  <link rel="alternate" hreflang="ko" href="https://svgoptimizer.com/ko/">
39  
40  <link rel="alternate" hreflang="nl" href="https://svgoptimizer.com/nl/">
41  
42  <link rel="alternate" hreflang="pl" href="https://svgoptimizer.com/pl/">
43  
44  <link rel="alternate" hreflang="pt" href="https://svgoptimizer.com/pt/">
45  
46  <link rel="alternate" hreflang="ru" href="https://svgoptimizer.com/ru/">
47  
48  <link rel="alternate" hreflang="tr" href="https://svgoptimizer.com/tr/">
49  
50  <link rel="alternate" hreflang="uk" href="https://svgoptimizer.com/uk/">
51  
52  <link rel="alternate" hreflang="vi" href="https://svgoptimizer.com/vi/">
53  
54  <link rel="alternate" hreflang="zh" href="https://svgoptimizer.com/zh/">
55  
56  
57  <link rel="stylesheet" href="/shared/css/base.css?v=mtzzl1bp">
58  <link rel="stylesheet" href="/shared/css/article.css?v=mtzzl1bp">
59  <link rel="stylesheet" href="/shared/css/settings-panel.css?v=mtzzl1bp">
60
61  
61<script type="application/ld+json">
62  {
63    "@context": "https://schema.org",
64    "@type": "WebApplication",
65    "name": "SVG Optimizer",
66    "url": "https://svgoptimizer.com/",
67    "description": "This free online tool is all you need for optimizing SVG images. In just two simple steps it will take care of lossless SVG optimization for you.",
68    "applicationCategory": "DesignApplication",
69    "operatingSystem": "Any",
70    "offers": {
71      "@type": "Offer",
72      "price": "0",
73      "priceCurrency": "USD"
74    }
75  }
76  </script>
76
77</head>
78<body>
79  
80
81
82
83<div class="topbar">
84  <div class="topbar__inner">
85    <a href="/" class="topbar__logo logo">
86      <img src="/images/logo.svg" alt="SVG Optimizer" class="logo__image">
87    </a>
88    
89    
90    <div class="language topbar__language" data-languages="%5B%7B%22code%22%3A%22en%22%2C%22name%22%3A%22English%22%7D%2C%7B%22code%22%3A%22de%22%2C%22name%22%3A%22Deutsch%22%7D%2C%7B%22code%22%3A%22es%22%2C%22name%22%3A%22Espa%C3%B1ol%22%7D%2C%7B%22code%22%3A%22fr%22%2C%22name%22%3A%22Fran%C3%A7ais%22%7D%2C%7B%22code%22%3A%22id%22%2C%22name%22%3A%22Indonesia%22%7D%2C%7B%22code%22%3A%22it%22%2C%22name%22%3A%22Italiano%22%7D%2C%7B%22code%22%3A%22ja%22%2C%22name%22%3A%22%E6%97%A5%E6%9C%AC%E8%AA%9E%22%7D%2C%7B%22code%22%3A%22ko%22%2C%22name%22%3A%22%ED%95%9C%EA%B5%AD%EC%96%B4%22%7D%2C%7B%22code%22%3A%22nl%22%2C%22name%22%3A%22Nederlands%22%7D%2C%7B%22code%22%3A%22pl%22%2C%22name%22%3A%22Polski%22%7D%2C%7B%22code%22%3A%22pt%22%2C%22name%22%3A%22Portugu%C3%AAs%22%7D%2C%7B%22code%22%3A%22ru%22%2C%22name%22%3A%22%D0%A0%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9%22%7D%2C%7B%22code%22%3A%22tr%22%2C%22name%22%3A%22T%C3%BCrk%C3%A7e%22%7D%2C%7B%22code%22%3A%22uk%22%2C%22name%22%3A%22%D0%A3%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D1%81%D1%8C%D0%BA%D0%B0%22%7D%2C%7B%22code%22%3A%22vi%22%2C%22name%22%3A%22Ti%E1%BA%BFng%20vi%E1%BB%87t%22%7D%2C%7B%22code%22%3A%22zh%22%2C%22name%22%3A%22%E4%B8%AD%E6%96%87%22%7D%5D" data-current-lang="en" data-current-path="/">
91      <button class="language__button">
92        <span class="language__text">English</span>
93        <svg class="language__icon" viewBox="0 0 13 6" width="13" height="6">
94          <use href="/images/icons.svg#arrow-down"></use>
95        </svg>
96      </button>
97      <div class="language__overflow">
98        <ul class="language__list"></ul>
99      </div>
100    </div>
101    
102  </div>
103</div>
104
105
106  <div class="page">
107  <header class="header page__header">
108    <h1 class="header__title">Optimize SVG Images Online</h1>
109    <p class="header__text header__text_mb">This online tool is all you need for optimizing SVG images. In just two simple steps it will take care of lossless SVG optimization for you. You can compress multiple files at once, up to 50MB in size.</p>
110    <ul class="header__list">
111      <li class="header__list-item">Click on SELECT FILES, then choose up to 20 SVG files that you want to optimize. Wait until the optimization process is complete.</li>
112      <li class="header__list-item">Save each file individually or use SAVE ALL button to get them all at once in a ZIP archive.</li>
113    </ul>
114  </header>
115
116  
117  <div style="width: 100%; margin-bottom: 30px; overflow: hidden;">
118  <style>
119  .cstm { height: 90px; margin: 0 auto; }
120  </style>
121  
121<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8288203502063695" crossorigin="anonymous"></script>
121
122  <!-- svgoptimizer-top -->
123  <ins class="adsbygoogle cstm"
124       style="display:block"
125       data-ad-client="ca-pub-8288203502063695"
126       data-ad-slot="3624974453"></ins>
127  
127<script>
128  (adsbygoogle = window.adsbygoogle || []).push({});
129  </script>
129
130  </div>
131  
132
133  <div class="page__switch">
134    
135<nav class="site-switch">
136
137  
138  
139  <a href="https://svgtopng.com/" class="site-switch__tab">
140    <span class="site-switch__text">SVG to PNG</span>
141  </a>
142
143  
144  
145  <a href="https://svgoptimizer.com/" class="site-switch__tab site-switch__tab_active">
146    <span class="site-switch__text">SVG Optimizer</span>
147  </a>
148
149</nav>
150
151
152  </div>
153
154  <div id="app" class="files page__files">
155    <div class="files__buttons">
156      <label class="button files__button">
157        <svg class="button__icon" viewBox="0 0 16 16" width="16" height="16">
158          <use href="/images/icons.svg#browse"></use>
159        </svg>
160        <span class="button__text">SELECT FILES</span>
161        <input type="file" id="fileInput" class="files__input-files" multiple accept=".svg,.svgz">
162      </label>
163      <button id="clearBtn" class="button button_secondary files__button" disabled>
164        <svg class="button__icon" viewBox="0 0 16 16" width="16" height="16">
165          <use href="/images/icons.svg#clear"></use>
166        </svg>
167        <span class="button__text">CLEAR</span>
168      </button>
169    </div>
170
171    <div id="dropZone" class="files__list-outer">
172      <button id="prevBtn" class="scroll-button files__scroll-button files__scroll-button_prev" disabled>
173        <svg class="scroll-button__icon scroll-button__icon_left" viewBox="0 0 8 16" width="8" height="16">
174          <use href="/images/icons.svg#arrow-right"></use>
175        </svg>
176      </button>
177      <div id="filesScroll" class="files__list">
178        <ul id="filesContainer" class="files__list-inner"></ul>
179      </div>
180      <button id="nextBtn" class="scroll-button files__scroll-button files__scroll-button_next" disabled>
181        <svg class="scroll-button__icon" viewBox="0 0 8 16" width="8" height="16">
182          <use href="/images/icons.svg#arrow-right"></use>
183        </svg>
184      </button>
185      <div id="dropMessage" class="files__drop-caption drop-caption">
186        <svg class="drop-caption__border" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
187          <defs>
188            <clipPath id="rectMask">
189              <rect fill="#000" x="0" y="0" width="100%" height="100%" rx="10" ry="10"></rect>
190            </clipPath>
191          </defs>
192          <rect width="100%" height="100%" rx="10" ry="10" fill="none" clip-path="url(#rectMask)"></rect>
193        </svg>
194        <p class="drop-caption__text">Drop Your Files Here</p>
195      </div>
196    </div>
197
198    <div class="files__buttons">
199      <button id="convertBtn" class="button button_dark files__button" disabled>
200        <svg class="button__icon" width="16" height="16">
201          <use href="/images/icons.svg#compress"></use>
202        </svg>
203        <span class="button__text">OPTIMIZE</span>
204        <span id="convertCounter" class="button__counter" style="display: none;">0</span>
205      </button>
206      <button id="downloadAllBtn" class="button button_success files__button" disabled>
207        <svg class="button__icon" width="16" height="16">
208          <use href="/images/icons.svg#download"></use>
209        </svg>
210        <span class="button__text">SAVE ALL</span>
211        <span id="downloadCounter" class="button__counter" style="display: none;">0</span>
212      </button>
213    </div>
214  </div>
215
216  <!-- Comparison Panel -->
217  <section id="comparisonPanel" class="settings page__settings">
218    <p class="settings__title">
219      <span id="settingsFileName" class="settings__title-text"></span>
220      <span class="settings__loader-outer">
221        <span id="settingsLoader" class="loader settings__loader loader_hidden">
222          <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
223        </span>
224      </span>
225    </p>
226    <div class="settings__content">
227      <div class="settings__compare-outer">
228        <div class="image-info settings__image-info">
229          <p class="image-info__text">
230            <span class="image-info__title">Before:</span>
231            <span id="originalSize" class="image-info__bold">0 KB</span>
232          </p>
233          <p class="image-info__text">
234            <span class="image-info__title">After:</span>
235            <span id="compressedSize" class="image-info__bold image-info__savings">0 KB</span>
236            <span id="savingsPercent" class="image-info__savings">(-0%)</span>
237          </p>
238        </div>
239        <div class="compare settings__compare">
240          <canvas id="comparisonCanvas" class="compare__canvas"></canvas>
241          <span id="comparisonThumb" class="thumb compare__thumb">
242            <span class="thumb__button">
243              <svg class="thumb__icon thumb__icon_left" viewBox="0 0 8 16" width="8" height="16">
244                <path d="M6 2L2 8l4 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
245              </svg>
246              <svg class="thumb__icon thumb__icon_right" viewBox="0 0 8 16" width="8" height="16">
247                <path d="M2 2l4 6-4 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
248              </svg>
249            </span>
250          </span>
251          <button id="zoomIndicator" class="zoom-indicator zoom-indicator_hidden" title="Reset to 1:1">
252            <span class="zoom-indicator__text">100%</span>
253            <svg class="zoom-indicator__icon" viewBox="0 0 12 12" width="10" height="10">
254              <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
255            </svg>
256          </button>
257        </div>
258      </div>
259      <div class="settings__quality-outer">
260        <div class="quality settings__quality">
261          <label for="qualityInput" class="quality__field">
262            <p id="qualityLabel" class="quality__title">Precision</p>
263          </label>
264          <input id="qualityInput" type="text" class="quality__input" value="3" maxlength="1" autocomplete="off">
265          <div class="quality__range-outer">
266            <input id="qualitySlider" type="range" step="1" min="0" max="5" value="3" class="quality__range-input">
267          </div>
268          <button id="applyQualityBtn" class="button quality__button">
269            <span class="button__text">APPLY</span>
270          </button>
271        </div>
272      </div>
273    </div>
274  </section>
275
276  
277  <div style="width: 100%; margin-bottom: 30px; overflow: hidden;">
278  
278<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8288203502063695" crossorigin="anonymous"></script>
278
279  <!-- svgoptimizer-bottom -->
280  <ins class="adsbygoogle cstm"
281       style="display:block"
282       data-ad-client="ca-pub-8288203502063695"
283       data-ad-slot="7441045395"></ins>
284  
284<script>
285  (adsbygoogle = window.adsbygoogle || []).push({});
286  </script>
286
287  </div>
288  
289
290  <div class="long">
291    
292      <article class="article">
293        <h2>SVG Optimization Guide</h2>
294        <p>SVG files often contain unnecessary data that increases file size without improving visual quality. Our optimizer removes this bloat while preserving your graphics exactly as they appear.</p>
295
296        <div class="article__highlight">
297          <strong>100% Browser-Based:</strong> All processing happens in your browser. Your files never leave your device — complete privacy guaranteed.
298        </div>
299
300        <section>
301          <h2>What Is SVG?</h2>
302          <p>Scalable Vector Graphics (SVG) is a vector-based image format. Unlike raster images (like JPG or PNG) which are made up of pixels, SVG images are XML files composed of mathematical nodes, lines, shapes, and curves.</p>
303          <p>Since SVG files are essentially text files with code, they can be searched, indexed, scripted, and compressed. You can create and edit them with a text editor or vector design tools like Adobe Illustrator, Inkscape, or CorelDRAW. Because of their mathematical nature, vector images can be scaled infinitely without any loss of quality.</p>
304        </section>
305
306        <section>
307          <h2>Why Optimize SVG?</h2>
308          <p>Since an SVG is, at its core, a text file with many lines of code, it can be easily compressed. Design tools like Illustrator or Inkscape add lots of extra data to SVG files: editor metadata, comments, hidden elements, excessive coordinate precision, and verbose code. A good optimizer removes these extra lines while keeping the visual appearance intact.</p>
309          <p>If you repeat this process over the entire XML file, you can reduce the file size significantly — typically by 20-60% without any visible changes to the image.</p>
310
311          <table class="article__table article__table_colored">
312            <thead>
313              <tr>
314                <th>What Gets Removed</th>
315                <th>Result</th>
316              </tr>
317            </thead>
318            <tbody>
319              <tr>
320                <td>Editor metadata (Illustrator, Inkscape data)</td>
321                <td>20-40% smaller files</td>
322              </tr>
323              <tr>
324                <td>Comments and hidden elements</td>
325                <td>Cleaner, more maintainable code</td>
326              </tr>
327              <tr>
328                <td>Excessive decimal precision</td>
329                <td>Shorter path data, smaller files</td>
330              </tr>
331              <tr>
332                <td>Redundant attributes and styles</td>
333                <td>Better rendering performance</td>
334              </tr>
335            </tbody>
336          </table>
337
338          <div class="article__tip">
339            <strong>Visual Quality:</strong> Most optimizations preserve visual appearance. However, reducing precision may affect complex graphics with fine details — always preview results before saving.
340          </div>
341        </section>
342
343        <section>
344          <h2>How to Use the SVG Optimizer</h2>
345          <p>Using our SVG optimizer is easy and free. You don't need to sign up for an account or provide any personal information.</p>
346          <p>To begin, add one or up to 20 SVG files by clicking SELECT FILES or drag and drop them to the specified area. The tool will automatically start optimizing your files — watch the progress indicator for each image. When complete, use the precision slider to adjust coordinate decimal places if needed, then click SAVE for individual files or SAVE ALL to get everything in a ZIP archive.</p>
347          <p>Need to process more than 20 files? Just click CLEAR and add another batch. There's no limit to how many files you can optimize.</p>
348
349          <div class="article__warning">
350            <strong>Precision Setting:</strong> Lower precision means smaller files but may affect complex graphics. Start with the default (3) and adjust if needed.
351          </div>
352        </section>
353
354        <section>
355          <h2>Privacy & Security</h2>
356          <p>Your files are completely safe. All processing happens locally in your browser using WebAssembly — no files are uploaded to any server. There's no data collection, no tracking, and no registration required. Your original files remain untouched on your device, so you can always fall back to them if needed.</p>
357        </section>
358      </article>
359    
360  </div>
361  </div>
362
363  
364
365
366<footer class="footer">
367  <div class="footer__inner">
368    
369    <p class="footer__text">Your files never leave your device.</p>
370    <p class="footer__text">&copy;
370 svgoptimizer.com <span class="footer__sep">|</span> <a href="/terms" id="termsLink" class="footer__link">Terms and Privacy</a></p>
371    
372    
373  </div>
374</footer>
375
376
377  <div id="termsPopup" class="popup">
378  <div class="popup__overflow">
379    <div class="popup__title">Terms and Privacy</div>
380    <button class="popup__close" id="termsClose">
381      <svg class="popup__close-icon" viewBox="0 0 18 18" width="18" height="18">
382        <use href="/images/icons.svg#remove"></use>
383      </svg>
384    </button>
385    <div class="popup__content" id="termsContent"></div>
386  </div>
387</div>
388
389
390  <template id="fileCardTemplate">
391    <li class="files__file file" data-id="">
392      <header class="file__header">
393        <span class="file__title"></span>
394        <button class="file__close remove-btn">
395          <svg class="file__close-icon" viewBox="0 0 18 18" width="18" height="18">
396            <use href="/images/icons.svg#remove"></use>
397          </svg>
398        </button>
399      </header>
400      <div class="file__content">
401        <img src="" alt="" class="file__image file__image_hidden">
402        <div class="file__state file__state_pending file__state_visible">
403          <span class="file__state-text file__state-text_format"></span>
404        </div>
405        <div class="file__state file__state_converting">
406          <svg class="file__state-icon" viewBox="0 0 56 58" width="56" height="58">
407            <use href="/images/icons.svg#processing"></use>
408          </svg>
409          <span class="file__state-text">OPTIMIZING</span>
410        </div>
411        <div class="file__state file__state_error">
412          <svg class="file__state-icon" viewBox="0 0 53 46" width="53" height="46">
413            <use href="/images/icons.svg#error"></use>
414          </svg>
415          <span class="file__state-text">Error</span>
416          <span class="file__state-detail"></span>
417        </div>
418        <div class="file__state file__state_saving">
419          <span class="file__state-text file__state-text_saving"></span>
420        </div>
421      </div>
422      <footer class="file__footer">
423        <button type="button" class="file-button file__button file-button_hidden" disabled>
424          <span class="file-button__text"></span>
425          <span class="file-button__progress"></span>
426        </button>
427      </footer>
428    </li>
429  </template>
430
431  
431<script>
432    window.APP_CONFIG = {
433      v: 'mtzzl1bp',
434      lang: 'en',
435      siteKey: 'svgoptimizer',
436      maxSize: 52428800,
437      maxFiles: 20,
438      inputFormats: ["svg","svgz"],
439      texts: {
440        converted: 'Optimized',
441        pending: 'Pending',
442        save: 'SAVE',
443        convert: 'OPTIMIZE',
444        download: 'SAVE ALL',
445        quality: '',
446        colors: '',
447        precision: 'Precision'
448      },
449      errors: {
450        invalidType: 'Invalid file type',
451        fileTooLarge: 'File is too large',
452        conversionFailed: 'Optimization failed',
453        browserUnsupported: 'Please update your browser to use this service',
454        corrupt: 'The file is corrupted or cannot be read',
455        tooLarge: 'The file is too large to process in the browser',
456        processing: 'Processing failed, please try again',
457        loading: 'Loading error, please refresh the page',
458        svg: 'Invalid SVG file'
459      },
460      trackSuccess: 0
461    };
462  </script>
462
463  
463<script src="/shared/js/common.js?v=mtzzl1bp"></script>
463
464  
464<script src="/shared/js/jszip.min.js"></script>
464
465  
465<script src="/shared/js/comparison.js?v=mtzzl1bp"></script>
465
466  
466<script src="/shared/js/utils.js?v=mtzzl1bp"></script>
466
467  
467<script src="/shared/js/compress-converter.js?v=mtzzl1bp"></script>
467
468  <!-- Matomo -->
469  
469<script>
470    var _paq = window._paq = window._paq || [];
471    _paq.push(['trackPageView']);
472    _paq.push(['enableLinkTracking']);
473    (function() {
474      var u="https://stats.monohost.com/";
475      _paq.push(['setTrackerUrl', u+'matomo.php']);
476      _paq.push(['setSiteId', '102']);
477      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
478      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
479    })();
480  </script>
480
481  <!-- End Matomo Code -->
482</body>
483</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.