SVGs are the common format for icons and illustrations in PowerPoint. They’re terrific, until you try to change the fill or line colour of multi-colour graphics, which is when they go wrong. However, with a bit of clever coding, you can create Smart Icons and Illustrations where you can select what parts of an SVG will change fill colour, which parts will change line colour, and which parts don’t change at all, giving you a terrific degree of creative freedom and allowing your icons and illustrations to change in response to your theme colour, template, and brand.
(Scalable Vector Graphics) is a commonly used vector graphics format, especially prominent on the web. As it’s vector-based, there is no loss of quality when scaling, unlike a traditional picture like a JPEG or PNG (which are raster-based).
In PowerPoint SVG graphics are great for icons and illustrations, and all the
Single object | PowerPoint treats SVGs as a single object, even though they can be made up of many shapes — it’s good for performance, keeps your selection pane tidy, and the smart guides in PowerPoint won’t try to latch onto every shape. You can break apart an SVG into individual PowerPoint shapes if you need to (select the SVG, then Ungroup it once to convert to PowerPoint shapes and ungroup a second time to break it apart into individual elements (Ctrl + Shift + G on a PC or Alt + Shift + Command + G on a Mac, if you have three hands).
Scaling outlines | Any outlines on the SVG scale to retain their original appearance if you resize the graphic, something that PowerPoint shapes won’t do, so you have to fix it manually.
You can still manually change the fill and outline colour, and the outline width, but you don’t have as much granular control over the appearance of each shape as you do with PowerPoint shapes. However, it’s generally sufficient for graphics like icons, for example.
Crop | You can crop SVGs just like you can with images. It’s an odd one, but can sometimes be useful and something you definitely can’t do with PowerPoint shapes.
Theme colours | PowerPoint shapes can be tied to specific theme colours, making them adapt to different masters and templates. And if you use several PowerPoint shapes to form an icon or illustration, each of which is tied to a different theme colour, then the colours of those shapes will change to match new theme colours, which is great for rebranding. However, SVGs are typically tied to a single colour, so you can’t benefit from beautiful multi-colour icons and illustrations. What’s more, if you break apart the SVG into separate PowerPoint shapes, then changing the colour can result in all sorts of odd behaviours, with extra shape fills or lines that you didn’t want.
However, with a bit of coding trickery, you can create SVGs where you control which parts of it change fill colour, which parts change line colour, and which parts won’t change at all. You can choose which parts of an SVG tie into your template theme colours. And ultimately allow people to create presentations with on-brand icons that they can control without messing them up.
Before we get into it, we need to look at some of the fundamentals that make up an SVG file. Below you can see a very basic SVG graphic with three circles, and on the left of it you can see the the same file opened up in a text editor. I have simplified the code a bit to make it easier for me to explain, but these principles will be the same in any SVG file.
The important concept to understand from the code above is classes. Every shape has a class assigned to it (1), and these classes are defined before the shapes (2). In this example, the class “Purple” says that all shapes with this class will have a fill colour of purple. Two of the circles have the class of “Purple” applied to them, and those two circles are indeed drawn as purple circles. You can define many properties in a class, but for use in PowerPoint a class can be used to give multiple shapes in an SVG the same fill colour, outline colour, or outline weight. Classes are what make all of this work.
We’ve found a number of special SVG classes that allow you to link shapes in an SVG to a theme colour in PowerPoint. Let’s look at the example from above again, but this time change the class name of “Purple” to “MsftOfcThm_Accent1_Fill_v2”. On the right you can see what this SVG now looks inside a vanilla new file in PowerPoint — the purple circles are now blue, which is Accent 1 in the basic new file Theme Colours.
By renaming the class of “Purple”, we’ve tied the circle fill colour to Accent 1 in the theme colours. The fill colour of these circles will now automatically change to Accent 1 of any template they are on. So if you paste the SVG into another presentation with a different brand, the colours will automatically change to match the new brand.
It’s important to note that the fill colour of purple defined in the SVG was completely ignored by PowerPoint — the circles are now blue instead. By using one of the special class names, you essentially allow PowerPoint to overwrite some properties within that class — fill colour of purple is now overwritten with whatever Accent 1 is.
With that out of the way, let’s look at the class name itself. The class name is made out of 4 parts, all of which are separated by an underscore (see the image below). Parts 1 and 4 are not of particular interest — they’re important to make it work, but they don’t allow you to control the outcome (although future version 3 of this class name might behave differently). Parts 2 and 3 on the other hand help you define what theme colour you want to use, and where you want to apply it. The image below shows you the 10 different colours you can use, either as a fill or an outline (outline is called stroke here). We know that auto-generated tints in PowerPoint are also accessible via class names, but we think using these tints is generally bad practice (as they’re rarely on-brand and some of the autogenerated tints can be garish colours).
There are some interesting side effects of using these classes that be hugely advantageous for greater control over the style and format of your SVG icons and illustrations in PowerPoint. One of them is locking the fill colour of parts of the SVG. Let’s have a look at the example from earlier, where the purple circles are now blue inside PowerPoint.
The blue circles are using one of the special fill classes, while the yellow circle is not. Let’s change the fill colour of this SVG and see what happens.
We’ve changed the fill colour to orange, but we can see that the yellow circle is still yellow! Using a special fill class will make fill colours of all shapes not using a special fill class uneditable within PowerPoint. You can target which shapes to make uneditable, and vice versa — we think there is a lot of potential in leveraging this behaviour.
Let’s look at another example. This time let’s try a mix of outline and fill classes. The image below shows you which classes we’ve used, and what the theme colours for that template are.
Let’s change the outline colour and see what happens, and let’s compare that to the same SVG with no special classes.
When changing the outline colour, you can see that with a normal SVG, every single shape now has an outline — essentially breaking the icon. With the special outline class in effect, we can see that no outline is added to shapes that don’t have the outline class. You can even change the outline width of only those shapes with the class, leaving others unaffected. This could allow you to get more out of your graphics in PowerPoint, making them flexible in just the right ways, while restricting aspects that don’t need to change.
We create most of our graphic assets in Illustrator. For us, it’s important to be able to control the class a shape will have straight from within Illustrator, because sometimes we’re dealing with hundreds of assets at once. Let’s go through the steps of how to achieve this in Illustrator.
We’ve created two simple circles. One has a 10pt outline that is yellow, and the other is just filled in with a purple — the colour is not important for this example, but it is good practice to use the same colour the shapes will be mapped to in PowerPoint.
It’s not common knowledge, but using the Graphic Styles feature in Illustrator will actually give the shapes a class name in the exported SVG. The class name is identical to the name of the Graphic Style. You can define a Graphic Style by dragging and dropping a shape into the empty space in the Graphic Styles panel. Then you can just apply these styles to any shape, and the shape within the exported SVG will now have the Graphic Style name as the class name.
For the SVGs to work in PowerPoint, you must make sure the SVG export setting Styling is set to Internal CSS. You can access the file format export settings by clicking the cog icon in the Formats section of the Export for Screens window. Then export your artboard as an SVG using Export for Screens (File > Export > Export for Screens). You can now import that SVG to PowerPoint any way you like.
Special SVG classes have three main functions:
Here’s a list of the most useful special SVG classes:
– MsftOfcThm_Background1_Fill_v2
– MsftOfcThm_Background2_Fill_v2
– MsftOfcThm_Text1_Fill_v2
– MsftOfcThm_Text2_Fill_v2
– MsftOfcThm_Accent1_Fill_v2
– MsftOfcThm_Accent2_Fill_v2
– MsftOfcThm_Accent3_Fill_v2
– MsftOfcThm_Accent4_Fill_v2
– MsftOfcThm_Accent5_Fill_v2
– MsftOfcThm_Accent6_Fill_v2
– MsftOfcThm_Background1_Stroke_v2
– MsftOfcThm_Background2_Stroke_v2
– MsftOfcThm_Text1_Stroke_v2
– MsftOfcThm_Text2_Stroke_v2
– MsftOfcThm_Accent1_Stroke_v2
– MsftOfcThm_Accent2_Stroke_v2
– MsftOfcThm_Accent3_Stroke_v2
– MsftOfcThm_Accent4_Stroke_v2
– MsftOfcThm_Accent5_Stroke_v2
– MsftOfcThm_Accent6_Stroke_v2
Have you ever started working on a presentation to find that pieces of content have been pasted in as images instead of editable text? But fear not! Help is at hand. Here is all you need to know about how to convert images to text in PowerPoint.
Are you frustrated by the wheel animation in PowerPoint? Do you want it to animate anti-clockwise, or from a different starting point? Look no further.
Conference presentations are really hard to get right compared to day-to-day presentations. How do you tackle bigger stages, bigger rooms, bigger audiences and higher stakes?
Join the BrightCarbon mailing list for monthly invites and resources
Tell me more!I did not think it was possible for an external team to get our message so quickly and accurately. You got our messages better than we did, and delivered presentations that were slick and really effective.
Guy Shepherd Bouygues
This is FANTASTIC information. Thanks for much for sharing! I can’t believe this blog is free. Do you know if there is any way to add the different built-in tints to these? So basically, I want to create an SVG file with one of my theme colors but also one of the lighter tints of that same color, and have both colors change in PowerPoint if you change the graphic’s fill color to a different theme color. Does that make sense? I can include a white somewhat transparent piece to cover the colored part, but it’s not quite the same color. Any suggestions would be helpful! Thanks!
Hi Ashley,
We’re glad you find the article useful.
The easiest way to achieve tints and shades in a responsive SVG is to overlay the shapes with a transparent white or black shape — the colour underneath will be linked to a theme colour, and the black/white mix will create your colour variation. The overlay shape should be the exact same shape as the one underneath it.
There are also special classes to achieve tints/shades, which are quite difficult to use and figure out. We don’t recommend them, but see below on what they look like if you wish to experiment.
Shades use the modifier lumMod with a number from 1–100. The number is a luminosity percentage of the original colour. So value of 50 would halve the original luminosity of the colour.
Example: MsftOfcThm_Accent2_lumMod_90_Fill_v2
Tints use a combination of lumMod and lumOff, and honestly, we haven’t been able to work out how to use them.
Example: MsftOfcThm_Accent2_lumMod_24_lumOff_25_Fill_v2
You can search this article, if you’re adamant about using lumOff/lumMod — it sheds some light on how they are supposed to be used: https://docs.microsoft.com/en-us/previous-versions/office/developer/office-2007/dd560821(v=office.12)?redirectedfrom=MSDN
Hope this helps!
Thanks Taavi. Do you know if there is a smart way (batch?) to change multiple svg’s at once (hundreds…)
Great article, definitively something I will make use of.
Do you know if there is a class/style equivalent in PowerPoint to:
vector-effect: non-scaling-stroke;
This is nearly perfect but on image rescale in PowerPoint I need one element to stay at a fixed stroke width.