diff --git a/src/editor/components/jgraduate/jQuery.jGraduate.js b/src/editor/components/jgraduate/jQuery.jGraduate.js
index 6e14a3bd..22ef3182 100644
--- a/src/editor/components/jgraduate/jQuery.jGraduate.js
+++ b/src/editor/components/jgraduate/jQuery.jGraduate.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-loop-func */
 /* eslint-disable prefer-destructuring */
 /* eslint-disable no-unsanitized/property */
-/* gl#bals svgEditor */
 /**
  * @file jGraduate 0.4
  *
@@ -189,7 +188,7 @@ function mkElem (name, attrs, newparent) {
 * @param {external:jQuery.fn.jGraduate.CancelCallback} [cancelCallback] Called with no arguments when Cancel is pressed
 * @returns {external:jQuery}
 */
-export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
+export function jGraduateMethod (elem, options, okCallback, cancelCallback, i18next) {
   const $this = elem,
     $settings = Object.assign({}, jGraduateDefaults, options || {}),
     id = $this.getAttribute('id'),
@@ -237,9 +236,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
   $this.classList.add('jGraduate_Picker');
   // eslint-disable-next-line no-unsanitized/property
   $this.innerHTML = `<ul class="jGraduate_tabs">
-      <li class="jGraduate_tab_color jGraduate_tab_current" id="jGraduate_tab_color" data-type="col">#svgEditor.i18next.t('config.jgraduate_solid_color')}</li>
-      <li class="jGraduate_tab_lingrad" id="jGraduate_tab_lingrad" data-type="lg">#svgEditor.i18next.t('config.jgraduate_linear_gradient')}</li>
-      <li class="jGraduate_tab_radgrad" id="jGraduate_tab_radgrad" data-type="rg">#svgEditor.i18next.t('config.jgraduate_radial_gradient')}</li>
+      <li class="jGraduate_tab_color jGraduate_tab_current" id="jGraduate_tab_color" data-type="col">${i18next.t('config.jgraduate_solid_color')}</li>
+      <li class="jGraduate_tab_lingrad" id="jGraduate_tab_lingrad" data-type="lg">${i18next.t('config.jgraduate_linear_gradient')}</li>
+      <li class="jGraduate_tab_radgrad" id="jGraduate_tab_radgrad" data-type="rg">${i18next.t('config.jgraduate_radial_gradient')}</li>
     </ul>
     <div class="jGraduate_colPick" id="jGraduate_colPick"></div>
     <div class="jGraduate_gradPick" id="jGraduate_gradPick"></div>
@@ -256,88 +255,88 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       </div>
       <div class="jGraduate_Form jGraduate_Points jGraduate_lg_field">
         <div class="jGraduate_StopSection">
-          <label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_begin_point')}</label>
+          <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_begin_point')}</label>
           <div class="jGraduate_Form_Section">
             <label>x:</label>
-              <input type="text" id="${id}_jGraduate_x1" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_starting_x')}"/>
+              <input type="text" id="${id}_jGraduate_x1" size="3" title="${i18next.t('config.jgraduate_enter_starting_x')}"/>
             <label>y:</label>
-            <input type="text" id="${id}_jGraduate_y1" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_starting_y')}"/>
+            <input type="text" id="${id}_jGraduate_y1" size="3" title="${i18next.t('config.jgraduate_enter_starting_y')}"/>
           </div>
         </div>
         <div class="jGraduate_StopSection">
-          <label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_end_point')}</label>
+          <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_end_point')}</label>
           <div class="jGraduate_Form_Section">
             <label>x:</label>
-            <input type="text" id="${id}_jGraduate_x2" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_ending_x')}"/>
+            <input type="text" id="${id}_jGraduate_x2" size="3" title="${i18next.t('config.jgraduate_enter_ending_x')}"/>
             <label>y:</label>
-            <input type="text" id="${id}_jGraduate_y2" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_ending_y')}"/>
+            <input type="text" id="${id}_jGraduate_y2" size="3" title="${i18next.t('config.jgraduate_enter_ending_y')}"/>
           </div>
         </div>
       </div>
       <div class="jGraduate_Form jGraduate_Points jGraduate_rg_field">
         <div class="jGraduate_StopSection">
-          <label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_center_point')}</label>
+          <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_center_point')}</label>
           <div class="jGraduate_Form_Section">
             <label>x:</label>
-            <input type="text" id="${id}_jGraduate_cx" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_value_x')}"/>
+            <input type="text" id="${id}_jGraduate_cx" size="3" title="${i18next.t('config.jgraduate_enter_value_x')}"/>
             <label>y:</label>
-            <input type="text" id="${id}_jGraduate_cy" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_value_y')}"/>
+            <input type="text" id="${id}_jGraduate_cy" size="3" title="${i18next.t('config.jgraduate_enter_value_y')}"/>
           </div>
         </div>
         <div class="jGraduate_StopSection">
-          <label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_focal_point')}</label>
+          <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_focal_point')}</label>
           <div class="jGraduate_Form_Section">
-            <label>#svgEditor.i18next.t('config.jgraduate_match_center')} <input type="checkbox" checked="checked" id="${id}_jGraduate_match_ctr"/></label><br/>
+            <label>${i18next.t('config.jgraduate_match_center')} <input type="checkbox" checked="checked" id="${id}_jGraduate_match_ctr"/></label><br/>
             <label>x:</label>
-            <input type="text" id="${id}_jGraduate_fx" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_focal_x')}"/>
+            <input type="text" id="${id}_jGraduate_fx" size="3" title="${i18next.t('config.jgraduate_enter_focal_x')}"/>
             <label>y:</label>
-            <input type="text" id="${id}_jGraduate_fy" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_focal_y')}"/>
+            <input type="text" id="${id}_jGraduate_fy" size="3" title="${i18next.t('config.jgraduate_enter_focal_y')}"/>
           </div>
         </div>
       </div>
       <div class="jGraduate_StopSection jGraduate_SpreadMethod">
-        <label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_spread_method')}</label>
+        <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_spread_method')}</label>
         <div class="jGraduate_Form_Section">
           <select class="jGraduate_spreadMethod" id="jGraduate_spreadMethod">
-            <option value=pad selected>#svgEditor.i18next.t('properties.jgraduate_pad')}</option>
-            <option value=reflect>#svgEditor.i18next.t('properties.jgraduate_reflect')}</option>
-            <option value=repeat>#svgEditor.i18next.t('properties.jgraduate_repeat')}</option>
+            <option value=pad selected>${i18next.t('properties.jgraduate_pad')}</option>
+            <option value=reflect>${i18next.t('properties.jgraduate_reflect')}</option>
+            <option value=repeat>${i18next.t('properties.jgraduate_repeat')}</option>
           </select>
         </div>
       </div>
       <div class="jGraduate_Form">
         <div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field">
-          <label class="prelabel">#svgEditor.i18next.t('config.jgraduate_radius')}</label>
-          <div id="${id}_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="#svgEditor.i18next.t('config.jgraduate_set_radius')}">
+          <label class="prelabel">${i18next.t('config.jgraduate_radius')}</label>
+          <div id="${id}_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="${i18next.t('config.jgraduate_set_radius')}">
             <img id="${id}_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="${$settings.images.clientPath}rangearrows2.gif">
           </div>
           <label><input type="text" id="${id}_jGraduate_RadiusInput" size="3" value="100"/>%</label>
         </div>
         <div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field">
-          <label class="prelabel">#svgEditor.i18next.t('config.jgraduate_ellip')}</label>
-          <div id="${id}_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="#svgEditor.i18next.t('config.jgraduate_set_ellip')}">
+          <label class="prelabel">${i18next.t('config.jgraduate_ellip')}</label>
+          <div id="${id}_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="${i18next.t('config.jgraduate_set_ellip')}">
             <img id="${id}_jGraduate_EllipArrows" class="jGraduate_EllipArrows" src="${$settings.images.clientPath}rangearrows2.gif">
           </div>
           <label><input type="text" id="${id}_jGraduate_EllipInput" size="3" value="0"/>%</label>
         </div>
         <div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field">
-          <label class="prelabel">#svgEditor.i18next.t('config.jgraduate_angle')}</label>
-          <div id="${id}_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="#svgEditor.i18next.t('config.jgraduate_set_angle')}">
+          <label class="prelabel">${i18next.t('config.jgraduate_angle')}</label>
+          <div id="${id}_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="${i18next.t('config.jgraduate_set_angle')}">
             <img id="${id}_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="${$settings.images.clientPath}rangearrows2.gif">
           </div>
-          <label><input type="text" id="${id}_jGraduate_AngleInput" size="3" value="0"/>#svgEditor.i18next.t('config.jgraduate_deg')}</label>
+          <label><input type="text" id="${id}_jGraduate_AngleInput" size="3" value="0"/>${i18next.t('config.jgraduate_deg')}</label>
         </div>
         <div class="jGraduate_Slider jGraduate_OpacField">
-          <label class="prelabel">#svgEditor.i18next.t('config.jgraduate_opac')}</label>
-          <div id="${id}_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="#svgEditor.i18next.t('config.jgraduate_set_opac')}">
+          <label class="prelabel">${i18next.t('config.jgraduate_opac')}</label>
+          <div id="${id}_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="${i18next.t('config.jgraduate_set_opac')}">
             <img id="${id}_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="${$settings.images.clientPath}rangearrows2.gif">
           </div>
           <label><input type="text" id="${id}_jGraduate_OpacInput" size="3" value="100"/>%</label>
         </div>
       </div>
       <div class="jGraduate_OkCancel">
-        <input type="button" id="${id}_jGraduate_Ok" class="jGraduate_Ok" value="#svgEditor.i18next.t("common.ok")}"/>
-        <input type="button" id="${id}_jGraduate_Cancel" class="jGraduate_Cancel" value="#svgEditor.i18next.t("common.cancel")}"/>
+        <input type="button" id="${id}_jGraduate_Ok" class="jGraduate_Ok" value="${i18next.t("common.ok")}"/>
+        <input type="button" id="${id}_jGraduate_Cancel" class="jGraduate_Cancel" value="${i18next.t("common.cancel")}"/>
       </div>`;
   const div = document.createElement('div');
   div.innerHTML = html;
@@ -637,7 +636,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       }, null, function () {
         $this.querySelector('#jGraduate_LightBox').style.display = 'none';
         $this.querySelector('#' + id + '_jGraduate_stopPicker').style.display = 'none';
-      });
+      },
+      i18next
+      );
     });
     const jqStopEls = curGradient.querySelectorAll('stop');
     for (const jqStopEl of jqStopEls) {
@@ -1197,7 +1198,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
       okClicked();
     },
     null,
