2 files changed, 30 insertions, 48 deletions
diff --git a/src/corelib/doc/images/string_class_api.svg b/src/corelib/doc/images/string_class_api.svg
index 291057a4241..8278b9e403b 100644
--- a/src/corelib/doc/images/string_class_api.svg
+++ b/src/corelib/doc/images/string_class_api.svg
@@ -4,18 +4,15 @@
   xmlns="http://www.w3.org/2000/svg">
 
   <style>
-    [data-theme="dark"] svg #raute { fill: #1A8550; stroke: #F2F2F2; }
-    [data-theme="dark"] svg #lozenge { fill: #1A8550; stroke: #F2F2F2; }
-    [data-theme="dark"] svg #lozenge_small { fill: #1A8550; stroke: #F2F2F2; }
+    svg path.node { fill: inherit; stroke: inherit; }
+    [data-theme="dark"] svg .node-style { fill: #1A8550; stroke: #F2F2F2; }
     [data-theme="dark"] svg #footnotes { fill: #F2F2F2; }
     [data-theme="dark"] svg #arrow-tip { fill: #F2F2F2; }
     [data-theme="dark"] svg .arrow-style { stroke: #F2F2F2; }
     [data-theme="dark"] svg .text-style { font: 12px arial; fill: #F2F2F2; }
     [data-theme="dark"] svg .text-style-arrows { font: 12px arial; fill: #F2F2F2; }
 
-    [data-theme="light"] svg #raute { fill: #56E59D; stroke: #333333; }
-    [data-theme="light"] svg #lozenge { fill: #56E59D; stroke: #333333; }
-    [data-theme="light"] svg #lozenge_small { fill: #56E59D; stroke: #333333; }
+    [data-theme="light"] svg .node-style { fill: #56E59D; stroke: #333333; }
     [data-theme="light"] svg #footnotes { fill: #333333; }
     [data-theme="light"] svg #arrow-tip { fill: #333333; }
     [data-theme="light"] svg .arrow-style { stroke: #333333; }
@@ -24,14 +21,10 @@
   </style>
 
   <defs>
-    <path id="raute"
-      fill="#56E59D"
-      stroke="#333333"
+    <path id="raute" class="node"
       stroke-width="1px"
       d="m 0 -40 L 80 0 L 0 40 L -80 0 z" />
-    <path id="lozenge"
-      fill="#56E59D"
-      stroke="#333333"
+    <path id="lozenge" class="node"
       stroke-width="1px"
       d="M -60,-20
          h 120
@@ -43,9 +36,7 @@
          v 0
          a 20,20 0 0 1 20,-20
          Z"/>
-    <path id="lozenge_small"
-      fill="#56E59D"
-      stroke="#333333"
+    <path id="lozenge_small" class="node"
       stroke-width="1px"
       d="M -40,-20
          h 80
@@ -71,7 +62,7 @@
   </defs>
 
   <g id="start" transform="translate(-160, 0)">
-    <use href="#lozenge" />
+    <use class="node-style" href="#lozenge" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -83,7 +74,7 @@
   </g>
 
   <g id="param_or_return" transform="translate(-160, 100)">
-   <use href="#raute" />
+   <use class="node-style" href="#raute" fill="#56E59D" stroke="#333333" />
    <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -95,7 +86,7 @@
   </g>
 
   <g id="make_copy" transform="translate(-320, 200)">
-    <use href="#raute" />
+    <use class="node-style" href="#raute" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -107,7 +98,7 @@
   </g>
 
   <g id="ref_or_perm" transform="translate(40, 200)">
-    <use href="#raute" />
+    <use class="node-style" href="#raute" fill="#56E59D" stroke="#333333" />
      <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -120,7 +111,7 @@
   </g>
 
   <g id="make_copy" transform="translate(-80, 300)">
-    <use href="#raute" />
+    <use class="node-style" href="#raute" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -132,7 +123,7 @@
   </g>
 
   <g id="const_ref" transform="translate(-320, 300)">
-    <use href="#lozenge" />
+    <use class="node-style" href="#lozenge" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -142,7 +133,7 @@
   </g>
 
   <g id="anystringview" transform="translate(-200, 380)">
-    <use href="#lozenge" />
+    <use class="node-style" href="#lozenge" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -156,7 +147,7 @@
 
 
   <g id="anystringview" transform="translate(40, 380)">
-    <use href="#lozenge" />
+    <use class="node-style" href="#lozenge" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
diff --git a/src/corelib/doc/images/string_class_calling.svg b/src/corelib/doc/images/string_class_calling.svg
index 9c5a1eecb09..b734042164e 100644
--- a/src/corelib/doc/images/string_class_calling.svg
+++ b/src/corelib/doc/images/string_class_calling.svg
@@ -4,18 +4,15 @@
   xmlns="http://www.w3.org/2000/svg">
 
   <style>
-    [data-theme="dark"] svg #raute { fill: #1A8550; stroke: #F2F2F2; }
-    [data-theme="dark"] svg #lozenge { fill: #1A8550; stroke: #F2F2F2; }
-    [data-theme="dark"] svg #lozenge_small { fill: #1A8550; stroke: #F2F2F2; }
+    svg path.node { fill: inherit; stroke: inherit; }
+    [data-theme="dark"] svg .node-style { fill: #1A8550; stroke: #F2F2F2; }
     [data-theme="dark"] svg #footnotes { fill: #F2F2F2; }
     [data-theme="dark"] svg #arrow-tip { fill: #F2F2F2; }
     [data-theme="dark"] svg .arrow-style { stroke: #F2F2F2; }
     [data-theme="dark"] svg .text-style { font: 12px arial; fill: #F2F2F2; }
     [data-theme="dark"] svg .text-style-arrows { font: 12px arial; fill: #F2F2F2; }
 
-    [data-theme="light"] svg #raute { fill: #56E59D; stroke: #333333; }
-    [data-theme="light"] svg #lozenge { fill: #56E59D; stroke: #333333; }
-    [data-theme="light"] svg #lozenge_small { fill: #56E59D; stroke: #333333; }
+    [data-theme="light"] svg .node-style { fill: #56E59D; stroke: #333333; }
     [data-theme="light"] svg #footnotes { fill: #333333; }
     [data-theme="light"] svg #arrow-tip { fill: #333333; }
     [data-theme="light"] svg .arrow-style { stroke: #333333; }
@@ -24,14 +21,10 @@
   </style>
 
   <defs>
-    <path id="raute"
-      fill="#56E59D"
-      stroke="#333333"
+    <path id="raute" class="node"
       stroke-width="1px"
       d="m 0 -40 L 80 0 L 0 40 L -80 0 z" />
-    <path id="lozenge"
-      fill="#56E59D"
-      stroke="#333333"
+    <path id="lozenge" class="node"
       stroke-width="1px"
       d="M -60,-20
         h 120
@@ -43,9 +36,7 @@
         v 0
         a 20,20 0 0 1 20,-20
         Z"/>
-    <path id="lozenge_small"
-      fill="#56E59D"
-      stroke="#333333"
+    <path id="lozenge_small" class="node"
       stroke-width="1px"
       d="M -40,-20
         h 80
@@ -71,7 +62,7 @@
   </defs>
 
   <g id="start" transform="translate(-160, 0)">
-    <use href="#lozenge" />
+    <use class="node-style" href="#lozenge" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -83,7 +74,7 @@
   </g>
 
   <g id="param_or_return" transform="translate(-160, 100)">
-   <use href="#raute" />
+   <use class="node-style" href="#raute" fill="#56E59D" stroke="#333333" />
    <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -96,7 +87,7 @@
   </g>
 
   <g id="ref_or_perm" transform="translate(-320, 200)">
-    <use href="#raute" />
+    <use class="node-style" href="#raute" fill="#56E59D" stroke="#333333" />
      <text
        font-size="12" font-family="Arial" fill="#333333"
        text-anchor="middle" dominant-baseline="middle"
@@ -109,7 +100,7 @@
 
 
   <g id="ref_or_perm" transform="translate(-320, 330)">
-    <use href="#raute" />
+    <use class="node-style" href="#raute" fill="#56E59D" stroke="#333333" />
      <text
        font-size="12" font-family="Arial" fill="#333333"
        text-anchor="middle" dominant-baseline="middle"
@@ -122,7 +113,7 @@
 
 
   <g id="make_copy" transform="translate(-100, 330)">
-    <use href="#raute" />
+    <use class="node-style" href="#raute" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -134,7 +125,7 @@
   </g>
 
   <g transform="translate(40, 150)">
-    <use href="#lozenge" />
+    <use class="node-style" href="#lozenge" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -146,7 +137,7 @@
   </g>
 
   <g transform="translate(-100, 200)">
-    <use href="#lozenge" />
+    <use class="node-style" href="#lozenge" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -158,7 +149,7 @@
   </g>
 
   <g transform="translate(40, 390)">
-    <use href="#lozenge" />
+    <use class="node-style" href="#lozenge" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -170,7 +161,7 @@
   </g>
 
   <g transform="translate(-100, 430)">
-    <use href="#lozenge" />
+    <use class="node-style" href="#lozenge" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
@@ -183,7 +174,7 @@
 
 
   <g transform="translate(-320, 430)">
-    <use href="#lozenge" />
+    <use class="node-style" href="#lozenge" fill="#56E59D" stroke="#333333" />
     <text
       font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"