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.

Research:

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

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

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

--

--

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