-    function () { cancelClicked(); }
+    function () { cancelClicked(); },
+    i18next
   );
 
   // JFH !!!!
diff --git a/src/editor/components/jgraduate/jQuery.jPicker.js b/src/editor/components/jgraduate/jQuery.jPicker.js
index 61b0190f..b4f6ce55 100755
--- a/src/editor/components/jgraduate/jQuery.jPicker.js
+++ b/src/editor/components/jgraduate/jQuery.jPicker.js
@@ -603,7 +603,7 @@ const { Color, List, ColorMethods } = jPicker; // local copies for YUI compresso
 * @param {module:jPicker.CancelCallback} [cancelCallback]
 * @returns {void}
 */
-export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback) {
+export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback, i18next) {
   let sets = mergeDeep({}, jPickerDefaults); // local copies for YUI compressor
   sets = mergeDeep(sets, options);
 
@@ -632,7 +632,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
     content.innerHTML = `<span class="Icon" id="jq-ae-Icon">
       <span class="Color" id="jq-ae-Color">&nbsp;</span>
       <span class="Alpha" id="jq-ae-Alpha">&nbsp;</span>
-      <span class="Image" id="jq-ae-Image" title="#svgEditor.i18next.t('config.open_color_picker')}">&nbsp;</span>
+      <span class="Image" id="jq-ae-Image" title="${i18next.t('config.open_color_picker')}">&nbsp;</span>
       <span class="Container" id="Container">&nbsp;</span>
     </span>`;
     that.insertAdjacentElement('afterend', content);
@@ -1331,39 +1331,39 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
         <tr>
           <td rowspan="9"><h2 class="Title">${win.title || 'config.jpicker_title'}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1">&nbsp;</span><span class="Map2" id="MMap2">&nbsp;</span><span class="Map3" id="MMap3">&nbsp;</span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td>
           <td rowspan="9"><div class="Bar" id="Bar"><span class="Map1" id="Map1">&nbsp;</span><span class="Map2" id="Map2">&nbsp;</span><span class="Map3" id="Map3">&nbsp;</span><span class="Map4" id="Map4">&nbsp;</span><span class="Map5" id="Map5">&nbsp;</span><span class="Map6" id="Map6">&nbsp;</span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></div></td>
-          <td colspan="2" class="Preview" id="Preview">#svgEditor.i18next.t('config.jpicker_new_color')}<div id="preview-div"><span class="Active" id="Active" title="#svgEditor.i18next.t('config.jpicker_tooltip_colors_new_color')}">&nbsp;</span><span class="Current" id="Current" title="#svgEditor.i18next.t('config.jpicker_tooltip_colors_current_color')}">&nbsp;</span></div>#svgEditor.i18next.t('config.jpicker_current_color')}</td>
-          <td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="#svgEditor.i18next.t('common.ok')}" title="#svgEditor.i18next.t('config.jpicker_tooltip_buttons_ok')}"/><input type="button" class="Cancel" id="Cancel" value="#svgEditor.i18next.t('common.cancel')}" title="#svgEditor.i18next.t('config.jpicker_tooltip_buttons_cancel')}"/><hr/><div class="Grid" id="Grid"></div></td>
+          <td colspan="2" class="Preview" id="Preview">${i18next.t('config.jpicker_new_color')}<div id="preview-div"><span class="Active" id="Active" title="${i18next.t('config.jpicker_tooltip_colors_new_color')}">&nbsp;</span><span class="Current" id="Current" title="${i18next.t('config.jpicker_tooltip_colors_current_color')}">&nbsp;</span></div>${i18next.t('config.jpicker_current_color')}</td>
+          <td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="${i18next.t('common.ok')}" title="${i18next.t('config.jpicker_tooltip_buttons_ok')}"/><input type="button" class="Cancel" id="Cancel" value="${i18next.t('common.cancel')}" title="${i18next.t('config.jpicker_tooltip_buttons_cancel')}"/><hr/><div class="Grid" id="Grid"></div></td>
         </tr>
         <tr class="Hue">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_hue_radio')}"><input type="radio" value="h"${settings.color.mode === 'h' ? ' checked="checked"' : ''}/>H:</label></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.h : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_hue_textbox')}"/>&nbsp;&deg;</td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_hue_radio')}"><input type="radio" value="h"${settings.color.mode === 'h' ? ' checked="checked"' : ''}/>H:</label></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.h : ''}" title="${i18next.t('config.jpicker_tooltip_hue_textbox')}"/>&nbsp;&deg;</td>
         </tr>
         <tr class="Saturation">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_saturation_radio')}"><input type="radio" value="s"${settings.color.mode === 's' ? ' checked="checked"' : ''}/>S:</label></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.s : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_saturation_textbox')}"/>&nbsp;%</td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_saturation_radio')}"><input type="radio" value="s"${settings.color.mode === 's' ? ' checked="checked"' : ''}/>S:</label></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.s : ''}" title="${i18next.t('config.jpicker_tooltip_saturation_textbox')}"/>&nbsp;%</td>
         </tr>
         <tr class="Value">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_value_radio')}"><input type="radio" value="v"${settings.color.mode === 'v' ? ' checked="checked"' : ''}/>V:</label><br/><br/></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.v : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_value_textbox')}"/>&nbsp;%<br/><br/></td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_value_radio')}"><input type="radio" value="v"${settings.color.mode === 'v' ? ' checked="checked"' : ''}/>V:</label><br/><br/></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.v : ''}" title="${i18next.t('config.jpicker_tooltip_value_textbox')}"/>&nbsp;%<br/><br/></td>
         </tr>
         <tr class="Red">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_red_radio')}"><input type="radio" value="r"${settings.color.mode === 'r' ? ' checked="checked"' : ''}/>R:</label></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.r : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_red_textbox')}"/></td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_red_radio')}"><input type="radio" value="r"${settings.color.mode === 'r' ? ' checked="checked"' : ''}/>R:</label></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.r : ''}" title="${i18next.t('config.jpicker_tooltip_red_textbox')}"/></td>
         </tr>
         <tr class="Green">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_green_radio')}"><input type="radio" value="g"${settings.color.mode === 'g' ? ' checked="checked"' : ''}/>G:</label></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.g : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_green_textbox')}"/></td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_green_radio')}"><input type="radio" value="g"${settings.color.mode === 'g' ? ' checked="checked"' : ''}/>G:</label></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.g : ''}" title="${i18next.t('config.jpicker_tooltip_green_textbox')}"/></td>
         </tr>
         <tr class="Blue">
