From 8643ae7a766b0f1c24d11d2dc64af6f23c307ad0 Mon Sep 17 00:00:00 2001
From: Matthias Rauter <matthias.rauter@qt.io>
Date: Tue, 29 Apr 2025 10:20:51 +0200
Subject: [PATCH] Add Qt styling, ids, and classes to string overview graphics

While many graphics in core use a light blue color, it does not fit to
Qt and to the general styling of the documentation. This patch changes
the color to the Qt green.

In the long run, I would like to have styling switching between light
and dark mode. This patch applies ids and styling so that it could be
switched from outside, if the html document this is embedded into
sets the correct tags. This will probably require some features in qdoc.

Task-number: QTBUG-133882
Change-Id: Iadce79a5f5a99014abe97c19d9e76efac3d49dad
Reviewed-by: Mate Barany <mate.barany@qt.io>
---
 src/corelib/doc/images/string_class_api.svg   | 158 +++++++++-----
 .../doc/images/string_class_calling.svg       | 196 +++++++++++-------
 2 files changed, 224 insertions(+), 130 deletions(-)

diff --git a/src/corelib/doc/images/string_class_api.svg b/src/corelib/doc/images/string_class_api.svg
index b3bfc3082da..291057a4241 100644
--- a/src/corelib/doc/images/string_class_api.svg
+++ b/src/corelib/doc/images/string_class_api.svg
@@ -2,15 +2,36 @@
   viewBox="-410 -30 540 470"
   version="1.1"
   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; }
+    [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 #footnotes { fill: #333333; }
+    [data-theme="light"] svg #arrow-tip { fill: #333333; }
+    [data-theme="light"] svg .arrow-style { stroke: #333333; }
+    [data-theme="light"] svg .text-style { font: 11px arial; fill: #333333; }
+    [data-theme="light"] svg .text-style-arrows { font: 11px arial; fill: #333333; }
+  </style>
+
   <defs>
     <path id="raute"
-      fill="#cfe7f5"
-      stroke="black"
+      fill="#56E59D"
+      stroke="#333333"
       stroke-width="1px"
       d="m 0 -40 L 80 0 L 0 40 L -80 0 z" />
     <path id="lozenge"
-      fill="#cfe7f5"
-      stroke="black"
+      fill="#56E59D"
+      stroke="#333333"
       stroke-width="1px"
       d="M -60,-20
          h 120
@@ -23,8 +44,8 @@
          a 20,20 0 0 1 20,-20
          Z"/>
     <path id="lozenge_small"
-      fill="#cfe7f5"
-      stroke="black"
+      fill="#56E59D"
+      stroke="#333333"
       stroke-width="1px"
       d="M -40,-20
          h 80
@@ -45,16 +66,17 @@
       markerWidth="10"
       markerHeight="10"
       orient="auto">
-      <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
+      <path id="arrow-tip" d="M 0 0 L 10 5 L 0 10 z" fill="#333333" />
     </marker>
   </defs>
 
   <g id="start" transform="translate(-160, 0)">
     <use href="#lozenge" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -6)">
+      transform="translate(0, -6)"
+      class="text-style">
       <tspan x="0" dy="0em">Choosing a string class</tspan>
       <tspan x="0" dy="1.2em">for creating an API</tspan>
     </text>
@@ -63,9 +85,10 @@
   <g id="param_or_return" transform="translate(-160, 100)">
    <use href="#raute" />
    <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -6)">
+      transform="translate(0, -6)"
+      class="text-style">
       <tspan x="0" dy="0em">For a parameter</tspan>
       <tspan x="0" dy="1.2em">or the return value?</tspan>
   </text>
@@ -74,9 +97,10 @@
   <g id="make_copy" transform="translate(-320, 200)">
     <use href="#raute" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -6)">
+      transform="translate(0, -6)"
+      class="text-style">
       <tspan x="0" dy="0em">Will you make</tspan>
       <tspan x="0" dy="1.2em">a persistent copy?</tspan>
     </text>
@@ -85,21 +109,23 @@
   <g id="ref_or_perm" transform="translate(40, 200)">
     <use href="#raute" />
      <text
-       font-size="12" fill="black"
-       text-anchor="middle" dominant-baseline="middle"
-       transform="translate(0, -12)">
-       <tspan x="0" dy="0em">Reference to</tspan>
-       <tspan x="0" dy="1.2em">permanent or</tspan>
-       <tspan x="0" dy="1.2em">temporary?</tspan>
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="middle"
+      transform="translate(0, -12)"
+      class="text-style">
+      <tspan x="0" dy="0em">Reference to</tspan>
+      <tspan x="0" dy="1.2em">permanent or</tspan>
+      <tspan x="0" dy="1.2em">temporary?</tspan>
   </text>
   </g>
 
   <g id="make_copy" transform="translate(-80, 300)">
     <use href="#raute" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -6)">
