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:

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.

Research:

• The Draw.io extended Icon Sets are stored in https://github.com/jgraph/drawio-libs/tree/master/libs
• The XML Format is a bit weird but using the article below I was able to decipher it:

https://softwarerecs.stackexchange.com/questions/42394/is-there-an-xml-renderer-for-draw-io-graphs

Programmatic Requirements (Pseudocode):

• Clone the https://github.com/jgraph/drawio-libs/tree/master/libs repo and have a look at one of the XML files

• 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):

• If you follow the logic above you should be able to write this in any language, but below is my Python Version
• I loved this article for logging so I am following it: https://medium.com/better-programming/how-to-write-log-files-that-save-you-hours-of-time-1ff0cd9ae2ed
• The code is Below so I am not going to spend too much time on it

https://gist.github.com/ahaw021/217a9ed8f3239e274e4ae07fd4d0cec1.js

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

Result:

I have an extra 2,000 icons to play with