-          <td class="Radio"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_blue_radio')}"><input type="radio" value="b"${settings.color.mode === 'b' ? ' checked="checked"' : ''}/>B:</label></td>
-          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.b : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_blue_textbox')}"/></td>
+          <td class="Radio"><label title="${i18next.t('config.jpicker_tooltip_blue_radio')}"><input type="radio" value="b"${settings.color.mode === 'b' ? ' checked="checked"' : ''}/>B:</label></td>
+          <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.b : ''}" title="${i18next.t('config.jpicker_tooltip_blue_textbox')}"/></td>
         </tr>
         <tr class="Alpha">
-          <td class="Radio">${win.alphaSupport ? `<label title="#svgEditor.i18next.t('config.jpicker_tooltip_alpha_radio')}"><input type="radio" value="a"${settings.color.mode === 'a' ? ' checked="checked"' : ''}/>A:</label>` : '&nbsp;'}</td>
-          <td class="Text">${win.alphaSupport ? `<input type="text" maxlength="${3 + win.alphaPrecision}" value="${!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, win.alphaPrecision) : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_alpha_textbox')}"/>&nbsp;%` : '&nbsp;'}</td>
+          <td class="Radio">${win.alphaSupport ? `<label title="${i18next.t('config.jpicker_tooltip_alpha_radio')}"><input type="radio" value="a"${settings.color.mode === 'a' ? ' checked="checked"' : ''}/>A:</label>` : '&nbsp;'}</td>
+          <td class="Text">${win.alphaSupport ? `<input type="text" maxlength="${3 + win.alphaPrecision}" value="${!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, win.alphaPrecision) : ''}" title="${i18next.t('config.jpicker_tooltip_alpha_textbox')}"/>&nbsp;%` : '&nbsp;'}</td>
         </tr>
         <tr class="Hex">
