Doc: Update model/view diagrams to styled SVG versionsHEAD dev

Existing images are not suitable for use with the dark theme of the online documentation. SVG files are more versatile and can be styled for the light and dark themes. Some hard-coded properties are used to ensure that Assistant's SVG renderer can display the files in a reasonable way. Change-Id: Iafb72835937f1e96598993ee61de6f384e68b50b Reviewed-by: Jerome Pasion <jerome.pasion@qt.io>
author: David Boddie <david.boddie@qt.io> 2025-11-05 12:25:38 +0100
committer: David Boddie <david.boddie@qt.io> 2025-12-01 22:04:44 +0100
commit: c94ce38e4946e512f9b567c470ba98cbe933dfde (patch)
tree: c066a248aabbdf5a469639b90c9e4673ef176e61 /src
parent: bd3acba9b6308ee974fb1210cff2c0bdb74e8710 (diff)
5 files changed, 518 insertions, 4 deletions
diff --git a/src/widgets/doc/images/modelview-models.svg b/src/widgets/doc/images/modelview-models.svg
new file mode 100644
index 00000000000..a7efed081ef
--- /dev/null
+++ b/src/widgets/doc/images/modelview-models.svg
@@ -0,0 +1,208 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="600"
+   height="285"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+
+<style>
+  svg .line-style { stroke: black; fill: none }
+  svg .text-style { font: 12px arial; fill: black }
+  svg .italic-style { font: 12px arial; fill: black; font-style: italic }
+  svg .bold-style { font: 14px arial; fill: black; font-weight: bold }
+  svg .item-style { font: 16px arial; fill: black }
+
+  svg.dark .line-style { stroke: #f2f2f2; fill: none }
+  svg.dark .text-style { font: 12px arial; fill: #f2f2f2 }
+  svg.dark .italic-style { font: 12px arial; fill: #f2f2f2; font-style: italic }
+  svg.dark .bold-style { font: 14px arial; fill: #f2f2f2; font-weight: bold }
+  svg.dark .item-style { font: 14px arial; fill: #f2f2f2 }
+
+  [data-theme="dark"] svg .line-style { stroke: #f2f2f2; fill: none }
+  [data-theme="dark"] svg .text-style { font: 12px arial; fill: #f2f2f2 }
+  [data-theme="dark"] svg .italic-style { font: 12px arial; fill: #f2f2f2; font-style: italic }
+  [data-theme="dark"] svg .bold-style { font: 14px arial; fill: #f2f2f2; font-weight: bold }
+  [data-theme="dark"] svg .item-style { font: 14px arial; fill: #f2f2f2 }
+
+  [data-theme="light"] svg .line-style { stroke: black; fill: none }
+  [data-theme="light"] svg .text-style { font: 12px arial; fill: black }
+  [data-theme="light"] svg .italic-style { font: 12px arial; fill: black; font-style: italic }
+  [data-theme="light"] svg .bold-style { font: 14px arial; fill: black; font-weight: bold }
+  [data-theme="light"] svg .item-style { font: 14px arial; fill: black }
+</style>
+
+<text x="35" y="16" font-family="arial" font-size="12px" font-weight="bold"
+      class="bold-style">List Model</text>
+<text x="215" y="16" font-family="arial" font-size="12px" font-weight="bold"
+      class="bold-style">Table Model</text>
+<text x="435" y="16" font-family="arial" font-size="12px" font-weight="bold"
+      class="bold-style">Tree Model</text>
+
+<path d="m 400.5,255.5 v 25" stroke="black" stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 385.5,30.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="5, 5"
+      class="line-style" />
+
+<text x="425" y="49" font-family="arial" font-size="12px" font-style="italic"
+      class="italic-style">Root item</text>
+<path d="m 400.5,60.5 v 195" stroke="black"
+      class="line-style" />
+<path d="m 420.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 400.5,85.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 435.5,100.5 v 65" stroke="black"
+      class="line-style" />
+<path d="m 455.5,110.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 435.5,125.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 455.5,150.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 435.5,165.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 435.5,165.5 v 25" stroke="black" stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 420.5,200.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 400.5,215.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 420.5,240.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 400.5,255.5 h 20" stroke="black"
+      class="line-style" />
+
+<path d="m 450.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 485.5,110.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 485.5,150.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 450.5,200.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 450.5,240.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 480.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 515.5,110.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 515.5,150.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 480.5,200.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 480.5,240.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+
+<text x="515" y="89" font-family="arial" font-size="12px"
+      class="text-style">row = 0</text>
+<text x="550" y="129" font-family="arial" font-size="12px"
+      class="text-style">row = 0</text>
+<text x="550" y="169" font-family="arial" font-size="12px"
+      class="text-style">row = 1</text>
+<text x="515" y="219" font-family="arial" font-size="12px"
+      class="text-style">row = 1</text>
+<text x="515" y="259" font-family="arial" font-size="12px"
+      class="text-style">row = 2</text>
+
+<path d="m 155.5,30.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="5, 5"
+      class="line-style" />
+<path d="m 10.5,30.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="5, 5"
+      class="line-style" />
+<text x="50" y="49" font-family="arial" font-size="12px" font-style="italic"
+      class="italic-style">Root item</text>
+<path d="m 25.5,60.5 v 105" stroke="black"
+      class="line-style" />
+<path d="M 25.5,85.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 45.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<text x="80" y="89" font-family="arial" font-size="12px"
+      class="text-style">row = 0</text>
+<path d="m 25.5,165.5 v 25" stroke="black" stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 25.5,125.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 45.5,110.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<text x="80" y="129" font-family="arial" font-size="12px"
+      class="text-style">row = 1</text>
+<path d="m 25.5,165.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 45.5,150.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<text x="80" y="169" font-family="arial" font-size="12px"
+      class="text-style">row = 2</text>
+
+<text x="195" y="49" font-family="arial" font-size="12px" font-style="italic"
+      class="italic-style">Root item</text>
+<text x="315" y="89" font-family="arial" font-size="12px"
+      class="text-style">row = 0</text>
+<text x="315" y="119" font-family="arial" font-size="12px"
+      class="text-style">row = 1</text>
+<text x="315" y="149" font-family="arial" font-size="12px"
+      class="text-style">row = 2</text>
+<text x="315" y="179" font-family="arial" font-size="12px"
+      class="text-style">row = 3</text>
+
+<path d="m 170.5,60.5 v 25" stroke="black"
+      class="line-style" />
+<path d="m 170.5,85.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 190.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 220.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 250.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 280.5,70.5 h 30 v 30" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 190.5,100.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 220.5,100.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 250.5,100.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 280.5,100.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 190.5,130.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 220.5,130.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 250.5,130.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 220.5,160.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 190.5,160.5 v 30 h 30" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 250.5,190.5 h 30" stroke="black" stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 280.5,160.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 310.5,130.5 v 30" stroke="black" stroke-dasharray="3, 3"
+      class="line-style" />
+
+<g transform="translate(200, 200)">
+<text x="0" y="0" font-family="arial" font-size="12px"
+      class="text-style" transform="rotate(90)">column = 0</text>
+<text x="0" y="-30" font-family="arial" font-size="12px"
+      class="text-style" transform="rotate(90)">column = 1</text>
+<text x="0" y="-60" font-family="arial" font-size="12px"
+      class="text-style" transform="rotate(90)">column = 2</text>
+<text x="0" y="-90" font-family="arial" font-size="12px"
+      class="text-style" transform="rotate(90)">column = 3</text>
+</g>
+</svg>
diff --git a/src/widgets/doc/images/modelview-overview.svg b/src/widgets/doc/images/modelview-overview.svg
new file mode 100644
index 00000000000..62212027d9e
--- /dev/null
+++ b/src/widgets/doc/images/modelview-overview.svg
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="250"
+   height="240"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+
+<style>
+  svg .line-style { stroke: black; fill: none }
+  svg .fill-style { stroke: none; fill: black }
+  svg .text-style { font: 14px arial; fill: black }
+  svg .italic-style { font: 12px arial; fill: black; font-style: italic }
+  svg .mv-style { font: 14px arial; fill: black }
+  svg .view-style { stroke: black; fill: #ff9f7e }
+  svg .delegate-style { stroke: black; fill: #9fff7e }
+  svg .model-style { stroke: black; fill: #9fbdff }
+
+  svg.dark .line-style { stroke: #f2f2f2; fill: none }
+  svg.dark .fill-style { stroke: none; fill: #f2f2f2 }
+  svg.dark .text-style { font: 14px arial; fill: #f2f2f2 }
+  svg.dark .italic-style { font: 12px arial; fill: #f2f2f2; font-style: italic }
+  svg.dark .mv-style { font: 14px arial; fill: black }
+  svg.dark .view-style { stroke: black; fill: #ff9f7e }
+  svg.dark .delegate-style { stroke: black; fill: #9fff7e }
+  svg.dark .model-style { stroke: black; fill: #9fbdff }
+
+  [data-theme="dark"] svg .line-style { stroke: #f2f2f2; fill: none }
+  [data-theme="dark"] svg .fill-style { stroke: none; fill: #f2f2f2 }
+  [data-theme="dark"] svg .text-style { font: 14px arial; fill: #f2f2f2 }
+  [data-theme="dark"] svg .italic-style { font: 12px arial; fill: #f2f2f2; font-style: italic }
+  [data-theme="dark"] svg .mv-style { font: 14px arial; fill: black }
+  [data-theme="dark"] svg .view-style { stroke: black; fill: #ff9f7e }
+  [data-theme="dark"] svg .delegate-style { stroke: black; fill: #9fff7e }
+  [data-theme="dark"] svg .model-style { stroke: black; fill: #9fbdff }
+
+  [data-theme="light"] svg .line-style { stroke: black; fill: none }
+  [data-theme="light"] svg .fill-style { stroke: none; fill: black }
+  [data-theme="light"] svg .text-style { font: 14px arial; fill: black }
+  [data-theme="light"] svg .italic-style { font: 12px arial; fill: black; font-style: italic }
+  [data-theme="light"] svg .mv-style { font: 14px arial; fill: black }
+  [data-theme="light"] svg .view-style { stroke: black; fill: #ff9f7e }
+  [data-theme="light"] svg .delegate-style { stroke: black; fill: #9fff7e }
+  [data-theme="light"] svg .model-style { stroke: black; fill: #9fbdff }
+</style>
+
+<path d="m 53.5,6.5 h 55 v 40 h -55 z" stroke="black" fill="none"
+      stroke-dasharray="4, 4"
+      class="line-style" />
+<text x="67" y="31" font-family="arial" font-size="14px"
+      class="text-style">Data</text>
+
+<path d="m 81.5,49.5 v 32" stroke="black"
+      class="line-style" />
+<path d="M 81.5,47.5 l 5,10 l -10,0 z" stroke="black" fill="black"
+      class="fill-style" />
+<path d="M 81.5,88.5 l 5,-10 l -10,0 z" stroke="black" fill="black"
+      class="fill-style" />
+
+<path d="m 44.5,88.5 h 75 v 45 h -75 z" stroke="black" fill="#9fbdff"
+      class="model-style" />
+<text x="62" y="116" font-family="arial" font-size="14px"
+      class="mv-style">Model</text>
+
+<path d="M 81.5,133.5 v 45" stroke="black" fill="none"
+      class="line-style" />
+<path d="M 81.5,133.5 l -5,10 l 10,0 z" stroke="black" fill="black"
+      class="fill-style" />
+<path d="M 81.5,180.5 l -5,-10 l 10,0 z" stroke="black" fill="black"
+      class="fill-style" />
+<text x="15" y="161" font-family="arial" font-size="12px" font-style="italic"
+      class="italic-style">Rendering</text>
+
+<circle cx="162.5" cy="178.5" r="10" stroke="black" fill="#9fff7e"
+        class="delegate-style" />
+<text x="177" y="182" font-family="arial" font-size="14px"
+      class="text-style">Delegate</text>
+
+<path d="m 44.5,181.5 h 75 v 45 h -75 z" stroke="black" fill="#ff9f7e"
+      class="view-style" />
+<text x="66" y="209" font-family="arial" font-size="14px"
+      class="mv-style">View</text>
+
+<path d="m 120.5,201.5 c 14.93034,0.75465 25.55119,0.35392 34.2,-12.4"
+      stroke="black" fill="none"
+      class="line-style" />
+<path d="M 119.5,201.5 l 10,-5 l 0,10 z" stroke="black" fill="black"
+      class="fill-style" />
+<path d="M 155.5,188.5 l -2,11 l -8,-8 z" stroke="black" fill="black"
+      class="fill-style" />
+<text x="135" y="217" font-family="arial" font-size="12px" font-style="italic"
+      class="italic-style">Rendering</text>
+
+<path d="m 165.5,165.5 c 13.03176,-44.88642 -12.5498,-61.94517 -45.15643,-62.41431"
+      stroke="black" fill="none"
+      class="line-style" />
+<path d="M 165.5,167.5 l 8,-9 l -11,-3 z" stroke="black" fill="black"
+      class="fill-style" />
+<path d="M 119.5,103.5 l 10,-5 l -0.75,11 z" stroke="black" fill="black"
+      class="fill-style" />
+<text x="168" y="120" font-family="arial" font-size="12px" font-style="italic"
+      class="italic-style">Editing</text>
+</svg>
diff --git a/src/widgets/doc/images/modelview-tablemodel.svg b/src/widgets/doc/images/modelview-tablemodel.svg
new file mode 100644
index 00000000000..ee670b53fa7
--- /dev/null
+++ b/src/widgets/doc/images/modelview-tablemodel.svg
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="240"
+   height="270"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+
+<style>
+  svg .line-style { stroke: black; fill: none }
+  svg .text-style { font: 12px arial; fill: black }
+  svg .italic-style { font: 12px arial; fill: black; font-style: italic }
+  svg .bold-style { font: 14px arial; fill: black; font-weight: bold }
+
+  svg.dark .line-style { stroke: #f2f2f2; fill: none }
+  svg.dark .text-style { font: 12px arial; fill: #f2f2f2 }
+  svg.dark .italic-style { font: 12px arial; fill: #f2f2f2; font-style: italic }
+  svg.dark .bold-style { font: 14px arial; fill: #f2f2f2; font-weight: bold }
+
+  [data-theme="dark"] svg .line-style { stroke: #f2f2f2; fill: none }
+  [data-theme="dark"] svg .text-style { font: 12px arial; fill: #f2f2f2 }
+  [data-theme="dark"] svg .italic-style { font: 12px arial; fill: #f2f2f2; font-style: italic }
+  [data-theme="dark"] svg .bold-style { font: 14px arial; fill: #f2f2f2; font-weight: bold }
+
+  [data-theme="light"] svg .line-style { stroke: black; fill: none }
+  [data-theme="light"] svg .text-style { font: 12px arial; fill: black }
+  [data-theme="light"] svg .italic-style { font: 12px arial; fill: black; font-style: italic }
+  [data-theme="light"] svg .bold-style { font: 14px arial; fill: black; font-weight: bold }
+</style>
+
+<text x="75" y="16" font-family="arial" font-size="14px" font-weight="bold"
+      class="bold-style">Table Model</text>
+
+<path d="m 15.5,30.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="5, 5"
+      class="line-style"/>
+
+<text x="55" y="49" font-family="arial" font-size="12px" font-style="italic"
+      class="italic-style">Root item</text>
+<text x="175" y="89" font-family="arial" font-size="12px"
+      class="text-style">row = 0</text>
+<text x="175" y="119" font-family="arial" font-size="12px"
+      class="text-style">row = 1</text>
+<text x="175" y="149" font-family="arial" font-size="12px"
+      class="text-style">row = 2</text>
+<text x="175" y="179" font-family="arial" font-size="12px"
+      class="text-style">row = 3</text>
+
+<path d="m 30.5,60.5 v 25" stroke="black"
+      class="line-style" />
+<path d="m 30.5,85.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 50.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 80.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 110.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 140.5,70.5 h 30 v 30" stroke="black" fill="none"
+      class="line-style" stroke-dasharray="3, 3" />
+<path d="m 50.5,100.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 80.5,100.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 110.5,100.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 140.5,100.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" stroke-dasharray="3, 3" />
+<path d="m 50.5,130.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 80.5,130.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 110.5,130.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 80.5,160.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" stroke-dasharray="3, 3" />
+<path d="m 50.5,160.5 v 30 h 30" stroke="black" fill="none"
+      class="line-style" stroke-dasharray="3, 3" />
+<path d="m 110.5,190.5 h 30" stroke="black"
+      class="line-style" stroke-dasharray="3, 3" />
+<path d="m 140.5,160.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" stroke-dasharray="3, 3" />
+<path d="m 170.5,130.5 v 30" stroke="black"
+      class="line-style" stroke-dasharray="3, 3" />
+
+<g transform="translate(65, 200)">
+<text x="0" y="0" font-family="arial" font-size="12px"
+      class="text-style" transform="rotate(90)">column = 0</text>
+<text x="0" y="-30" font-family="arial" font-size="12px"
+      class="text-style" transform="rotate(90)">column = 1</text>
+<text x="0" y="-60" font-family="arial" font-size="12px"
+      class="text-style" transform="rotate(90)">column = 2</text>
+<text x="0" y="-90" font-family="arial" font-size="12px"
+      class="text-style" transform="rotate(90)">column = 3</text>
+</g>
+</svg>
diff --git a/src/widgets/doc/images/modelview-treemodel.svg b/src/widgets/doc/images/modelview-treemodel.svg
new file mode 100644
index 00000000000..69babda81af
--- /dev/null
+++ b/src/widgets/doc/images/modelview-treemodel.svg
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="240"
+   height="290"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+
+<style>
+  svg .line-style { stroke: black; fill: none }
+  svg .text-style { font: 12px arial; fill: black }
+  svg .italic-style { font: 12px arial; fill: black; font-style: italic }
+  svg .bold-style { font: 14px arial; fill: black; font-weight: bold }
+
+  svg.dark .line-style { stroke: #f2f2f2; fill: none }
+  svg.dark .text-style { font: 12px arial; fill: #f2f2f2 }
+  svg.dark .italic-style { font: 12px arial; fill: #f2f2f2; font-style: italic }
+  svg.dark .bold-style { font: 14px arial; fill: #f2f2f2; font-weight: bold }
+
+  [data-theme="dark"] svg .line-style { stroke: #f2f2f2; fill: none }
+  [data-theme="dark"] svg .text-style { font: 12px arial; fill: #f2f2f2 }
+  [data-theme="dark"] svg .italic-style { font: 12px arial; fill: #f2f2f2; font-style: italic }
+  [data-theme="dark"] svg .bold-style { font: 14px arial; fill: #f2f2f2; font-weight: bold }
+
+  [data-theme="light"] svg .line-style { stroke: black; fill: none }
+  [data-theme="light"] svg .text-style { font: 12px arial; fill: black }
+  [data-theme="light"] svg .italic-style { font: 12px arial; fill: black; font-style: italic }
+  [data-theme="light"] svg .bold-style { font: 14px arial; fill: black; font-weight: bold }
+</style>
+
+<g transform="translate(10,0)">
+<text x="75" y="16" font-family="arial" font-size="14px" font-weight="bold"
+      class="bold-style">Tree Model</text>
+
+<path d="m 25.5,255.5 v 25" stroke="black" stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 10.5,30.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="5, 5"
+      class="line-style"/>
+
+<text x="50" y="49" font-family="arial" font-size="12px" font-style="italic"
+      class="italic-style">Root item</text>
+<path d="m 25.5,60.5 v 195" stroke="black"
+      class="line-style" />
+<path d="m 45.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 25.5,85.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 60.5,100.5 v 65" stroke="black"
+      class="line-style" />
+<path d="m 80.5,110.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 60,125.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 80.5,150.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 60,165.5 h 20"
+      class="line-style" />
+<path d="m 60,165.5 v 25" stroke="black" stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 45.5,200.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 25.5,215.5 h 20" stroke="black"
+      class="line-style" />
+<path d="m 45.5,240.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 25.5,255.5 h 20" stroke="black"
+      class="line-style" />
+
+<path d="m 75.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 110.5,110.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 110.5,150.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 75.5,200.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 75.5,240.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      class="line-style" />
+<path d="m 105.5,70.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 140.5,110.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 140.5,150.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 105.5,200.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style" />
+<path d="m 105.5,240.5 h 30 v 30 h -30 z" stroke="black" fill="none"
+      stroke-dasharray="3, 3"
+      class="line-style"/>
+
+<text x="140" y="89" font-family="arial" font-size="12px"
+      class="text-style">row = 0</text>
+<text x="175" y="129" font-family="arial" font-size="12px"
+      class="text-style">row = 0</text>
+<text x="175" y="169" font-family="arial" font-size="12px"
+      class="text-style">row = 1</text>
+<text x="140" y="219" font-family="arial" font-size="12px"
+      class="text-style">row = 1</text>
+<text x="140" y="259" font-family="arial" font-size="12px"
+      class="text-style">row = 2</text>
+</g>
+</svg>
diff --git a/src/widgets/doc/src/model-view-programming.qdoc b/src/widgets/doc/src/model-view-programming.qdoc
index 288564b19c3..351c7d06147 100644
--- a/src/widgets/doc/src/model-view-programming.qdoc
+++ b/src/widgets/doc/src/model-view-programming.qdoc
@@ -47,7 +47,7 @@
     customized.
 
     \table
-    \row \li \inlineimage modelview-overview.png
+    \row \li \inlineimage modelview-overview.svg
              {Model, view, and delegate interaction diagram}
     \li \b{The model/view architecture}
 
@@ -276,7 +276,7 @@
     of data in the model, but they are not restricted in the way that they
     present this information to the user.
 
-    \image modelview-models.png {List model, table model, and tree model}
+    \image modelview-models.svg {List model, table model, and tree model}
 
     Models also notify any attached views about changes to data through the
     signals and slots mechanism.
@@ -333,7 +333,7 @@
     a model index.
 
     \table 70%
-    \row \li \inlineimage modelview-tablemodel.png
+    \row \li \inlineimage modelview-tablemodel.svg
               {Structure of the table model using rows and columns}
     \li \b{Rows and columns}
 
@@ -366,7 +366,7 @@
     \snippet code/doc_src_model-view-programming.cpp 3
 
     \table 70%
-    \row \li \inlineimage modelview-treemodel.png
+    \row \li \inlineimage modelview-treemodel.svg
              {Structure of the tree model with parent, row, and column items}
     \li \b{Parents, rows, and columns}
author	David Boddie <david.boddie@qt.io>	2025-11-05 12:25:38 +0100
committer	David Boddie <david.boddie@qt.io>	2025-12-01 22:04:44 +0100
commit	c94ce38e4946e512f9b567c470ba98cbe933dfde (patch)
tree	c066a248aabbdf5a469639b90c9e4673ef176e61 /src
parent	bd3acba9b6308ee974fb1210cff2c0bdb74e8710 (diff)