+      transform="translate(0, -6)"
+      class="text-style">
       <tspan x="0" dy="0em">Reference to full</tspan>
       <tspan x="0" dy="1.2em">or part?</tspan>
     </text>
@@ -108,8 +134,9 @@
   <g id="const_ref" transform="translate(-320, 300)">
     <use href="#lozenge" />
     <text
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="middle" >
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="middle"
+      class="text-style">
       <tspan x="0" dy="0em">const QString&amp;¹</tspan>
     </text>
   </g>
@@ -117,9 +144,10 @@
   <g id="anystringview" transform="translate(-200, 380)">
     <use href="#lozenge" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -8)" >
+      transform="translate(0, -8)"
+      class="text-style">
       <tspan x="0" dy="0em">Q*StringView</tspan>
       <tspan font-size="8" x="0" dy="1.4em">Parameters: preferably QAnyStringView</tspan>
       <tspan font-size="8" x="0" dy="1.2em">Generally: any of L1, UTF-8, or UTF-16</tspan>
@@ -130,115 +158,133 @@
   <g id="anystringview" transform="translate(40, 380)">
     <use href="#lozenge" />
     <text
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="middle" >
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="middle"
+      class="text-style">
       <tspan x="0" dy="0em">QString</tspan>
     </text>
   </g>
 
   <g transform="translate(-160, 20)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 0 30" />
   </g>
 
   <g transform="translate(-240, 100)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l -80 0 l 0 50" />
     <text x="-40" y="-5"
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="auto"
+      class="text-style-arrows">
       parameter
     </text>
   </g>
 
   <g transform="translate(-80, 100)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 120 0 l 0 50" />
     <text x="60" y="-5"
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="auto"
+      class="text-style-arrows">
       return value
     </text>
   </g>
 
   <g transform="translate(-320, 240)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 0 30" />
     <text x="5" y="15"
-      font-size="12" fill="black"
-      text-anchor="left" dominant-baseline="middle">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="left" dominant-baseline="middle"
+      class="text-style-arrows">
       yes
     </text>
   </g>
 
   <g transform="translate(-240, 200)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 40 0 l 0 150" />
     <text x="20" y="-5"
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="auto"
+      class="text-style-arrows">
       no
     </text>
   </g>
 
   <g transform="translate(-40, 200)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l -40 0 l 0 50" />
     <text x="-20" y="-5"
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="auto"
+      class="text-style-arrows">
       reference
     </text>
   </g>
 
   <g transform="translate(-160, 300)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l -70 0" />
     <text x="-20" y="-5"
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="auto"
+      class="text-style-arrows">
       full
     </text>
   </g>
 
   <g transform="translate(-80, 340)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 0 40 l -30 0" />
     <text x="5" y="20"
-      font-size="12" fill="black"
-      text-anchor="left" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="left" dominant-baseline="auto"
+      class="text-style-arrows">
       part
     </text>
   </g>
 
   <g transform="translate(40, 240)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 0 110" />
     <text x="5" y="55"