-          <td colspan="2" class="Text"><label title="#svgEditor.i18next.t('config.jpicker_tooltip_hex_textbox')}">#:<input type="text" maxlength="6" class="Hex" value="${!isNullish(all) ? all.hex : ''}"/></label>${win.alphaSupport ? `<input type="text" maxlength="2" class="AHex" value="${!isNullish(all) ? all.ahex.substring(6) : ''}" title="#svgEditor.i18next.t('config.jpicker_tooltip_hex_alpha')}"/></td>` : '&nbsp;'}
+          <td colspan="2" class="Text"><label title="${i18next.t('config.jpicker_tooltip_hex_textbox')}">#:<input type="text" maxlength="6" class="Hex" value="${!isNullish(all) ? all.hex : ''}"/></label>${win.alphaSupport ? `<input type="text" maxlength="2" class="AHex" value="${!isNullish(all) ? all.ahex.substring(6) : ''}" title="${i18next.t('config.jpicker_tooltip_hex_alpha')}"/></td>` : '&nbsp;'}
         </tr>
       </tbody></table>`;
     if (win.expandable) {
diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 9fe6f888..55570939 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -1,5 +1,4 @@
 /* eslint-disable max-len */
-/* gl#bals svgEditor */
 import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
 import PaintBox from './PaintBox.js';
 
@@ -643,7 +642,7 @@ div.jGraduate_Slider img {
   </style>
   <div id="picker">
       <img src="./images/logo.svg" alt="icon" id="logo">
-      <label for="color" title="#svgEditor.i18next.t('config.change_xxx_color')}" id="label"></label>
+      <label for="color" title="" id="label"></label>
       <div id="block">
       </div>
   </div>
@@ -666,15 +665,25 @@ export class SeColorPicker extends HTMLElement {
     this.$label = this._shadowRoot.getElementById('label');
     this.$block = this._shadowRoot.getElementById('block');
     this.paintBox = null;
+    this.i18next = null;
     this.$picker = this._shadowRoot.getElementById('picker');
     this.$color_picker = this._shadowRoot.getElementById('color_picker');
   }
+  /**
+   * @function init
+   * @param {any} name
+   * @returns {void}
+   */
+   init (i18next) {
+    this.i18next = i18next;
+    this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color'));
+  }
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'label', 'src', 'type' ];
+    return [ 'label', 'src', 'type', 'config-change_xxx_color' ];
   }
   /**
    * @function attributeChangedCallback
@@ -695,6 +704,9 @@ export class SeColorPicker extends HTMLElement {
     case 'type':
       this.$label.setAttribute('title', 'config.pick_paint_opavity');
       break;
+    case 'config-change_xxx_color':
+      this.$label.setAttribute('title', newValue);
+      break;
     default:
       // eslint-disable-next-line no-console
       console.error(`unknown attribute: ${name}`);
@@ -797,7 +809,8 @@ export class SeColorPicker extends HTMLElement {
         },
         () => {
           this.$color_picker.style.display = 'none';
-        }
+        },
+        this.i18next
       );
     });
   }
diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js
index 1272a7c2..66844a1a 100644
--- a/src/editor/components/sePalette.js
+++ b/src/editor/components/sePalette.js
@@ -1,5 +1,4 @@
 /* eslint-disable max-len */
-/* gl#bals svgEditor */
 const palette = [
   // Todo: Make into configuration item?
   'none', '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
@@ -78,8 +77,7 @@ template.innerHTML = `
     }
   }   
   </style>
