diff --git a/modules/backend/models/BrandSettings.php b/modules/backend/models/BrandSettings.php
index facf08fbb..817e8b30c 100644
--- a/modules/backend/models/BrandSettings.php
+++ b/modules/backend/models/BrandSettings.php
@@ -90,13 +90,22 @@ class BrandSettings extends Model
     {
         $parser = new Less_Parser(['compress' => true]);
 
-        $parser->ModifyVars([
+        $svgHead  = 'data:image/svg+xml;charset=UTF-8,';
+        $svgOpen  = static::cssEscape('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="100px" height="110px" viewBox="0 0 100 110" enable-background="new 0 0 100 110" xml:space="preserve">');
+        $svgClose = static::cssEscape('</svg>');
+
+        $vars = [
             'logo-image'            => "'".self::getLogo()."'",
             'primary-color-light'   => self::get('primary_color_light', self::PRIMARY_LIGHT),
             'primary-color-dark'    => self::get('primary_color_dark', self::PRIMARY_DARK),
             'secondary-color-light' => self::get('secondary_color_light', self::SECONDARY_LIGHT),
             'secondary-color-dark'  => self::get('secondary_color_dark', self::SECONDARY_DARK),
-        ]);
+            'svg-head'              => "'".$svgHead."'",
+            'svg-open'              => "'".$svgOpen."'",
+            'svg-close'             => "'".$svgClose."'"
+        ];
+
+        $parser->ModifyVars($vars);
 
         $parser->parse(
             File::get(base_path().'/modules/backend/models/brandsettings/custom.less')
@@ -107,4 +116,15 @@ class BrandSettings extends Model
 
         return $css;
     }
+
+    /**
+     * Escape for RFC 3986, generally good for CSS
+     * @param string $string
+     */
+    protected static function cssEscape($string)
+    {
+        $entities = array('%21', '%2A', '%27', '%28', '%29', '%3B', '%3A', '%40', '%26', '%3D', '%2B', '%24', '%2C', '%2F', '%3F', '%25', '%23', '%5B', '%5D');
+        $replacements = array('!', '*', "'", "(", ")", ";", ":", "@", "&", "=", "+", "$", ",", "/", "?", "%", "#", "[", "]");
+        return str_replace($entities, $replacements, rawurlencode($string));
+    }
 }
diff --git a/modules/backend/models/brandsettings/custom.less b/modules/backend/models/brandsettings/custom.less
index 202044736..9740f336b 100644
--- a/modules/backend/models/brandsettings/custom.less
+++ b/modules/backend/models/brandsettings/custom.less
@@ -63,14 +63,11 @@ body.outer .layout > .layout-row.layout-head {
 @color-fancy-master-tabs-bg: @primary-color-dark;
 @color-fancy-form-inactive-tab: mix(black, desaturate(@primary-color-dark, 14.5%), 5%);
 
-@tab-svg-part1: 'data:image/svg+xml;charset=UTF-8,';
-@tab-svg-part2: escape('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="100px" height="110px" viewBox="0 0 100 110" enable-background="new 0 0 100 110" xml:space="preserve">');
-@tab-svg-part3: escape('<path d="M0,30C5,30,10,0,20,0c5,0,60,0,65,0c10,0,10,30,15,30"/>');
-@tab-svg-part4: escape('<path fill="@{color-fancy-form-tabless-fields-bg}" d="M0,70c5,0,10-30,20-30c0,10,0,15,0,15v15"/>');
-@tab-svg-part5: escape('<path fill="@{color-fancy-form-tabless-fields-bg}" d="M100,70c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>');
-@tab-svg-part6: escape('<path fill="@{color-fancy-form-inactive-tab}" d="M0,110c5,0,10-30,20-30c0,10,0,15,0,15v15"/>');
-@tab-svg-part7: escape('<path fill="@{color-fancy-form-inactive-tab}" d="M100,110c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>');
-@tab-svg-part8: escape('</svg>');
+@tab-svg-part1: escape('<path d="M0,30C5,30,10,0,20,0c5,0,60,0,65,0c10,0,10,30,15,30"/>');
+@tab-svg-part2: escape('<path fill="@{color-fancy-form-tabless-fields-bg}" d="M0,70c5,0,10-30,20-30c0,10,0,15,0,15v15"/>');
+@tab-svg-part3: escape('<path fill="@{color-fancy-form-tabless-fields-bg}" d="M100,70c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>');
+@tab-svg-part4: escape('<path fill="@{color-fancy-form-inactive-tab}" d="M0,110c5,0,10-30,20-30c0,10,0,15,0,15v15"/>');
+@tab-svg-part5: escape('<path fill="@{color-fancy-form-inactive-tab}" d="M100,110c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>');
 
 .fancy-layout {
     .control-tabs, &.control-tabs {
@@ -93,7 +90,7 @@ body.outer .layout > .layout-row.layout-head {
                 a > span.title {
                     background-color: @color-fancy-form-inactive-tab;
                     &:before, &:after {
-                        background-image: url(~'@{tab-svg-part1}@{tab-svg-part2}@{tab-svg-part3}@{tab-svg-part4}@{tab-svg-part5}@{tab-svg-part6}@{tab-svg-part7}@{tab-svg-part8}');
+                        background-image: url(~'@{svg-head}@{svg-open}@{tab-svg-part1}@{tab-svg-part2}@{tab-svg-part3}@{tab-svg-part4}@{tab-svg-part5}@{svg-close}');
                     }
                 }
                 &.active {