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 an svg symbol for inline svg use in the web development. Now for those of you who are confused, I am referring to using:
as compared to using:
to render the following icon:
in web applications:
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:
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:
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 write this article to share my discovery on figuring out the exact transformation algorithm and implement it myself.
Surprisingly, there was no direct and straightforward answer to this. While svg in-line use was common, I could not find any specific npm or python packages that 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:
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 an 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.glitch.me/ (Backup site: https://svg2symbol.onrender.com.)
In essence, this journey of discovery was difficult despite its simplicity. 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!