-  <div id="palette_holder" title="$
-  #{svgEditor.i18next.t('ui.palette_info')}">
+  <div id="palette_holder" title="">
     <div id="js-se-palette">
     </div>
   </div>
@@ -127,6 +125,35 @@ export class SEPalette extends HTMLElement {
     });
   }
 
+  /**
+   * @function init
+   * @param {any} name
+   * @returns {void}
+   */
+  init (i18next) {
+    this.setAttribute('ui-palette_info', i18next.t('ui.palette_info'));
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return [ 'ui-palette_info' ];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    let node;
+    if (name === 'ui-palette_info') {
+      node = this._shadowRoot.querySelector('#palette_holder');
+      node.setAttribute('title', newValue);
+    }
+  }
   /**
    * @function connectedCallback
    * @returns {void}
diff --git a/src/editor/extensions/ext-storage/ext-storage.js b/src/editor/extensions/ext-storage/ext-storage.js
index 9495c890..d75e985e 100644
--- a/src/editor/extensions/ext-storage/ext-storage.js
+++ b/src/editor/extensions/ext-storage/ext-storage.js
@@ -83,6 +83,7 @@ export default {
     const storageBox = document.createElement('se-storage-dialog');
     storageBox.setAttribute('id', 'se-storage-dialog');
     document.body.append(storageBox);
+    storageBox.init(svgEditor.i18next);
 
     // manage the change in the storageDialog
 
diff --git a/src/editor/extensions/ext-storage/storageDialog.js b/src/editor/extensions/ext-storage/storageDialog.js
index 92f4a2af..93333678 100644
--- a/src/editor/extensions/ext-storage/storageDialog.js
+++ b/src/editor/extensions/ext-storage/storageDialog.js
@@ -1,15 +1,5 @@
 /* eslint-disable max-len */
