diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js
index 0a475f14c92..413f1f20ef0 100644
--- a/src/lib/svg_text_utils.js
+++ b/src/lib/svg_text_utils.js
@@ -335,7 +335,7 @@ function convertToSVG(_str) {
                         // most of the svg css users will care about is just like html,
                         // but font color is different. Let our users ignore this.
                         extraStyle = extraStyle[1].replace(/(^|;)\s*color:/, '$1 fill:');
-                        style = (style ? style + ';' : '') + encodeForHTML(extraStyle);
+                        style = encodeForHTML(extraStyle) + (style ? ';' + style : '');
                     }
 
                     return tspanStart + (style ? ' style="' + style + '"' : '') + '>';
diff --git a/test/image/baselines/annotations.png b/test/image/baselines/annotations.png
index 056e5c86268..41ffc4f779f 100644
Binary files a/test/image/baselines/annotations.png and b/test/image/baselines/annotations.png differ
diff --git a/test/image/mocks/annotations.json b/test/image/mocks/annotations.json
index 2bf9989b306..06cbdd5b48f 100644
--- a/test/image/mocks/annotations.json
+++ b/test/image/mocks/annotations.json
@@ -38,7 +38,8 @@
                 "ax":-34,"ay":37,"arrowsize":2,"x":4,"y":1
             },
             {
-                "text":"All together","opacity":0.6,"arrowwidth":5,"arrowhead":3,"ax":-77,"ay":-5,
+                "text":"All together<br>with<sup style=\"font-family:raleway;fill:rgb(0,255,255)\">STYLE</sup>",
+                "opacity":0.6,"arrowwidth":5,"arrowhead":3,"ax":-77,"ay":-5,
                 "bordercolor":"rgb(255, 0, 0)","borderwidth":4,"bgcolor":"rgba(255,255,0,0.5)",
                 "font":{"color":"rgb(0, 0, 255)","size":20},
                 "arrowcolor":"rgb(166, 28, 0)","borderpad":3,"textangle":50,"x":5,"y":1