Convert a PowerPoint icon to a svg image

Posted on by

Using svg images for icons has a big advantage over jpg and png images because it allows to scall the image without losing quality. That’s why I prefer to use svg images in the canvas apps I create.

PowerPoint has a very rich set of icons. Much richer than the default icon set available in canvas apps.

Below, the steps are given on how to convert a PowerPoint icon to a svg icon to use in your canvas apps.

  1. Open PowerPoint
    • The “Microsoft 365 Apps for business” version of PowerPoint is used while creating the steps.
  2. Insert the icon you want to convert.
  3. Right-click on the image and select “Save as Picture…”
  4. Save the image on a local disk and make sure the type is: Scalable Vector Graphics (*.svg)
  5. Close PowerPoint.
  6. Open Windows Explorer and go to the folder you saved the image in.
  7. Right-click on the image and open the file with Notepad.
  8. Replace all double-quotes with single quotes.
  9. Replace width=’96’ height=’96’ with viewBox = ‘0 0 96 96’.
  10. Add the following code to all <path> elements: fill='{{FILL}}’
    • {{FILL}} will be replaced in your canvas app with the color you want to use. You can use your own replacement tag.
    • Do not skip the extra space at the beginning (before “fill”)..
  11. Open a canvas app.
  12. Add an image control. Add the following logic to its property “Image”:
    • “data:image/svg+xml;utf8, ” & EncodeUrl(Substitute(“<<SVG>>”, “{{FILL}}” , “#FF7700”))
      • <<SVG>> is all the text from Notepad.
      • “#FF7700” is a color code example.

Feedback

Please enable JavaScript in your browser to complete this form.

You can use the form below to submit feedback if you think that content on this page:

  • is wrong. Please then also provide what is wrong and why.
  • could be more comprehensive. Please then also provide which content should be added/updated.

Thank you!