-/* globals svgEditor */
 const template = document.createElement('template');
-const notification = svgEditor.i18next.t('notification.editorPreferencesMsg');
-const prefs_and_content = svgEditor.i18next.t('properties.prefs_and_content');
-const prefs_only = svgEditor.i18next.t('properties.prefs_only');
-const no_prefs_or_content = svgEditor.i18next.t('properties.no_prefs_or_content');
-const remember_this_choice = svgEditor.i18next.t('tools.remember_this_choice');
-const remember_this_choice_title = svgEditor.i18next.t('tools.remember_this_choice_title');
-const ok = svgEditor.i18next.t('common.ok');
-const cancel = svgEditor.i18next.t('common.cancel');
-// eslint-disable-next-line no-unsanitized/property
 template.innerHTML = `
   <style>
  
@@ -59,26 +49,22 @@ template.innerHTML = `
     <div class="overlay"></div>
     <div id="dialog_container">
       <div id="dialog_content">
-        <p>
-          ${notification} 
-        </p>
+        <p id="notificationNote"> </p>
         <select id="se-storage-pref">
-          <option value="prefsAndContent">${prefs_and_content}</option>
-          <option value="prefsOnly">${prefs_only}</option>
-          <option value="noPrefsOrContent">${no_prefs_or_content}</option>
+          <option value="prefsAndContent" id="prefsAndContent"></option>
+          <option value="prefsOnly" id="prefsOnly"></option>
+          <option value="noPrefsOrContent" id="noPrefsOrContent"></option>
         </select> 
