How to convert the code which makes an SVG illustration into something that will work with Word, Excel and PowerPoint and also change the SVG code to alter the colors and background settings.
Usually, SVG format graphics are supplied as a separate file but sometimes they come as a long text string like this:
<svg viewBox='0 0 2048 2048' xmlns='http://www.w3.org/2000/svg'> <path d='M1920 0q26 0 49 10t41 27 28 41 10 50v1792q0 26-10 49t-27 41-41 28-50 10H512q-26 0-49-10t-41-27-28-41-10-50v-256H128q-26 0-49-10t-41-27-28-41-10-50V512q0-26 10-49t27-41 41-28 50-10h256V128q0-26 10-49t27-41 41-28 50-10h1408zm0 1920v-384h-640q0 26-10 49t-27 41-41 28-50 10H512v256h1408zm0-512v-384h-640v384h640zm0-512V512h-640v384h640zm0-512V128H512v256h1408zM747 1440h212l184-832H939l-87 475-109-475H541l-104 478-94-478H137l185 832h215l102-478 108 478z' fill='#000000'> </path> </svg>
That can’t be pasted into an Office document directly. Happily, we’re just dealing with text so it’s a easy workaround.
In short: make a text file with an SVG extension, paste in the SVG code and save. Then insert the new .SVG into Word, Excel or PowerPoint.
- Open Notepad (Windows), TextEdit (macOS) or any other text editor you prefer.
- Our Windows preference is NotePad++
- Paste in the SVG code. It’s plain text / XML but make sure it starts with <svg and ends with </svg>
- Save the text file. The default extension is .txt, change that to .svg.
- Now open your Office document and Insert | Pictures | This device and select the .svg file you just created.
As you can see, that SVG code draws a Microsoft Word icon.
Change SVG colors for Word and PowerPoint
SVG’s can be recolored in Office from Graphics Format | Graphics Fill however that’s quite a blunt instrument because Office will change everything to a single color.
As we explained in make simple changes to SVG graphics, the SVG code can be changed directly because it’s just plain text. Change that text then insert the SVG again.
Look for color codes in the SVG text, most likely fill: and starting with a # for a hex color code.
That simple change makes the SVG the correct color, Word’s Blue
Admittedly, this is a simple example with one color that could be done inside Office. But it’s a handy trick to keep in mind when the SVG has multiple colors which Office might mess up.
Add or change background color of an SVG
Unfortunately, this does NOT work for SVG background colors, Office will make the background transparent and ignore any background setting.
For example, in the first <svg …. > code block might have style="background-color:gray" or similar. Changing that color setting is honored in Edge, Chrome and other modern browsers, but not when inserted into an Office document. Grrrrr.
Better Icon, illustration or SVG editing trick in Office
PDF and SVG previews now possible in Outlook
Finding more SVG or Icons for your Office documents
Make your own blue checkmark Twitter ‘verified’ in Office
