diff --git a/addons/web_editor/controllers/main.py b/addons/web_editor/controllers/main.py
index 87db5e7b377..e85a678f54e 100644
--- a/addons/web_editor/controllers/main.py
+++ b/addons/web_editor/controllers/main.py
@@ -531,13 +531,20 @@ class Web_Editor(http.Controller):
                 svg = file.read()
 
         user_colors = []
-        for key, color in kwargs.items():
-            match = re.match('^c([1-5])$', key)
-            if match:
+        for key, value in kwargs.items():
+            colorMatch = re.match('^c([1-5])$', key)
+            if colorMatch:
                 # Check that color is hex or rgb(a) to prevent arbitrary injection
-                if not re.match(r'(?i)^#[0-9A-F]{6,8}$|^rgba?\(\d{1,3},\d{1,3},\d{1,3}(?:,[0-9.]{1,4})?\)$', color.replace(' ', '')):
+                if not re.match(r'(?i)^#[0-9A-F]{6,8}$|^rgba?\(\d{1,3},\d{1,3},\d{1,3}(?:,[0-9.]{1,4})?\)$', value.replace(' ', '')):
                     raise werkzeug.exceptions.BadRequest()
-                user_colors.append([tools.html_escape(color), match.group(1)])
+                user_colors.append([tools.html_escape(value), colorMatch.group(1)])
+            elif key == 'flip':
+                if value == 'x':
+                    svg = svg.replace('<svg ', '<svg style="transform: scaleX(-1);" ')
+                elif value == 'y':
+                    svg = svg.replace('<svg ', '<svg style="transform: scaleY(-1)" ')
+                elif value == 'xy':
+                    svg = svg.replace('<svg ', '<svg style="transform: scale(-1)" ')
 
         default_palette = {
             '1': '#3AADAA',
diff --git a/addons/web_editor/static/shapes/Airy/03.svg b/addons/web_editor/static/shapes/Airy/03.svg
index 3de5a0a0fd0..33c51924a9f 100644
--- a/addons/web_editor/static/shapes/Airy/03.svg
+++ b/addons/web_editor/static/shapes/Airy/03.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 244.7" style="enable-background:new 0 0 1400 244.7;" xml:space="preserve">
+	 viewBox="0 0 1400 244.7" xml:space="preserve">
 <style type="text/css">
 	.st0{opacity:0.58;}
 	.st1{fill:none;stroke:#383E45;stroke-width:1.4665;stroke-miterlimit:10;}
diff --git a/addons/web_editor/static/shapes/Origins/05.svg b/addons/web_editor/static/shapes/Origins/05.svg
index 80e23da7a1e..bc444fd8553 100644
--- a/addons/web_editor/static/shapes/Origins/05.svg
+++ b/addons/web_editor/static/shapes/Origins/05.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 1400" style="enable-background:new 0 0 1400 1400;" xml:space="preserve">
+	 viewBox="0 0 1400 1400" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#F6F6F6;}
 </style>
diff --git a/addons/web_editor/static/shapes/Origins/06.svg b/addons/web_editor/static/shapes/Origins/06.svg
index 53918be954d..a3b22d7ffd3 100644
--- a/addons/web_editor/static/shapes/Origins/06.svg
+++ b/addons/web_editor/static/shapes/Origins/06.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 450" style="enable-background:new 0 0 1400 450;" xml:space="preserve">
+	 viewBox="0 0 1400 450" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#F6F6F6;}
 </style>
diff --git a/addons/web_editor/static/shapes/Origins/11.svg b/addons/web_editor/static/shapes/Origins/11.svg
index 8e2970b759d..501d2126441 100644
--- a/addons/web_editor/static/shapes/Origins/11.svg
+++ b/addons/web_editor/static/shapes/Origins/11.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 2800" style="enable-background:new 0 0 1400 350.1;" xml:space="preserve">
+	 viewBox="0 0 1400 2800" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:url(#SVGID_1_);}
 </style>
diff --git a/addons/web_editor/static/shapes/Origins/13.svg b/addons/web_editor/static/shapes/Origins/13.svg
index 780e9d1ec0a..863b8bd520c 100644
--- a/addons/web_editor/static/shapes/Origins/13.svg
+++ b/addons/web_editor/static/shapes/Origins/13.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 446.9" style="enable-background:new 0 0 1400 446.9;" xml:space="preserve">
+	 viewBox="0 0 1400 446.9" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:url(#SVGID_1_);}
 </style>
diff --git a/addons/web_editor/static/shapes/Origins/14.svg b/addons/web_editor/static/shapes/Origins/14.svg
index 6b5ed1fc200..74ac000d374 100644
--- a/addons/web_editor/static/shapes/Origins/14.svg
+++ b/addons/web_editor/static/shapes/Origins/14.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 -1354.3 1400 1400" style="enable-background:new 0 0 1400 45.7;" xml:space="preserve">
+	 viewBox="0 -1354.3 1400 1400" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#FFFFFF;}
 </style>
diff --git a/addons/web_editor/static/shapes/Wavy/01.svg b/addons/web_editor/static/shapes/Wavy/01.svg
index ae18ac754fa..27037a91adc 100644
--- a/addons/web_editor/static/shapes/Wavy/01.svg
+++ b/addons/web_editor/static/shapes/Wavy/01.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 -840 1400 1400" style="enable-background:new 0 0 1400 560;" xml:space="preserve">
+	 viewBox="0 -840 1400 1400" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:url(#SVGID_1_);}
 	.st1{fill:#FFFFFF;fill-opacity:0.3;}
diff --git a/addons/web_editor/static/shapes/Wavy/05.svg b/addons/web_editor/static/shapes/Wavy/05.svg
index 0210c9b1c18..dd3173aea60 100644
--- a/addons/web_editor/static/shapes/Wavy/05.svg
+++ b/addons/web_editor/static/shapes/Wavy/05.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 1400" style="enable-background:new 0 0 1400 363.6;" xml:space="preserve">
+	 viewBox="0 0 1400 1400" xml:space="preserve">
 <style type="text/css">
 	.st0{opacity:0.2;fill:#3AADAA;enable-background:new    ;}
 	.st1{opacity:0.25;fill:#3AADAA;enable-background:new    ;}
diff --git a/addons/web_editor/static/shapes/Zigs/03.svg b/addons/web_editor/static/shapes/Zigs/03.svg
index 2702509531d..889001cbe3a 100644
--- a/addons/web_editor/static/shapes/Zigs/03.svg
+++ b/addons/web_editor/static/shapes/Zigs/03.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1400 1140" style="enable-background:new 0 0 1400 1140;" xml:space="preserve">
+	 viewBox="0 0 1400 1140" xml:space="preserve">
 <style type="text/css">
 	.st0{opacity:0.5;fill:#3AADAA;enable-background:new    ;}
 	.st1{opacity:0.08;fill:#3AADAA;enable-background:new    ;}
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 2ea2658e31a..6dcca203d15 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -3927,10 +3927,14 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
                 return color || '';
             }
             case 'flipX': {
-                return this.$target.find('> .o_we_shape.o_we_flip_x').length !== 0;
+                // Compat: flip classes are no longer used but may be present in client db
+                const hasFlipClass = this.$target.find('> .o_we_shape.o_we_flip_x').length !== 0;
+                return hasFlipClass || this._getShapeData().flip.includes('x');
             }
             case 'flipY': {
-                return this.$target.find('> .o_we_shape.o_we_flip_y').length !== 0;
+                // Compat: flip classes are no longer used but may be present in client db
+                const hasFlipClass = this.$target.find('> .o_we_shape.o_we_flip_y').length !== 0;
+                return hasFlipClass || this._getShapeData().flip.includes('y');
             }
         }
         return this._super(...arguments);
@@ -4036,11 +4040,27 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
             target.style.position = 'relative';
         }
         shapeContainer.className = `o_we_shape o_${shape.replace(/\//g, '_')}`;
-        flip.forEach(dir => {
-            shapeContainer.classList.add(`o_we_flip_${dir}`);
-        });
-        // Custom colors, overwrite shape that is set by the class
-        $(shapeContainer).css('background-image', colors ? `url("${this._getShapeSrc()}")` : '');
+        // Compat: remove old flip classes as flipping is now done inside the svg
+        shapeContainer.classList.remove('o_we_flip_x', 'o_we_flip_y');
+
+        if (colors || flip.length) {
+            // Custom colors/flip, overwrite shape that is set by the class
+            $(shapeContainer).css('background-image', `url("${this._getShapeSrc()}")`);
+            shapeContainer.style.backgroundPosition = '';
+            if (flip.length) {
+                let [xPos, yPos] = $(shapeContainer)
+                    .css('background-position')
+                    .split(' ')
+                    .map(p => parseFloat(p));
+                // -X + 2*Y is a symmetry of X around Y, this is a symmetry around 50%
+                xPos = flip.includes('x') ? -xPos + 100 : xPos;
+                yPos = flip.includes('y') ? -yPos + 100 : yPos;
+                shapeContainer.style.backgroundPosition = `${xPos}% ${yPos}%`;
+            }
+        } else {
+            // Remove custom bg image and let the shape class set the bg shape
+            $(shapeContainer).css('background-image', '');
+        }
 
         if (previewMode === false) await this.updateChangesInWysiwyg();
     },
@@ -4081,16 +4101,19 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
      * @private
      */
     _getShapeSrc() {
-        const {shape, colors} = this._getShapeData();
+        const {shape, colors, flip} = this._getShapeData();
         if (!shape) {
             return '';
         }
-        const queryString = Object.entries(colors)
+        const searchParams = Object.entries(colors)
             .map(([colorName, colorValue]) => {
                 const encodedCol = encodeURIComponent(colorValue);
                 return `${colorName}=${encodedCol}`;
-            }).join('&');
-        return `/web_editor/shape/${shape}.svg?${queryString}`;
+            });
+        if (flip.length) {
+            searchParams.push(`flip=${flip.sort().join('')}`);
+        }
+        return `/web_editor/shape/${shape}.svg?${searchParams.join('&')}`;
     },
     /**
      * Retrieves current shape data from the target's dataset.