-        <label title="${remember_this_choice_title}">
-        ${remember_this_choice}<input type="checkbox" id="se-remember" value="" checked>
+        <label title="" id="se-remember-title">
+          <input type="checkbox" id="se-remember" value="" checked>
         </label>     
       </div>
       <div id="dialog_buttons">
         <button id="storage_ok">
           <img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
-          ${ok}
         </button>
         <button id="storage_cancel">
           <img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
-          ${cancel}
         </button>
       </div>
     </div>
@@ -103,12 +89,27 @@ export class SeStorageDialog extends HTMLElement {
     this.$storageInput = this._shadowRoot.querySelector('#se-storage-pref');
     this.$rememberInput = this._shadowRoot.querySelector('#se-remember');
   }
+  /**
+   * @function init
+   * @param {any} name
+   * @returns {void}
+   */
+   init (i18next) {
+    this.setAttribute('common-ok', i18next.t('common.ok'));
+    this.setAttribute('common-cancel', i18next.t('common.cancel'));
+    this.setAttribute('notify-editor_pref_msg', i18next.t('notification.editorPreferencesMsg'));
+    this.setAttribute('properties-prefs_and_content', i18next.t('properties.prefs_and_content'));
+    this.setAttribute('properties-prefs_only', i18next.t('properties.prefs_only'));
+    this.setAttribute('properties-no_prefs_or_content', i18next.t('properties.no_prefs_or_content'));
+    this.setAttribute('tools-remember_this_choice', i18next.t('tools.remember_this_choice'));
+    this.setAttribute('tools-remember_this_choice_title', i18next.t('tools.remember_this_choice_title'));
+  }
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return [ 'dialog', 'storage' ];
+    return [ 'dialog', 'storage', 'common-ok', 'common-cancel', 'notify-editor_pref_msg', 'properties-prefs_and_content', 'tools-remember_this_choice', 'tools-remember_this_choice_title', 'properties-prefs_only', 'properties-no_prefs_or_content' ];
   }
   /**
    * @function attributeChangedCallback
@@ -118,6 +119,7 @@ export class SeStorageDialog extends HTMLElement {
    * @returns {void}
    */
   attributeChangedCallback (name, oldValue, newValue) {
+    let node;
     switch (name) {
     case 'dialog':
       if (newValue === 'open') {
@@ -133,6 +135,36 @@ export class SeStorageDialog extends HTMLElement {
         this.$storageInput.options[0].disabled = true;
       }
       break;
+    case 'common-ok':
+      this.$okBtn.append(newValue);
+      break;
+    case 'common-cancel':
+      this.$cancelBtn.append(newValue);
+      break;
+    case 'notify-editor_pref_msg':
+      node = this._shadowRoot.querySelector('#notificationNote');
+      node.textContent = newValue;
+      break;
+    case 'properties-prefs_and_content':
+      node = this._shadowRoot.querySelector('#prefsAndContent');
+      node.textContent = newValue;
+      break;
+    case 'properties-prefs_only':
+      node = this._shadowRoot.querySelector('#prefsOnly');
+      node.textContent = newValue;
+      break;
+    case 'properties-no_prefs_or_content':
+      node = this._shadowRoot.querySelector('#noPrefsOrContent');
+      node.textContent = newValue;
+      break;
+    case 'tools-remember_this_choice':
+      node = this._shadowRoot.querySelector('#se-remember-title');
+      node.prepend(newValue);
+      break;
+    case 'tools-remember_this_choice_title':
+      node = this._shadowRoot.querySelector('#se-remember-title');
+      node.setAttribute('title', newValue);
+      break;
     default:
       // super.attributeChangedCallback(name, oldValue, newValue);
       break;
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 34191440..ad7e521b 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -215,6 +215,7 @@ class BottomPanel {
     `;
     this.editor.$svgEditor.append(template.content.cloneNode(true));
     $id('palette').addEventListener('change', this.handlePalette.bind(this));
+    $id('palette').init(i18next);
     const { curConfig } = this.editor.configObj;
     $id('fill_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initFill.color }));
     $id('stroke_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initStroke.color }));
@@ -226,6 +227,8 @@ class BottomPanel {
     $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
     $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
     $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
+    $id('fill_color').init(i18next);
+    $id('stroke_color').init(i18next);
   }
   /**
   * @type {module}