top of page
Writer's pictureMichael Meadows

Export Azure Icons to SVG


stock image of hands using ruler to and knife to cut paper

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:

Icon highlighted in inspector mode

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

HTML code with "use" reference for the icon

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.

SVG code in browser's developer tools

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

Example of SVG file markup

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.

Example showing SVG file in web browser

Enjoy

348 views0 comments
bottom of page