Encode inline SVGs

When using an inline SVG it must be encoded. Otherwise browsers may
choke on it due to unescaped characters like < and ".

At the moment problem can be seen when the Chromatic/Cypress
integration tries to generate pages with inline CSS. Without this
process fails and CSS is never loaded.

To address this we encode the inline CSS using
https://yoksel.github.io/url-encoder/. A proper SCSS function to
address this would be preferable but I could not find such a thing.

We only have two actual instances of inline SVGs to for now it should
be OK to just change these.

The fact that this is a nice change is also indicated by the fact that
we no longer have stylelint issues that has to be ignored.

src/stories/Library/material-header/material-periodical-select.scss

@@ -20,7 +20,7 @@ $icon-position: 10px;
       background-repeat: no-repeat;
       background-size: 6px;
       // This is a copy from  icons/basic/icon-select-arrow
-      background-image: url('data:image/svg+xml;utf8,<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.75821 0.708313L3 3.95101L1.24179 0.708313L4.75821 0.708313Z" fill="black" stroke="black"/> </svg>');
+      background-image: url("data:image/svg+xml;utf8,%3Csvg width='6' height='5' viewBox='0 0 6 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75821 0.708313L3 3.95101L1.24179 0.708313L4.75821 0.708313Z' fill='black' stroke='black'/%3E%3C/svg%3E");
       background-position: 100%;
       padding-right: $icon-position;
     }

src/styles/scss/tools/placeholder.scss

@@ -28,9 +28,7 @@
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
-    // stylelint-disable -- Stylelint really does not enjoy embedded IMGs.
-    background-image: url('data:image/svg+xml,<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 852.2 17" style="enable-background:new 0 0 852.2 17;" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}</style><path class="st0" d="M7.9,8.7c52-1.3,131.1-3,227.7-4.3c83.7-1.1,243.5,1.2,325.2,4.3c43.3,1.6,166.2-4.9,284.4-2.7"/></svg>');
-    // stylelint-enable
+    background-image: url("data:image/svg+xml,%3Csvg 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 852.2 17' style='enable-background:new 0 0 852.2 17;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:none;stroke:%2523000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;%7D%3C/style%3E%3Cpath class='st0' d='M7.9,8.7c52-1.3,131.1-3,227.7-4.3c83.7-1.1,243.5,1.2,325.2,4.3c43.3,1.6,166.2-4.9,284.4-2.7'/%3E%3C/svg%3E");
   }
 }
 
@@ -40,9 +38,7 @@
   &::before {
     width: 80px;
     right: auto;
-    // stylelint-disable -- Stylelint really does not enjoy embedded IMGs.
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="81" height="16" viewBox="0 0 81 16" fill="none"><path d="M3 10C29.8561 3.71312 50.1886 4.9889 78 5.35819" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
-    // stylelint-enable
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='81' height='16' viewBox='0 0 81 16' fill='none'%3E%3Cpath d='M3 10C29.8561 3.71312 50.1886 4.9889 78 5.35819' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   }
 }