SVG Emoticons cannot be displayed in Outlook
Asked by Michael:

In a blog post, emoticons are displayed as SVG and therefore cannot be displayed in the Outlook 2016 client.

In the installation folder there are also PNG files for emoticons in addition to the SVG files but Confluence uses the SVG Files as default.

Is it possible to use the PNG files by default?


Answers:
author: David at David Simpson Apps
body: This is unlikely.

Confluence is "moving forward" with standard elements such as SVGs which are [supported on all major web browsers since 2011](https://caniuse.com/#search=svg). The existing PNG files will be there for supporting old or existing pages (made in very old versions of Confluence) where the PNG images were used.

Unfortunately, Outlook 2016 (released in 2015) is using very outdated technology for rendering HTML. If it does not support SVGs, **this suggests that the rendering engine being used is likely Internet Explorer 8 (released in March 2009)** or something even older. Actually, it's worse than I remembered, Outlook *doesn't even use a browser as it's rendering engine*, instead it uses Word.

Internet Explorer started supporting SVGs in v9, released in March 2011.

As all major browsers have been supporting SVGs since 2011, it is fair for Atlassian to be using them now.

For reference:  
<https://caniuse.com/#search=svg>


author: Michael
body: So there is no way to view SVG files in Outlook 2016? Then why is Confluence using this as a standard, if Outlook is one of the most used e-mail programs worldwide and this is not supported?

comments: author: David at David Simpson Apps
body: I would look to your Outlook administrators to ensure that the [December 2016 update](https://support.microsoft.com/en-gb/help/3127988/december-6-2016-update-for-outlook-2016-kb3127988) was installed.

[This article](https://www.howto-outlook.com/news/update-2016-12-ol2016.htm) suggests:
> All Office 365 users in the [Current Channel](https://www.msoutlook.info/question/office-update-channels "Why am I not getting the latest updates for Office/Outlook 2016?") now also have [support for SVG graphics](https://support.office.com/en-us/article/Insert-SVG-images-in-Microsoft-Office-69f29d39-194a-4072-8c35-dbe5e7ea528c "Insert SVG images in Microsoft Office") in emails and have a new [Insert Icons](https://support.office.com/en-us/article/Insert-icons-e2459f17-3996-4795-996e-b9a13486fa79 "Insert icons") command.
>
> ***Note:** This update can be installed via [Microsoft Update](https://www.msoutlook.info/question/363 "Not getting Office updates via Windows Update") or the [Update Now](https://www.msoutlook.info/question/363#o365 "Updating Office 365 installations") button when you are using Office 365 and updates Outlook to version 16.0.4471.1000 (msi-based installation) or 16.0.7571.2072 (Office 365 based installation).*

If you were on Office 365/Outlook Online, I'd guess that the SVGs should work just fine.


author: Michael
body: Yes, this update will be distributed. Can I customize the Confluence code side to use PNGs again?


author: David at David Simpson Apps
body: Yes you can, but it's not easy.

Grab the Confluence source code and find the confluence-editor directory.

In **confluence-editor/src/main/resources/autoformat/wiki-autoformat-oninit-rte.js** , replace the following:

```
var emoticons = [ ... ];
```

with

```
 var emoticons = [
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.SMILE, "smile", "emotions_dlg.smile", "smile.png"),
   new Emoticon("(", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.SAD, "sad", "emotions_dlg.sad", "sad.png"),
   new Emoticon("P", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.CHEEKY, "cheeky", "emotions_dlg.tongue", "tongue.png"),
   new Emoticon("p", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.CHEEKY_2, "cheeky", "emotions_dlg.tongue", "tongue.png"),
   new Emoticon("D", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.LAUGH, "laugh", "emotions_dlg.biggrin", "biggrin.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.WINK, "wink", "emotions_dlg.wink", "wink.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.THUMBS_UP, "thumbs-up", "emotions_dlg.thumbs_up", "thumbs_up.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.THUMBS_DOWN, "thumbs-down", "emotions_dlg.thumbs_down", "thumbs_down.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.INFORMATION, "information", "emotions_dlg.information", "information.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.TICK, "tick", "emotions_dlg.check", "check.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.CROSS, "cross", "emotions_dlg.error", "error.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.WARNING, "warning", "emotions_dlg.warning", "warning.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.PLUS, "plus", "emotions_dlg.add", "add.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.MINUS, "minus", "emotions_dlg.forbidden", "forbidden.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.QUESTION, "question", "emotions_dlg.help_16", "help_16.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.LIGHT_ON, "light-on", "emotions_dlg.lightbulb_on", "lightbulb_on.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.LIGHT_OFF, "light-off", "emotions_dlg.lightbulb", "lightbulb.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.YELLOW_STAR, "yellow-star", "emotions_dlg.star_yellow", "star_yellow.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.YELLOW_STAR_2, "yellow-star", "emotions_dlg.star_yellow", "star_yellow.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.RED_STAR, "red-star", "emotions_dlg.star_red", "star_red.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.GREEN_STAR, "green-star", "emotions_dlg.star_green", "star_green.png"),
   new Emoticon(")", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.BLUE_STAR, "blue-star", "emotions_dlg.star_blue", "star_blue.png"),
   new Emoticon("3", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.HEART, "heart", "emotions_dlg.heart", "heart.png"),
   new Emoticon("3", WikiAutoformat.regularExpressions._REGEXES_EMOTICON.BROKEN_HEAR, "broken-heart", "emotions_dlg.broken_heart", "broken_heart.png")
 ];
```

Build the plugin, install it on Confluence using the UPM. Then all subsequently added emoticons will be png based.

And finally, to get existing emoticons to be png based, do a find and replace for each icon in the database to replace the svg with a png -- *this final step really isn't advised, btw.*

Doing any of this is not going to be supported by Atlassian, so it's at your own risk. Updating Outlook instead is preferred.


author: Michael
body: All right. Thank you for your help


Tags: confluence-server

server