diff --git a/CHANGES b/CHANGES
index 84a95cb26..9617665c1 100644
--- a/CHANGES
+++ b/CHANGES
@@ -30,6 +30,8 @@ Features added
   down the build
 * #6837: LaTeX: Support a nested table
 * #6966: graphviz: Support ``:class:`` option
+* #6696: html: ``:scale:`` option of image/figure directive not working for SVG
+  images (imagesize-1.2.0 or above is required)
 
 Bugs fixed
 ----------
diff --git a/sphinx/writers/html.py b/sphinx/writers/html.py
index 47c3fdb4a..84cdcc15b 100644
--- a/sphinx/writers/html.py
+++ b/sphinx/writers/html.py
@@ -579,23 +579,6 @@ class HTMLTranslator(SphinxTranslator, BaseTranslator):
             node['uri'] = posixpath.join(self.builder.imgpath,
                                          self.builder.images[olduri])
 
-        uri = node['uri']
-        if uri.lower().endswith(('svg', 'svgz')):
-            atts = {'src': uri}
-            if 'width' in node:
-                atts['width'] = node['width']
-            if 'height' in node:
-                atts['height'] = node['height']
-            atts['alt'] = node.get('alt', uri)
-            if 'align' in node:
-                self.body.append('<div align="%s" class="align-%s">' %
-                                 (node['align'], node['align']))
-                self.context.append('</div>\n')
-            else:
-                self.context.append('')
-            self.body.append(self.emptytag(node, 'img', '', **atts))
-            return
-
         if 'scale' in node:
             # Try to figure out image height and width.  Docutils does that too,
             # but it tries the final file name, which does not necessarily exist
@@ -610,6 +593,30 @@ class HTMLTranslator(SphinxTranslator, BaseTranslator):
                         node['width'] = str(size[0])
                     if 'height' not in node:
                         node['height'] = str(size[1])
+
+        uri = node['uri']
+        if uri.lower().endswith(('svg', 'svgz')):
+            atts = {'src': uri}
+            if 'width' in node:
+                atts['width'] = node['width']
+            if 'height' in node:
+                atts['height'] = node['height']
+            if 'scale' in node:
+                scale = node['scale'] / 100.0
+                if 'width' in atts:
+                    atts['width'] = int(atts['width']) * scale
+                if 'height' in atts:
+                    atts['height'] = int(atts['height']) * scale
+            atts['alt'] = node.get('alt', uri)
+            if 'align' in node:
+                self.body.append('<div align="%s" class="align-%s">' %
+                                 (node['align'], node['align']))
+                self.context.append('</div>\n')
+            else:
+                self.context.append('')
+            self.body.append(self.emptytag(node, 'img', '', **atts))
+            return
+
         super().visit_image(node)
 
     # overwritten
diff --git a/sphinx/writers/html5.py b/sphinx/writers/html5.py
index aebe1e428..087c92842 100644
--- a/sphinx/writers/html5.py
+++ b/sphinx/writers/html5.py
@@ -520,23 +520,6 @@ class HTML5Translator(SphinxTranslator, BaseTranslator):
             node['uri'] = posixpath.join(self.builder.imgpath,
                                          self.builder.images[olduri])
 
-        uri = node['uri']
-        if uri.lower().endswith(('svg', 'svgz')):
-            atts = {'src': uri}
-            if 'width' in node:
-                atts['width'] = node['width']
-            if 'height' in node:
-                atts['height'] = node['height']
-            atts['alt'] = node.get('alt', uri)
-            if 'align' in node:
-                self.body.append('<div align="%s" class="align-%s">' %
-                                 (node['align'], node['align']))
-                self.context.append('</div>\n')
-            else:
-                self.context.append('')
-            self.body.append(self.emptytag(node, 'img', '', **atts))
-            return
-
         if 'scale' in node:
             # Try to figure out image height and width.  Docutils does that too,
             # but it tries the final file name, which does not necessarily exist
@@ -551,6 +534,30 @@ class HTML5Translator(SphinxTranslator, BaseTranslator):
                         node['width'] = str(size[0])
                     if 'height' not in node:
                         node['height'] = str(size[1])
+
+        uri = node['uri']
+        if uri.lower().endswith(('svg', 'svgz')):
+            atts = {'src': uri}
+            if 'width' in node:
+                atts['width'] = node['width']
+            if 'height' in node:
+                atts['height'] = node['height']
+            if 'scale' in node:
+                scale = node['scale'] / 100.0
+                if 'width' in atts:
+                    atts['width'] = int(atts['width']) * scale
+                if 'height' in atts:
+                    atts['height'] = int(atts['height']) * scale
+            atts['alt'] = node.get('alt', uri)
+            if 'align' in node:
+                self.body.append('<div align="%s" class="align-%s">' %
+                                 (node['align'], node['align']))
+                self.context.append('</div>\n')
+            else:
+                self.context.append('')
+            self.body.append(self.emptytag(node, 'img', '', **atts))
+            return
+
         super().visit_image(node)
 
     # overwritten