-      font-size="12" fill="black"
-      text-anchor="left" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="left" dominant-baseline="auto"
+      class="text-style-arrows">
       temporary
     </text>
   </g>
 
   <g transform="translate(-400, 415)">
-    <text x="5" y="5"
-      font-size="9" fill="black"
+    <text id="footnotes" x="5" y="5"
+      font-size="9" font-family="Arial" fill="#333333"
       text-anchor="left" dominant-baseline="middle">
       <tspan x="0" dy="0em">1:</tspan>
       <tspan x="1em" dy="0em">If you return a QString in full, you can choose
         to return a value instead of a reference, allowing you to return a
-        temporary in the future without</tspan>
-      <tspan x="1em" dy="1.2em">breaking source code compatibility. This is
+        temporary in the</tspan>
+      <tspan x="1em" dy="1.2em">future without breaking source code compatibility. This is
         also done for all Qt APIs.</tspan>
     </text>
   </g>
diff --git a/src/corelib/doc/images/string_class_calling.svg b/src/corelib/doc/images/string_class_calling.svg
index 4253d35705b..9c5a1eecb09 100644
--- a/src/corelib/doc/images/string_class_calling.svg
+++ b/src/corelib/doc/images/string_class_calling.svg
@@ -2,40 +2,61 @@
   viewBox="-410 -30 540 540"
   version="1.1"
   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; }
