Make simple changes to SVG graphics


Office for Mere Mortals
Your beginners guide to the secrets of Microsoft Office
Invalid email address
Tips and help for Word, Excel, PowerPoint and Outlook from Microsoft Office experts.  Give it a try. You can unsubscribe at any time.  Office for Mere Mortals has been running for over 20 years, we've never, ever revealed or sold subscriber details.  Privacy policy

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.

make simple changes to svg graphics microsoft office 26130 - Make simple changes to SVG graphics

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 simple changes to svg graphics microsoft office 26131 - Make simple changes to SVG graphics

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:

make simple changes to svg graphics microsoft office 26132 - Make simple changes to SVG graphics

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.

make simple changes to svg graphics microsoft office 26133 - Make simple changes to SVG graphics

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" />

make simple changes to svg graphics microsoft office 26134 - Make simple changes to SVG graphics

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

make simple changes to svg graphics microsoft office 26135 - Make simple changes to SVG graphics

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

make simple changes to svg graphics microsoft office 26136 - Make simple changes to SVG graphics

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.

make simple changes to svg graphics microsoft office 26137 - Make simple changes to SVG graphics

Office will import the SVG but not display that hidden part:

make simple changes to svg graphics microsoft office 26138 - Make simple changes to SVG graphics

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

 

subs profile e1563205311409 - Make simple changes to SVG graphics
Latest news & secrets of Microsoft Office

Microsoft Office experts give you tips and help for Word, Excel, PowerPoint and Outlook.

Give it a try. You can unsubscribe at any time.  Office Watch has been running for over 20 years, we've never, ever revealed or sold subscriber details.  Privacy policy
Invalid email address