Transforming svg files into symbols for svg inline-use (no internet required)

I, for the life of me, could not find a single python library or npm package to get this simple job done — directly transforming a svg image to a svg symbol for inline svg use in web development. Now for those of you who are confused, I am referring to using:

as compared to using:

Code snippet by Author | The full svg element code

to render the following icon:

in web applications:

Image for post
Image by Author | Example of use icons in a web application — Icons are circled in red

While there are many reasons why svg icons should be used in comparison to font icons .(eot|ttf|otf|woff), the following is a simple table of comparisons:

Image for post
Image by Author | Table of comparisons — Font Icons vs Inline SVG Usage

However, my main reason for switching to svg is rather unconventional. While working as a web developer 2 years ago, the security of my work environment was particularly stringent and blocked browser access to font icon files with extensions .(eot|ttf|otf|woff) All my font-awesome icons rendered by bootstrap were now blocked, causing my UI design to fail instantly overnight.

As such, it was such a blessing in disguise when I found readily available utilities online such as https://icomoon.io/ to convert these files into .svg format along with the added benefits of using svg icons instead of font icons. I proceeded to set up the template for inline svg use and convert the old icons accordingly:

Image for post
Image by Author | Using the https://icomoon.io/ tool to convert the icon svg-file into a symbol

However, another issue occurred when I found myself having to change an icon right before a presentation. Naturally, with no access to utilities such as IcoMoon App @https://icomoon.io/ on my local laptop, I had to forsake the edits and present what I thought could have been better, which led me to writing this article to share my discovery on figuring out the exact transformation algorithm and implement it myself.

Surprisingly, there was no direct and straight forward answer to this. While svg in-line use was common, I could not find any specific npm or python packages which appeared readily in my google search for “convert svg into symbol”. The closest I found was this application deployed at: https://svg-to-symbol.herokuapp.com/ which was a minimalistic setup of the function I required:

Image for post
Image by Author | A screenshot of the application deployed at https://svg-to-symbol.herokuapp.com/ | Note that this web application tool enabled users to convert only 1 svg image at a time | Requires users to copy and paste the svg code manually | Not exactly very user-friendly UX

Although the application does have some UI and UX quirks — in particular , I had to zoom out of my screen to 75% before I could see the “Convert” button, I could at least study the author’s code and finally uncover what transformation processes were involved in converting a svg image to a symbol. In a nutshell, it leveraged on the npm package known as SVGSpriter — which encompasses only a part of the functionality I was seeking. Based on this web app, I chose to develop my backend api in nodeJS as well but reconfigured it to use vanilla JS rather than angularJS. My application is now currently deployed at: https://svg2symbol.herokuapp.com/

Image for post
Image by Author | Preview of my heroku web app at https://svg2symbol.herokuapp.com/ | Note that this enables users to import in multiple svg images at one go | No manual input of svg code is necessary on the users’ end
Image for post
Image by Author | Another showcase of my web app at https://svg2symbol.herokuapp.com/ | Displaying both symbol definition and the code snippet for HTML svg use
Image for post
Image by Author | Another showcase of my web app at https://svg2symbol.herokuapp.com/ | Contains a basic implementation guide of using the 2 files exported (symbol-defs.svg) from the app

In essence, this journey of discovery was difficult despite the simplicity of it. Inline svg use is growing increasingly common but the availability of known localised tools to convert font icons for legacy browsers is strangely scarce. Hope someone has found this article enlightening and feel free to fork the code at: https://github.com/incubated-geek-cc/svg2symbol for a local version set-up.

Thanks for reading!

Written by

Data Analyst ● Full-Stack Developer ● Geospatial Intelligence | An Analyst who works primarily in Land Planning & the Healthcare Sector

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store