+    [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 #footnotes { fill: #333333; }
+    [data-theme="light"] svg #arrow-tip { fill: #333333; }
+    [data-theme="light"] svg .arrow-style { stroke: #333333; }
+    [data-theme="light"] svg .text-style { font: 12px arial; fill: #333333; }
+    [data-theme="light"] svg .text-style-arrows { font: 12px arial; fill: #333333; }
+  </style>
+
   <defs>
     <path id="raute"
-      fill="#cfe7f5"
-      stroke="black"
+      fill="#56E59D"
+      stroke="#333333"
       stroke-width="1px"
       d="m 0 -40 L 80 0 L 0 40 L -80 0 z" />
     <path id="lozenge"
-      fill="#cfe7f5"
-      stroke="black"
+      fill="#56E59D"
+      stroke="#333333"
       stroke-width="1px"
       d="M -60,-20
-         h 120
-         a 20,20 0 0 1 20,20
-         v 0
-         a 20,20 0 0 1 -20,20
-         h -120
-         a 20,20 0 0 1 -20,-20
-         v 0
-         a 20,20 0 0 1 20,-20
-         Z"/>
+        h 120
+        a 20,20 0 0 1 20,20
+        v 0
+        a 20,20 0 0 1 -20,20
+        h -120
+        a 20,20 0 0 1 -20,-20
+        v 0
+        a 20,20 0 0 1 20,-20
+        Z"/>
     <path id="lozenge_small"
-      fill="#cfe7f5"
-      stroke="black"
+      fill="#56E59D"
+      stroke="#333333"
       stroke-width="1px"
       d="M -40,-20
-         h 80
-         a 20,20 0 0 1 20,20
-         v 0
-         a 20,20 0 0 1 -20,20
-         h -80
-         a 20,20 0 0 1 -20,-20
-         v 0
-         a 20,20 0 0 1 20,-20
-         Z"/>
+        h 80
+        a 20,20 0 0 1 20,20
+        v 0
+        a 20,20 0 0 1 -20,20
+        h -80
+        a 20,20 0 0 1 -20,-20
+        v 0
+        a 20,20 0 0 1 20,-20
+        Z"/>
     <marker
       id="triangle"
       viewBox="0 0 10 10"
@@ -45,16 +66,17 @@
       markerWidth="10"
       markerHeight="10"
       orient="auto">
-      <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
+      <path id="arrow-tip" d="M 0 0 L 10 5 L 0 10 z" fill="#333333" />
     </marker>
   </defs>
 
   <g id="start" transform="translate(-160, 0)">
     <use href="#lozenge" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -6)">
+      transform="translate(0, -6)"
+      class="text-style">
       <tspan x="0" dy="0em">Choosing a string class</tspan>
       <tspan x="0" dy="1.2em">for calling Qt functions</tspan>
     </text>
@@ -63,9 +85,10 @@
   <g id="param_or_return" transform="translate(-160, 100)">
    <use href="#raute" />
    <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -12)">
+      transform="translate(0, -12)"
+      class="text-style">
       <tspan x="0" dy="0em">Is your string</tspan>
       <tspan x="0" dy="1.2em">known at compile time</tspan>
       <tspan x="0" dy="1.2em">(a literal)?</tspan>
@@ -75,9 +98,10 @@
   <g id="ref_or_perm" transform="translate(-320, 200)">
     <use href="#raute" />
      <text
-       font-size="12" fill="black"
+       font-size="12" font-family="Arial" fill="#333333"
        text-anchor="middle" dominant-baseline="middle"
-       transform="translate(0, -6)">
+       transform="translate(0, -6)"
+       class="text-style">
        <tspan x="0" dy="0em">Is the parameter a</tspan>
        <tspan x="0" dy="1.2em">QString or a Q*View?</tspan>
   </text>
@@ -87,9 +111,10 @@
   <g id="ref_or_perm" transform="translate(-320, 330)">
     <use href="#raute" />
      <text
-       font-size="12" fill="black"
+       font-size="12" font-family="Arial" fill="#333333"
        text-anchor="middle" dominant-baseline="middle"
-       transform="translate(0, -6)">
+       transform="translate(0, -6)"
+       class="text-style">
        <tspan x="0" dy="0em">Has the parameter a</tspan>
        <tspan x="0" dy="1.2em">preferred² encoding?</tspan>
   </text>
@@ -99,9 +124,10 @@
   <g id="make_copy" transform="translate(-100, 330)">
     <use href="#raute" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -6)">
+      transform="translate(0, -6)"
+      class="text-style">
       <tspan x="0" dy="0em">Is your string</tspan>
       <tspan x="0" dy="1.2em">ASCII?</tspan>
     </text>
@@ -110,9 +136,10 @@
   <g transform="translate(40, 150)">
     <use href="#lozenge" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -4)" >
+      transform="translate(0, -4)"
+      class="text-style">
       <tspan x="0" dy="0em">QString¹</tspan>
       <tspan font-size="8" x="0" dy="1.4em">or any other owning string</tspan>
     </text>
@@ -121,9 +148,10 @@
   <g transform="translate(-100, 200)">
     <use href="#lozenge" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -4)" >
+      transform="translate(0, -4)"
+      class="text-style">
       <tspan x="0" dy="0em">QStringLiteral</tspan>
       <tspan font-size="8" x="0" dy="1.4em">same as u"foo"_s</tspan>
     </text>
@@ -132,9 +160,10 @@
   <g transform="translate(40, 390)">
     <use href="#lozenge" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -4)" >
+      transform="translate(0, -4)"
+      class="text-style">
       <tspan x="0" dy="0em">QLatin1StringView</tspan>
       <tspan font-size="8" x="0" dy="1.4em">create with "foo"_L1</tspan>
     </text>
@@ -143,9 +172,10 @@
   <g transform="translate(-100, 430)">
     <use href="#lozenge" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -4)" >
+      transform="translate(0, -4)"
+      class="text-style">
       <tspan x="0" dy="0em">QStringView</tspan>
       <tspan font-size="8" x="0" dy="1.4em">create with u"foo"</tspan>
     </text>f
@@ -155,9 +185,10 @@
   <g transform="translate(-320, 430)">
     <use href="#lozenge" />
     <text
