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.

What is an SVG?

SVG graphics and icons in PowerPoint

How to create responsive SVGs and smart icons in PowerPoint

Classes in SVG code

Special SVG classes in PowerPoint

Locking fill colour of elements in PowerPoint

Locking outline colour and width of elements in PowerPoint

Creating responsive SVGs and smart icons in Adobe Illustrator

Recap and list of special SVG classes

What is an SVG?

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

SVG graphics and icons in PowerPoint

In PowerPoint SVG graphics are great for icons and illustrations, and all the icons and illustrations you can find in PowerPoint are in SVG format. But why bother with them, and what are the main differences between an SVG and a standard PowerPoint shape?

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.

How to create responsive SVGs and smart icons in PowerPoint

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.

Classes in SVG code

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.

Special SVG classes in PowerPoint

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

Locking fill colour of elements in PowerPoint

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.

Locking outline colour and width of elements in PowerPoint

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.

Creating responsive SVGs and smart icons in Adobe Illustrator

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.

Creating a Graphic Style for fill classes

  1. Make sure your filled shape is just using a fill and nothing else. Everything will be recorded by a Graphic Style. If you don’t, it will end up in the SVG class, which might yield unexpected results.
  2. Open your Graphic Styles (Window > Graphic Styles).
  3. Drag and drop the filled circle into the empty area within the Graphic Styles pane.
  4. Give the style a name — we gave it MsftOfcThm_Accent1_Fill_v2. Make sure there are no extra spaces at the beginning or end of the name — it needs to be exactly the same for it to work.
  5. Apply the style to any shape you wish.

Creating a Graphic Style for outline classes

  1. Make sure you’re happy with your stroke width and corner style — the colour might change in PowerPoint, but these two settings will be retained.
  2. Stroke alignment can only be centred, otherwise it will be expanded into a fill shape in PowerPoint.
  3. Cap types are supported, but PowerPoint overrides them as soon as you change the outline colour or width. Regular butt caps is what PowerPoint agrees best with.
  4. Open your Graphic Styles (Window > Graphic Styles).
  5. Drag and drop the outlined circle into the empty area within the Graphic Styles pane.
  6. Give the style a name — we gave it MsftOfcThm_Accent2_Stroke_v2.
  7. Apply the style to any shape you wish.

Adding Graphic Styles to shapes

  • For some reason, Graphic Styles added to groups do not work as intended in exported SVGs. Make sure to ungroup your assets before adding any Graphic Styles to the shapes.
  • Secondly, you can’t add two Graphic Styles to a single shape. Technically, you can have multiple classes per shape in an SVG file, but there’s no way to add two or more in Illustrator. Two shapes on top of each other with stroke and fill classes would work though.

Exporting the SVG

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.

Recap and list of special SVG classes

Special SVG classes have three main functions:

  1. Disable shapes from being editable
  2. Target which shapes are editable
  3. Assign shapes to a particular Theme Colour

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

Leave a comment
Written by

Taavi Drell

Senior design consultant

View Taavi Drell's profile

Related articles

    Leave a Reply

    Join the BrightCarbon mailing list for monthly invites and resources

    Tell me more!

    BrightCarbon has created several animations for us. The result was always the same: a very clear “wow” effect. I highly recommend BrightCarbon for making complex topics come to life on screen!

    Isabel Figge Intergraph