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">©
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.