GLYPHICONS - SVG tool

<!DOCTYPE HTML> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>GLYPHICONS - SVG tool</title> <meta name="description" content="SVG tool allows you to quickly upload and manipulate up to 25 individual SVG files from any GLYPHICONS set."> <meta name="author" content="Jan Kova艡铆k"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <meta name="robots" content="index, follow"> <link rel="shortcut icon" href="/favicon.ico"> <meta property="og:image" content="https://www.glyphicons.com/img/glyphicons-og.jpg"> <meta property="og:image:secure_url" content="https://www.glyphicons.com/img/glyphicons-og.jpg" /> <meta property="og:image:type" content="image/jpeg" /> <meta property="og:image:width" content="860" /> <meta property="og:image:height" content="760" /> <meta property="og:image:alt" content="GLYPHICONS logo with a few example icons from the Basic set" /> <meta property="og:type" content="website" /> <meta property="og:title" content="SVG tool" /> <meta property="og:description" content="SVG tool allows you to quickly upload and manipulate up to 25 individual SVG files from any GLYPHICONS set." /> <meta property="og:site_name" content="GLYPHICONS.com" /> <meta property="og:url" content="https://www.glyphicons.com/tools/svg/" /> <link rel="stylesheet" href="/css/style.css?v=120"> <link rel="stylesheet" href="/tools/svg/node_modules/@simonwep/pickr/dist/pickr.min.css"> <script type="text/javascript" src="https://transactions.sendowl.com/assets/sendowl.js"></script> <script src="/js/libs/modernizr.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-19618718-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-19618718-1'); </script>  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css"/> <script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-19618718-1"></script> <script src="/js/libs/modernizr.js"></script> <script src="/js/libs/cookie-bar.js"></script>  <link rel="stylesheet" href="/css/owl.carousel.css"> <link rel="stylesheet" href="/css/owl.theme.default.css"> </head> <div class="page"> <div class="announcement-bar" style=""> <p> 馃尡 New update for Farm set is here, and with it new icons! <a href="/sets/farm/" title="Reconnect with nature and enjoy healthy and nutritionally rich food.">Check it out</a> or read <a href="/blog/farm-set-update-1-1/">more on the blog</a>. </p> <a href="#" class="btn-close-announcement-bar">close</a> </div> <header><div class="in"> <a href="#" class="btn-show-menu"><i></i> Menu</a> <h1><a href="/" title="Back to GLYPHICONS home page">GLYPHICONS</a></h1> <nav> <ul> <li><a href="/" title="Back to GLYPHICONS home page">Home</a></li> <li><a href="/license/" title="GLYPHICONS Regular license">License</a></li> <li><a href="/motivation-behind-icons/" title="Motivation behind icons">Motivation</a></li> <li><a href="/faq/" title="Frequently asked questions">FAQ</a></li> <li><a href="/contact/" title="Contact me">Contact</a></li> <li><a href="/blog/" title="Blog maintained and curated by the author of the GLYPHICONS icons, graphic designer Jan Kova艡铆k">Blog</a></li> </ul> </nav> <div class="header-action"> <a href="#" class="btn-sendowl-cart"><span id="page-cart"></span></a> <a href="https://transactions.sendowl.com/customer_accounts/11058/login" title="Log in to your account to view all your purchases of your GLYPHICONS products in just one place.">Log In</a> </div> </div></header> <section><div class="in"> <aside> <div class="aside-item"> <h2 class="h2-gray">Icon sets</h2> <ul> <li><a href="/sets/basic/"> Basic </a></li> <li><a href="/sets/halflings/"> Halflings </a></li> <li><a href="/sets/filetypes/"> Filetypes </a></li> <li><a href="/sets/smileys/"> Smileys </a></li> <li><a href="/sets/humans/"> Humans </a></li> <li><a href="/sets/mind/"> Mind </a></li> <li><a href="/sets/weather/"> Weather </a></li> <li><a href="/sets/camera/"> Camera </a></li> <li><a href="/sets/contagion/"> Contagion </a></li> <li><a href="/sets/arrows/"> Arrows </a></li> <li><a href="/sets/farm/"> Farm <i class="item-badge item-badge-updated">Updated</i> </a></li> </ul> </div> <div class="aside-item"> <h2 class="h2-gray">Collections</h2> <ul> <li><a href="/#glyphicons-collections">Icon sets</a></li> </ul> </div> <div class="aside-item"> <h2 class="h2-gray">Tools</h2> <ul> <li><a href="/tools/social/"> Social <i class="item-badge item-badge-updated">Updated</i> </a></li> <li><a href="/tools/svg/" class="act"> SVG </a></li> </ul> </div> <div class="aside-item"> <h2 class="h2-gray">Extras</h2> <ul> <li><a href="/label/" title="This small, bold font is designed to shine in compact spaces. Ideal for adding brief texts to your icons, symbols, signs, and illustrations">Label</a></li> </ul> </div> </aside> <div class="section-content"> <article class="article"> <h1>SVG tool</h1> <a href="#svg-tool" class="btn-buy btn-tool btn-scroll-to-el">Free tool</a> <ul class="table-list"> <li> <p class="item-name">Version:</p> <p class="item-value"><a href="#more-info" class="btn-scroll-to-el">1.1</a> <span>(updated 5. 8. 2021)</span></p> </li> </ul> <p>Quickly change the color or other attributes of individual SVG files from any GLYPHICONS set. You may upload up to 25 files at once. Its biggest benefit is, that unlike most of conventional desktop applications, it will carefuly change only selected SVG attributes and keep files originally optimized and lightweight.<br> <a href="#more-info" class="a-ico btn-scroll-bottom btn-scroll-to-el"><i>More info</i></a> </p> </article> <div id="svg-tool" class="svg-tool"> <div id="svgoption" class="stool-options js-stool-options"> <div class="stool-options-head"> <div class="stool-options-head-left"> <span class="stool-options__title btn-options">SVG options</span> </div> <div class="stool-options-head-right"> <a href="#" id="restart-tool" class="stool-options__btn">Restart the tool</a> <a href="#" id="apply-changes" class="stool-options__btn">Finish editing</a> </div> </div> <div id="options-primary" class="stool-options-primary"> <div class="stool-option"> <label class="stool-option-label"> <input type="checkbox" name="change-color" id="change-color" /><i class="like-checkbox"></i>Change color </label> <div class="stool-option-secondary"> <span class="stool-option-color"> <input type="text" name="color" id="color" value="#FF0000" /><span class="js-color-picker"></span> </span> or <a href="#" id="pick-color">pick a color</a> </div> </div> <div class="stool-option"> <label class="stool-option-label"> <input type="checkbox" name="remove-numbering" id="remove-numbering" /><i class="like-checkbox"></i>Remove numbering </label> <div class="stool-option-secondary"> (this will remove numbers from file names, please keep the rest of file name same if possible) </div> </div> <div id="option-viewbox" class="stool-option"> <label class="stool-option-label"> <input type="checkbox" name="change-viewbox" id="change-viewbox" /><i class="like-checkbox"></i>Change viewBox </label> <div class="stool-option-secondary"> <span class="stool-option-viewbox"> <input type="text" name="viewbox" id="viewbox" value="0 0 32 32" pattern="\d+ \d+ \d+ \d+" /> </span> (min-x, min-y, width, height) </div> </div> </div> </div> <div class="stool-dropbox" id="dropbox"> <div class="stool-dropbox-content"> <input type="file" id="dropbox-files" multiple="" accept="image/*" class="visually-hidden" onchange="handleFiles(this.files)" /> <label for="dropbox-files">Browse</label> <div class="stool-dropbox__note">or drop individual SVG files here</div> </div> </div> <div class="stool-preview" id="preview"></div> <div class="stool-info stool-info--active" id="info-start"><p class="p-ico-info"><span>You may upload up to 25 SVG files at once. This tool is currently optimized and working only for GLYPHICONS individual SVG icons.</span></p></div> <div class="stool-info" id="info-before-changes"><p class="p-ico-info"><span>Now please change any SVG options above. Some changes will be visible in a real time, some after you confirm your changes with "Finish editing" button in top right corner.</span></p></div> <div class="stool-info" id="info-after-changes"><p class="p-ico-info"><span>Once you're finished with your SVG settings, please use "Finish editing" button in top right corner to get all your files in one ZIP file.</span></p></div> <div id="overlay-error" class="stool-overlay stool-overlay-error"> <i class="ico-alert pulse"></i> <p><strong>Some files don鈥檛 seem right!</strong> This tool is made to work only with original individual SVG files from any GLYPHICONS sets, any other files have been removed.</p> <a href="#" id="error-understand" class="btn-orange">I understand</a> </div> <div id="overlay-waiting" class="stool-overlay stool-overlay-waiting"> <i class="ico-refresh rotation"></i> <p><strong>Please wait!</strong> This will take just a moment...</p> </div> <div id="overlay-done" class="stool-overlay stool-overlay-done"> <div class="ico-done"></div> <p><strong>Done!</strong>You may download your modified files.</p> <a href="#" id="download-zip" class="btn-red">Download ZIP</a> <p><a href="#" id="restart-tool-2" class="a-ico btn-restart"><i>Restart the tool</i></a></p> </div> </div> <article id="more-info" class="article"> <div class="article-set-info-list"> <div id="svg-tool-advantages"> <h2>When to use this tool instead of vector editor?</h2> <p>If you're getting ready SVG icons for your new project, you often need to change only their color or size, as all other visual attributes can be manipulated via external style sheet. Here are the biggest benefits of this tool.</p><br /> <div class="list-ico-item"> <i class="ico-code"></i> <p> <strong>File optimization</strong><br /> Individual SVG files are manually optimized, have a clean inside structure and thus a really small file size. That鈥檚 something you鈥檙e very likely to lose, when you try to re-export files from the conventional desktop vector editor. This tool can carefully update only the selected attributes and left the rest of the file unaffected. </p> </div> <div class="list-ico-item"> <i class="ico-file-duplicate"></i> <p> <strong>Bulk editing</strong><br /> This tool is made especially for bulk editing of SVG icons, so you can upload a multiple SVGs at the time and change the appearance of all of them at once. The best thing is that you can even upload and edit SVG icons with different sizes at the same time. </p> </div> <div class="list-ico-item"> <i class="ico-credit-card-off"></i> <p> <strong>Handiness and price</strong><br /> Don't use a sledgehammer to crack a nut! You don't need to buy and install pricey software, when all you need is to make some basic changes to your SVG icons. Upload them directly in your browser, change what you want and download them immediately back to your computer in one ZIP file. </p> </div> </div> </div> <p>If you鈥檙e eager for more details, <a href="/blog/the-first-version-of-svg-tool/">there鈥檚 a blog post about SVG tools' first version</a>.</p> </article> <script> var svgToolZipArchiveFilename = '_readme.txt'; var svgToolZipArchiveFileContent = "-------------------------------------------\n" + "THANK YOU!\n" + "-------------------------------------------\n\n" + "GLYPHICONS SVG tool has been made available for all GLYPHICONS customers for free. This is possible only thanks to your support. The purchase of any icon set(s) from www.glyphicons.com will help me with the future development of new icons and improvements of this tool and others. Also a nice Tweet or message means a lot and helps me to stay motivated!.\n\n" + "If you would like to be among the first to hear about all the news, simply follow https://twitter.com/@glyphicons on Twitter or keep an eye on the new blog: https://www.glyphicons.com/blog/.\n\n" + "Is there something you don't like or think it needs to be improved? Great, please write me at: glyphicons@gmail.com and I'll get back to you!"; </script> </div></section> <footer><div class="in"> <div class="footer-action"> <div class="footer-desc"> <h1><a href="/">GLYPHICONS</a></h1> <p>GLYPHICONS<sup>庐</sup> are precisely prepared monochromatic icons and symbols, created with an emphasis to simplicity and easy orientation.</p> </div> <div class="footer-nav"> <div class="footer-nav-item"> <h2 class="h2-gray">Sets</h2> <ul> <li><a href="/sets/basic/"> Basic </a></li> <li><a href="/sets/halflings/"> Halflings </a></li> <li><a href="/sets/filetypes/"> Filetypes </a></li> <li><a href="/sets/smileys/"> Smileys </a></li> <li><a href="/sets/humans/"> Humans </a></li> <li><a href="/sets/mind/"> Mind </a></li> <li><a href="/sets/weather/"> Weather </a></li> <li><a href="/sets/camera/"> Camera </a></li> <li><a href="/sets/contagion/"> Contagion </a></li> <li><a href="/sets/arrows/"> Arrows </a></li> <li><a href="/sets/farm/"> Farm <i class="item-badge item-badge-updated">Updated</i> </a></li> </ul> </div> <div class="footer-nav-item"> <h2 class="h2-gray">Support</h2> <ul> <li><a href="/license/" title="GLYPHICONS Regular license">License</a></li> <li><a href="/motivation-behind-icons/" title="Motivation behind icons">Motivation</a></li> <li><a href="/faq/" title="Frequently asked questions">FAQ</a></li> <li><a href="/contact/" title="Contact me">Contact</a></li> <li><a href="/blog/" title="Blog maintained and curated by the author of the GLYPHICONS icons, graphic designer Jan Kova艡铆k">Blog</a></li> <li><a href="/cookies/" title="This page describes how GLYPHICONS.com s.r.o. handle all cookies on www.glyphicons.com">Cookies</a></li> </ul> </div> <div class="footer-nav-item"> <h2 class="h2-gray">Your Account</h2> <ul> <li><a href="#"><span id="page-cart-footer"></span></a></li> <li><a href="https://transactions.sendowl.com/customer_accounts/11058/login" title="Log in to your account to view all your purchases of your GLYPHICONS products in just one place.">Log In</a></li> </ul> </div> </div> </div> <p>漏 2010 - 2024 GLYPHICONS<sup>庐</sup> All rights reserved.</p> <p>All logos and trademarks in Social tool are the property of the respective trademark owners. GLYPHICONS<sup>庐</sup> is a registered trademark of GLYPHICONS.com s.r.o. </p> <p class="p-last"><a href="#" class="a-ico btn-scroll-top"><i>Back to the top</i></a></p> </div></footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script>window.jQuery || document.write("<script src='/js/libs/jquery-3.2.1.min.js'>\x3C/script>")</script> <script src="/js/libs/clipboard.min.js"></script> <script src="/js/libs/js.cookie.min.js"></script> <script src="/js/libs/tooltipster.bundle.min.js"></script> <script src="/js/global.min.js?v=120"></script> <script src="/tools/svg/node_modules/@simonwep/pickr/dist/pickr.es5.min.js"></script> <script src="/tools/svg/js/main.js?v=3"></script> <script src="/tools/svg/node_modules/file-saver/dist/FileSaver.min.js"></script> <script src="/tools/svg/node_modules/jszip/dist/jszip.min.js"></script>  <script src="/js/libs/owlcarousel/owl.carousel.min.js"></script> <script> $(document).ready(function(){ $('.owl-carousel').owlCarousel({ items:1, stagePadding:1, startPosition:1, loop:true, margin:10, nav:false, }); }); </script> <script src="/js/libs/owlcarousel/owl.carousel_keyboard.js"></script> </body> </html>

CINXE.COM

GLYPHICONS - SVG tool