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

--

--

--

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

How Can Publishers Benefit from API Solutions and Why Does It Matter?

Lets Grow More Internship Experience

HackTheBox-Cap

There’s nothing more subjective than an objective fact.

Deploy a virtual machine in Openstack then install docker and rancher on it

Must-Know Python Libraries for Every Data Scientist

galaxy shooter 2D — set up

What we learn from handling database using Django

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

Translator with Azure and Docker

Securing Azure Cognitive Services Custom Command calls to Web Endpoints, with Azure Active…

Alerting Through Azure Logic Apps

Configure a static outbound IP for Azure App Service with NAT Gateway