SVG Emoticons cannot be displayed in Outlook

[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?

[David at David Simpson Apps · Accepted solution]

This is unlikely.

Confluence is "moving forward" with standard elements such as SVGs which are supported on all major web browsers since 2011. 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

[Michael]

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?

[David at David Simpson Apps]

I would look to your Outlook administrators to ensure that the December 2016 update was installed.

This article suggests:

All Office 365 users in the Current Channel now also have support for SVG graphics in emails and have a new Insert Icons command.

Note: This update can be installed via Microsoft Update or the Update Now 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.

[Michael]

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

[David at David Simpson Apps]

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.

[Michael]

All right. Thank you for your help