-      font-size="12" fill="black"
+      font-size="12" font-family="Arial" fill="#333333"
       text-anchor="middle" dominant-baseline="middle"
-      transform="translate(0, -8)" >
+      transform="translate(0, -8)"
+      class="text-style">
       <tspan x="0" dy="0em">Q*StringView</tspan>
       <tspan font-size="8" x="0" dy="1.4em">of the preferred encoding,</tspan>
       <tspan font-size="8" x="0" dy="1.2em">create with u"foo", u8"foo" or "foo"_L1</tspan>
@@ -166,28 +197,33 @@
 
   <g transform="translate(-160, 20)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 0 30" />
   </g>
 
   <g transform="translate(-240, 100)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l -80 0 l 0 50" />
     <text x="-40" y="-5"
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="auto"
+      class="text-style-arrows">
       yes
     </text>
   </g>
 
   <g transform="translate(-80, 100)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 120 0 l 0 20" />
     <text x="60" y="-5"
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="auto"
+      class="text-style-arrows">
       no
     </text>
   </g>
@@ -195,11 +231,13 @@
 
   <g transform="translate(-240, 200)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 50 0 " />
     <text x="25" y="-5"
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="auto"
+      class="text-style-arrows">
       QString
     </text>
   </g>
@@ -207,33 +245,39 @@
 
   <g transform="translate(-320, 240)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 0 40 " />
     <text x="5" y="20"
-      font-size="12" fill="black"
-      text-anchor="left" dominant-baseline="middle">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="left" dominant-baseline="middle"
+      class="text-style-arrows">
       Q*View
     </text>
   </g>
 
   <g transform="translate(-240, 330)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 50 0" />
     <text x="30" y="-5"
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="auto"
+      class="text-style-arrows">
       no
     </text>
   </g>
 
   <g transform="translate(-320, 370)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 0 30" />
     <text x="5" y="15"
-      font-size="12" fill="black"
-      text-anchor="left" dominant-baseline="middle">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="left" dominant-baseline="middle"
+      class="text-style-arrows">
       yes
     </text>
   </g>
@@ -241,35 +285,39 @@
 
   <g transform="translate(-20, 330)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 60 0 l 0 30" />
     <text x="30" y="-5"
-      font-size="12" fill="black"
-      text-anchor="middle" dominant-baseline="auto">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="middle" dominant-baseline="auto"
+      class="text-style-arrows">
       yes
     </text>
   </g>
 
   <g transform="translate(-100, 370)">
     <path
-      fill="none" stroke="black" marker-end="url(#triangle)"
+      fill="none" stroke="#333333" marker-end="url(#triangle)"
+      class="arrow-style"
       d="M 0 0 l 0 30" />
     <text x="5" y="15"
-      font-size="12" fill="black"
-      text-anchor="left" dominant-baseline="middle">
+      font-size="12" font-family="Arial" fill="#333333"
+      text-anchor="left" dominant-baseline="middle"
+      class="text-style-arrows">
       no
     </text>
   </g>
 
   <g transform="translate(-400, 465)">
-    <text x="5" y="5"
-      font-size="9" fill="black"
+    <text id="footnotes" x="5" y="5"
+      font-size="9" font-family="Arial" fill="#333333"
       text-anchor="left" dominant-baseline="middle">
       <tspan x="0" dy="0em">1:</tspan>
       <tspan x="1em" dy="0em">An owning string is required to assemble or store
         a string at runtime, if it is not known at compile time. This can be
-        QString or any other</tspan>
-      <tspan x="1em" dy="1.2em">owning string, such as std::string. The correct
+        QString or any</tspan>
+      <tspan x="1em" dy="1.2em">other owning string, such as std::string. The correct
         choice depends on the required encoding.</tspan>
       <tspan x="0" dy="1.4em">2:</tspan>
       <tspan x="1em" dy="0em">Some functions are more effective when using the