Extending Microsoft Azure Cloud and AI Symbol SVG Libraries with Draw.io SVGs

Use case:

I often need to create diagrams of architectures and components. I love SVGs as they tend to look good in my diagrams and don’t need me to download high/low resolution versions (increasing the size of my diagrams).

Microsoft Provide a fantastic set of SVG Icons (https://www.microsoft.com/en-us/download/details.aspx?id=4193), however when I was using Draw.io I found that I had icons which were not available. In order to use them in for example PowerPoint I would need to extract the SVG from Draw.io or find an icon on Google.

Sample of the Azure.xml Icons Available from Draw.io:

Azure Icons from Github in Draw.io Interface

Samples of Icons Available from Draw.io Only:

Desired State:

  • The ability to use any of the Icon Packs from Draw.io in my own PowerPoint.
  • These should be SVG files on my hard drive that I can search by.



Programmatic Requirements (Pseudocode):

  • Explanation: The Root Element of the XML File is a JSON structure that has an element call XML and what looks like Base64 (I know this because of the research section).
  • Use something to make your job easier. GCHQ provides the CyberChef tool to do a lot of common task related to cryptography but also web standards in general. Let’s Paste the XML content of the first JSON into it and have a look
  • This tells us a few things: The content is XML, is Base64 Encoded and GZIP Compressed.
  • The content we are interested is int the style section of the XML and itself Base64 encoded.
  • Let’s grab everything left of the image=data:image/svg+xml tag and run it through CyberChef Again. This time let’s remove the Deflation (as it’s not compressed)
  • Having worked with SVGs Before I know this is the actual content we want and the content we want to commit to a file.

CODEY CODE Time (Python):


Outputs of CODEY CODE Time (Python):

  • The STDOUT will tell you which files are being parsed and what icons were discovered in that file
  • The Icons will appear in the same folder as the script but you can change that
  • If you want to view the Icons in your Code Editor, Install an extension.
  • If you want to view the icons in Explorer install an SVG Viewer
  • Error Messages will show you icons that may have weird characters
  • Any PNG or other formatted icons will not appear as they are excluded by the regex


I have an extra 2,000 icons to play with

Love podcasts or audiobooks? Learn on the go with our new app.

How to detect the face of live video Streaming and blur the face Using Opencv

Here’s how you can turn off auto play videos on Facebook : Gadget Game News

Code refactoring

Programming — A Digital History

Learn GoF Design patterns to solve problems in software design

Influence of Cisco DEVASC 200–901 Practice Exam on Cisco DevNet Associate Exam

How to create a duotone icons font

Charles Proxy, I wish I had known this tool sooner…

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
Andrei Hawke

Andrei Hawke

More from Medium

Run A Small/Medium Sized Wikipedia Clone on Microsoft Azure

Building a Slack Slash Command with Azure Logic Apps

Main overview screen of Slack App, highlighting where to add slash commands

Your Future in Azure Cloud Technology.

Azure CosmosDB Key Rotation: Monitoring and Alerts