Some simple changes to SVG graphics can bypass some of the more annoying limits of SVG support in Word, Excel and PowerPoint for Office 2019/365.
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. ‘Change to Shape’ gives strange results depending on the SVG (believe us, we’ve tried <sigh>).
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: that will take 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 also 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 should be fairly easy.
We’d like to remove the letters from the graphic before adding to an Office document. In this example, the letters all have ID tags (e.g. ID="U1" or ID="G").
Just remove the lines you don’t want, then Save As … For this example, all that’s left are the lines for the circle and rectangle (bar).
Alternative: Visibility
If full removal doesn’t suit, there’s a middle-ground. A visibility attribute is available for any SVG element.
For example to hide the rectangle/bar just add visibility=”hidden” to that element.
Office will import the SVG but not display that hidden part:
Interestingly, if you ‘Convert to Shape’, any hidden elements will reappear! But can be hidden again from the Selection Pane or deleted entirely.
SVG graphics coming to Office – at long last!
Editing icon or SVG trick coming to Office
Office for iPhone/iPad gets Icons or SVG graphics
Is it safe to use Icons / SVG in Outlook emails?
Finding more SVG or Icons for Office
