• Michael Meadows

Export Azure Icons to SVG


Recently, I needed to display Azure services in a Visio diagram that weren't available in any of the published stencil libraries. While there's a Chrome extension available, I don't trust Chrome extensions anymore, and don't use Chrome as my primary browser anymore either. As a result, I dug into the web content and figured out how to export the icons from the portal as SVG files.


It's a little hands-on, but this allows you to grab the SVG and use it for Azure-related assets you're producing.

Get icon SVG from the portal

The first step is to go to a page that has the icon you want. Once you do, bring up your browser developer tools (usually F12 does the trick). There should be a "pick element" option. Click that, and then move your mouse over the icon you're trying to capture. It should look something like this:

Click here, and look at the HTML code it has highlighted. It may be inline, or it may reference an anchor somewhere else (see the below image).

Search the HTML code for that anchor (without the pound symbol). In this example, we're looking for "FxSymbol0-053". When you found the "symbol" element, stop. You want the data in the <g> element under that.

Save the icon as an SVG file

Paste this code into a text or XML editor, and:

  • Replace the <g></g> section with the <g> element you found in the portal.

  • Replace the content of the "viewBox" attribute with the content from the "symbol" element you found on the portal.

For comparison, here's what you should end up with (style element collapsed for brevity):

Save this as a *.svg file. You can now insert that SVG file into anything that supports it. You can open it in a browser to preview it.

Enjoy

#Visio #SVG #AzurePortal #Icons #Tricks

Contact

Follow

©2018 by Michael Meadows.