Extending Microsoft Azure Cloud and AI Symbol SVG Libraries with Draw.io SVGs
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:
- 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.
- 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:
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
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