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

Azure Icons from Github in Draw.io Interface

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:

Programmatic Requirements (Pseudocode):

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

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

Result:

I have an extra 2,000 icons to play with