Edit SVG colors in Word, Excel and PowerPoint the Easy Way

Office-Watch.comLast updated: 14 July 2026

Microsoft Excel,Microsoft Office,Microsoft Outlook,Microsoft Powerpoint,Microsoft Word,Office 2019,Office 2021 / Office LTSC,Office 2024,Office 365

Microsoft Office lets you drop an SVG graphic into Word, Excel or PowerPoint, then recolor the whole thing and nothing more. Want the circle orange and the bar black? The fix is simpler than you would guess: open the SVG in Notepad or any plain text editor, change a few color values, delete or hide the parts you do not want, then insert it into your document. No design software, no subscription, no Convert to Shape weirdness. Here is exactly how to do it, using a real SVG as the example.

Some simple changes to SVG graphics can bypass some of the more annoying limits of SVG support in Word, Excel and PowerPoint for Microsoft 365 and Microsoft Office back to Office 2019.

Here’s a simple SVG with three parts:

the circle <circle>
the rectangle <path id=”bar” …>
letters are defined in other <path … > and <use …> statements.

In this article we’re using an SVG from Wikipedia which has the features we need to show the features and limitations of Microsoft’s SVG editing.

If we import into Office, it can only recolor the entire SVG not different colors for each segment. ‘Convert to Shape’ gives strange results depending on the SVG (believe us, we’ve tried).

The simple solution is to dig into the SVG and change the color settings before importing into Office. It’s also possible to remove unwanted elements (like the letters) from the SVG. See Finding more SVG or Icons for Office .

Editing an SVG

Because SVG is a vector format, the entire description is in plain text. There are SVG editors but for simple changes all you need is a plain text editor.

Open the SVG in a text editor. Windows has Notepad, macOS has TextEdit. We prefer Notepad++ .

Make a copy of the original SVG for editing. If you make a mistake, the original is always available to try again.

Change SVG colors

When you open an SVG it looks really scary but ” Don’t Panic ” all we need is the color settings.

Search the text for fill: which takes you to the right places. Then look for the # symbol which is usually the color setting:

There are several formats for color settings in SVG, two interest us.

HTML Hex color codes. Commonly used online. e.g., #ffffff is white, #000000 is black.

RGB codes are available in SVG and good for Office users, because RGB is also used for colors in Word, PowerPoint etc. An Office color setting can be used in the SVG. e.g. rgb(255, 165, 0) is an orange that can be set in Office from the Custom Color dialog.

RGB in SVG graphics means you can take colors in your Office document and copy them exactly into the graphic. Or just use the Office color selector to make your choices before copying the RGB values.

Here we’ve changed the color of the circle and bar to rgb(255, 165, 0) and rgb(0,0,0) respectively.

<circle id="ring" style="fill:none;stroke:rgb(255, 165, 0);stroke-width:70" cx="250" cy="202" r="167"/>
<path id="bar" style="fill:none;stroke:rgb(0,0,0);stroke-width:77" d="m 0,202 h 500" />

Removing SVG elements

Anyone familiar with HTML or CSS should have no trouble with the basics of SVG. Identifying each element is fairly easy.

We’d like to remove the letters from the graphic before adding it to an Office document. In this example, the letters all have ID tags (e.g. id="U1" or id="G").