diff --git a/src/java.desktop/share/classes/java/awt/doc-files/FocusCycle.gif b/src/java.desktop/share/classes/java/awt/doc-files/FocusCycle.gif
deleted file mode 100644
index 4777e217368..00000000000
Binary files a/src/java.desktop/share/classes/java/awt/doc-files/FocusCycle.gif and /dev/null differ
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/FocusCycle.svg b/src/java.desktop/share/classes/java/awt/doc-files/FocusCycle.svg
new file mode 100644
index 00000000000..316ea25e7e6
--- /dev/null
+++ b/src/java.desktop/share/classes/java/awt/doc-files/FocusCycle.svg
@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
+ DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+
+ This code is free software; you can redistribute it and/or modify it
+ under the terms of the GNU General Public License version 2 only, as
+ published by the Free Software Foundation.  Oracle designates this
+ particular file as subject to the "Classpath" exception as provided
+ by Oracle in the LICENSE file that accompanied this code.
+
+ This code is distributed in the hope that it will be useful, but WITHOUT
+ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ version 2 for more details (a copy is included in the LICENSE file that
+ accompanied this code).
+
+ You should have received a copy of the GNU General Public License version
+ 2 along with this work; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+
+ Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
+ or visit www.oracle.com if you need additional information or have any
+ questions.
+-->
+
+<svg version="1.1"
+     width="500" height="340"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style><![CDATA[
+        text {
+            font: 30px 'DejaVu Sans', Verdana, Arial, sans-serif;
+            fill: #d91c1b;
+            text-anchor: middle;
+            dominant-baseline: middle;
+        }
+    ]]></style>
+
+    <path
+            d="M  75,290 L 300,50  L 450,210
+               M 225,130 L 300,210
+               M 150,210 L 225,290"
+            fill="none"
+            stroke="#000000"
+    />
+
+    <circle
+            id="circleA"
+            cx="300"
+            cy="50"
+            r="30"
+            fill="#e6e6ff"
+            stroke="#000000"
+            stroke-width="1"
+    />
+    <text
+            x="300"
+            y="50"
+            class="centered"
+    >A</text>
+
+    <use
+            x="-75"
+            y="80"
+            xlink:href="#circleA"
+    />
+    <text
+            x="225"
+            y="130"
+    >B</text>
+
+    <use
+            x="75"
+            y="80"
+            xlink:href="#circleA"
+    />
+    <text
+            x="375"
+            y="130"
+    >C</text>
+
+    <use
+            x="-150"
+            y="160"
+            xlink:href="#circleA"
+    />
+    <text
+            x="150"
+            y="210"
+    >D</text>
+
+    <use
+            x="0"
+            y="160"
+            xlink:href="#circleA"
+    />
+    <text
+            x="300"
+            y="210"
+    >E</text>
+
+    <use
+            x="150"
+            y="160"
+            xlink:href="#circleA"
+    />
+    <text
+            x="450"
+            y="210"
+    >F</text>
+
+    <use
+            x="-225"
+            y="240"
+            xlink:href="#circleA"
+    />
+    <text
+            x="75"
+            y="290"
+    >G</text>
+
+    <use
+            x="-75"
+            y="240"
+            xlink:href="#circleA"
+    />
+    <text
+            x="225"
+            y="290"
+    >H</text>
+
+    <path
+            d="M 490,210
+               C 490,180 460,125 430,90
+                 400,55  360,10  300,10
+                 240,10  148,123 190,165
+               c  41,42   58,-11 110,-10
+                  52,1    78,62  115,85
+                  37,22   75,17   75,-30
+               z"
+            fill="none"
+            stroke="#0000ff"
+            stroke-width="4"
+    />
+    <path
+            d="M  340,235
+               C  367,188 276,75  225,75
+               c  -51,0   -72,23  -92,50
+                  -20,27  -41,91  -18,120
+                   22,30   70,-15 110,-15
+                   40,0    87,52  115,5
+               z"
+            fill="none"
+            stroke="#00ff00"
+            stroke-width="4"
+    />
+    <path
+            d="m 225,330
+               c  40,0     50,-20   40,-55
+                 -10,-30  -45,-70  -85,-98
+                 -40,-30 -100,35  -125,63
+                 -27,25   -27,90    15,90
+                  42,0     47,-20   80,-20
+                  32,0     34,20    75,20
+               z"
+            fill="none"
+            stroke="#ff0000"
+            stroke-width="4"
+    />
+
+</svg>
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/FocusSpec.html b/src/java.desktop/share/classes/java/awt/doc-files/FocusSpec.html
index 34528a15ae5..94a4a7abdac 100644
--- a/src/java.desktop/share/classes/java/awt/doc-files/FocusSpec.html
+++ b/src/java.desktop/share/classes/java/awt/doc-files/FocusSpec.html
@@ -5,7 +5,7 @@
   <title>The AWT Focus Subsystem</title>
 </head>
 <!--
- Copyright (c) 2001, 2021, Oracle and/or its affiliates. All rights reserved.
+ Copyright (c) 2001, 2022, Oracle and/or its affiliates. All rights reserved.
  DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
 
  This code is free software; you can redistribute it and/or modify it
@@ -180,8 +180,8 @@
       descendants.
 
      <p>
-     Here is an example:<br> <img src="FocusCycle.gif"
-     alt="Three groups as described below: ABCF BDE and DGH. "><br>
+     Here is an example:<br> <img src="FocusCycle.svg"
+     alt="Three groups as described below: ABCF, BDE and DGH.">
 
      <p>Assume the following:
       <ul>
@@ -626,9 +626,15 @@ InternalFrameFocusTraversalPolicy.
         that have or inherit empty InputMaps.
   </ol>
 <p>
-The figure below shows an implicit focus transfer:
-<br><img src="ImplicitFocusTransfer.gif" alt="Implicit focus transfer."><br>
+The figures below show an implicit focus transfer:
+<p id="containerFocus1"><img src="ImplicitFocusTransfer1.svg"
+         alt="Implicit focus transfer for traversable container."><br>
+pic.1
+<p id="containerFocus2"><img src="ImplicitFocusTransfer2.svg"
+         alt="Implicit focus transfer for non-traversable container."><br>
+pic.2
 
+<p>
 Assume the following:
  <ul>
    <li><b>A</b>, <b>B</b> and <b>C</b> are components in some window (a container)
@@ -639,8 +645,8 @@ Assume the following:
        Container in the pic.2.
    <li>In such a case a forward traversal will look as follows:
    <ul>
-     <li> pic.1 : <b>A</b> -> <b>R</b> -> <b>B</b> -> <b>C</b>
-     <li> pic.2 : <b>A</b> -> <b>B</b> -> <b>C</b>
+     <li> pic.1 : <b>A</b> &rarr; <b>R</b> &rarr; <b>B</b> &rarr; <b>C</b>
+     <li> pic.2 : <b>A</b> &rarr; <b>B</b> &rarr; <b>C</b>
    </ul>
  </ul>
 
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer.gif b/src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer.gif
deleted file mode 100644
index 99f0bfb4c63..00000000000
Binary files a/src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer.gif and /dev/null differ
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer1.svg b/src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer1.svg
new file mode 100644
index 00000000000..7b04d00a494
--- /dev/null
+++ b/src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer1.svg
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
+ DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+
+ This code is free software; you can redistribute it and/or modify it
+ under the terms of the GNU General Public License version 2 only, as
+ published by the Free Software Foundation.  Oracle designates this
+ particular file as subject to the "Classpath" exception as provided
+ by Oracle in the LICENSE file that accompanied this code.
+
+ This code is distributed in the hope that it will be useful, but WITHOUT
+ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ version 2 for more details (a copy is included in the LICENSE file that
+ accompanied this code).
+
+ You should have received a copy of the GNU General Public License version
+ 2 along with this work; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+
+ Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
+ or visit www.oracle.com if you need additional information or have any
+ questions.
+-->
+
+<svg version="1.1"
+     width="370" height="145"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style><![CDATA[
+        text {
+            font: 30px 'DejaVu Sans', Verdana, Arial, sans-serif;
+            fill: #d91c1b;
+        }
+        text.centered {
+            text-anchor: middle;
+            dominant-baseline: middle;
+        }
+    ]]></style>
+    <circle
+            id="circleA"
+            cx="40"
+            cy="90"
+            r="30"
+            fill="#e6e6ff"
+            stroke="#000000"
+            stroke-width="1"
+    />
+    <text
+            x="40"
+            y="90"
+            class="centered"
+    >A</text>
+    <use
+            x="130"
+            y="0"
+            xlink:href="#circleA"
+    />
+    <text
+            x="170"
+            y="90"
+            class="centered"
+    >B</text>
+    <use
+            x="260"
+            y="0"
+            xlink:href="#circleA"
+    />
+    <text
+            x="300"
+            y="90"
+            class="centered"
+    >C</text>
+    <rect
+            x="105"
+            y="40"
+            width="260"
+            height="100"
+            fill="none"
+            stroke="#d91c1b"
+            stroke-width="5"
+    />
+    <text
+            x="101"
+            y="30"
+            style="font-weight: bold"
+    >R</text>
+    <defs>
+        <marker
+                id="arrow"
+                viewBox="0 0 10 10"
+                refX="10"
+                refY="5"
+                markerWidth="10"
+                markerHeight="10"
+                orient="auto">
+            <path
+                d="M 0 0 L 10 5 L 0 10"
+                fill="none"
+                stroke="#000000"
+            />
+        </marker>
+    </defs>
+    <path d="M 40 55 Q 40 20 100 20"
+          stroke="#000000"
+          fill="none"
+          stroke-dasharray="3"
+          stroke-width="1"
+          marker-end="url(#arrow)"
+    />
+    <path d="M 125 20 Q 170 20 170 55"
+          stroke="#000000"
+          fill="none"
+          stroke-dasharray="3"
+          stroke-width="1"
+          marker-end="url(#arrow)"
+    />
+</svg>
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer2.svg b/src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer2.svg
new file mode 100644
index 00000000000..34fdbb89b65
--- /dev/null
+++ b/src/java.desktop/share/classes/java/awt/doc-files/ImplicitFocusTransfer2.svg
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
+ DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+
+ This code is free software; you can redistribute it and/or modify it
+ under the terms of the GNU General Public License version 2 only, as
+ published by the Free Software Foundation.  Oracle designates this
+ particular file as subject to the "Classpath" exception as provided
+ by Oracle in the LICENSE file that accompanied this code.
+
+ This code is distributed in the hope that it will be useful, but WITHOUT
+ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ version 2 for more details (a copy is included in the LICENSE file that
+ accompanied this code).
+
+ You should have received a copy of the GNU General Public License version
+ 2 along with this work; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+
+ Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
+ or visit www.oracle.com if you need additional information or have any
+ questions.
+-->
+
+<svg version="1.1"
+     width="370" height="145"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+    <style><![CDATA[
+        text {
+            font: 30px 'DejaVu Sans', Verdana, Arial, sans-serif;
+            fill: #d91c1b;
+        }
+        text.centered {
+            text-anchor: middle;
+            dominant-baseline: middle;
+        }
+    ]]></style>
+    <circle
+            id="circleA"
+            cx="40"
+            cy="90"
+            r="30"
+            fill="#e6e6ff"
+            stroke="#000000"
+            stroke-width="1"
+    />
+    <text
+            x="40"
+            y="90"
+            class="centered"
+    >A</text>
+    <use
+            x="130"
+            y="0"
+            xlink:href="#circleA"
+    />
+    <text
+            x="170"
+            y="90"
+            class="centered"
+    >B</text>
+    <use
+            x="260"
+            y="0"
+            xlink:href="#circleA"
+    />
+    <text
+            x="300"
+            y="90"
+            class="centered"
+    >C</text>
+    <rect
+            x="105"
+            y="40"
+            width="260"
+            height="100"
+            fill="none"
+            stroke="#d91c1b"
+            stroke-width="5"
+            stroke-dasharray="25 10"
+    />
+    <text
+            x="101"
+            y="30"
+            style="font-weight: bold"
+    >R</text>
+    <defs>
+        <marker
+                id="arrow"
+                viewBox="0 0 10 10"
+                refX="10"
+                refY="5"
+                markerWidth="10"
+                markerHeight="10"
+                orient="auto">
+            <path
+                d="M 0 0 L 10 5 L 0 10"
+                fill="none"
+                stroke="#000000"
+            />
+        </marker>
+    </defs>
+    <path d="M 40 55 Q 105 40 170 55"
+          stroke="#000000"
+          fill="none"
+          stroke-dasharray="3"
+          stroke-width="1"
+          marker-end="url(#arrow)"
+    />
+</svg>
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/Modality.html b/src/java.desktop/share/classes/java/awt/doc-files/Modality.html
index e20d9175fb7..88f9911cbc3 100644
--- a/src/java.desktop/share/classes/java/awt/doc-files/Modality.html
+++ b/src/java.desktop/share/classes/java/awt/doc-files/Modality.html
@@ -387,7 +387,7 @@
             same document
     </ol>
     <p style="float: left; margin-left: 1em">
-        <img src="modal-example1.gif" alt="Example 1">
+        <img src="modal-example1.svg" alt="Example 1">
     </p>
 
     <h3 style="clear: left">Example 2</h3>
@@ -400,7 +400,7 @@
             same document
     </ol>
     <p style="float: left; margin-left: 1em">
-        <img src="modal-example2.gif" alt="Example 2">
+        <img src="modal-example2.svg" alt="Example 2">
     </p>
 
     <h3 style="clear: left">Example 3</h3>
@@ -418,7 +418,7 @@
             D<sub>ii</sub> blocks D<sub>i</sub>
     </ol>
     <p style="float: left; margin-left: 1em">
-        <img src="modal-example3.gif" alt="Example 3">
+        <img src="modal-example3.svg" alt="Example 3">
     </p>
 
     <h3 style="clear: left">Example 4</h3>
@@ -436,7 +436,7 @@
         <li>D<sub>i</sub> remains unblocked
     </ol>
     <p style="float: left; margin-left: 1em">
-        <img src="modal-example4.gif" alt="Example 4">
+        <img src="modal-example4.svg" alt="Example 4">
     </p>
     <br style="clear:both;">
 </main>
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/modal-example1.gif b/src/java.desktop/share/classes/java/awt/doc-files/modal-example1.gif
deleted file mode 100644
index e6dfd56c823..00000000000
Binary files a/src/java.desktop/share/classes/java/awt/doc-files/modal-example1.gif and /dev/null differ
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/modal-example1.svg b/src/java.desktop/share/classes/java/awt/doc-files/modal-example1.svg
new file mode 100644
index 00000000000..86856788b32
--- /dev/null
+++ b/src/java.desktop/share/classes/java/awt/doc-files/modal-example1.svg
@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
+ DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+
+ This code is free software; you can redistribute it and/or modify it
+ under the terms of the GNU General Public License version 2 only, as
+ published by the Free Software Foundation.  Oracle designates this
+ particular file as subject to the "Classpath" exception as provided
+ by Oracle in the LICENSE file that accompanied this code.
+
+ This code is distributed in the hope that it will be useful, but WITHOUT
+ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ version 2 for more details (a copy is included in the LICENSE file that
+ accompanied this code).
+
+ You should have received a copy of the GNU General Public License version
+ 2 along with this work; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+
+ Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
+ or visit www.oracle.com if you need additional information or have any
+ questions.
+-->
+
+<svg version="1.1"
+     width="140" height="120"
+     xmlns="http://www.w3.org/2000/svg"
+>
+    <style><![CDATA[
+        text {
+            font: 15px 'DejaVu Serif', serif;
+            fill: #000;
+        }
+        text.centered {
+            text-anchor: middle;
+            dominant-baseline: middle;
+        }
+        tspan {
+            font-style: italic;
+            font-size: smaller;
+        }
+        ellipse, path {
+            stroke: #000;
+            stroke-width: 1;
+        }
+        path {
+            fill: none;
+        }
+        path.dashed {
+            stroke-dasharray: 2;
+        }
+    ]]></style>
+    <path
+            d="M 65 25 L 30  75
+               M 65 25 L 100 75"
+    />
+
+    <ellipse
+            cx="65" cy="25"
+            rx="18" ry="14"
+            fill="#990066"
+    />
+    <text
+            x="65"
+            y="25"
+            style="fill: #fff"
+            class="centered"
+    >F</text>
+    <text
+            x="86"
+            y="36"
+    >1</text>
+
+    <ellipse
+            cx="30" cy="75"
+            rx="18" ry="14"
+            fill="#00ccff"
+    />
+    <text
+            x="30"
+            y="75"
+            class="centered"
+    >D<tspan>i</tspan></text>
+    <text
+            x="51"
+            y="86"
+    >2</text>
+
+    <ellipse
+            cx="100" cy="75"
+            rx="18" ry="14"
+            fill="#00ccff"
+    />
+    <text
+            x="100"
+            y="75"
+            class="centered"
+    >D<tspan>ii</tspan></text>
+    <text
+            x="121"
+            y="86"
+    >3</text>
+
+    <path
+            d="M 65,5
+               C 45,5 3,30 3,75
+               S 50,94 65,94
+               S 140,120 135,75
+               S 85,5 65,5"
+            class="dashed"
+    />
+</svg>
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/modal-example2.gif b/src/java.desktop/share/classes/java/awt/doc-files/modal-example2.gif
deleted file mode 100644
index 65a0d25005a..00000000000
Binary files a/src/java.desktop/share/classes/java/awt/doc-files/modal-example2.gif and /dev/null differ
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/modal-example2.svg b/src/java.desktop/share/classes/java/awt/doc-files/modal-example2.svg
new file mode 100644
index 00000000000..d1ee40546d1
--- /dev/null
+++ b/src/java.desktop/share/classes/java/awt/doc-files/modal-example2.svg
@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
+ DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+
+ This code is free software; you can redistribute it and/or modify it
+ under the terms of the GNU General Public License version 2 only, as
+ published by the Free Software Foundation.  Oracle designates this
+ particular file as subject to the "Classpath" exception as provided
+ by Oracle in the LICENSE file that accompanied this code.
+
+ This code is distributed in the hope that it will be useful, but WITHOUT
+ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ version 2 for more details (a copy is included in the LICENSE file that
+ accompanied this code).
+
+ You should have received a copy of the GNU General Public License version
+ 2 along with this work; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+
+ Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
+ or visit www.oracle.com if you need additional information or have any
+ questions.
+-->
+
+<svg version="1.1"
+     width="100" height="155"
+     xmlns="http://www.w3.org/2000/svg"
+>
+    <style><![CDATA[
+        text {
+            font-size: 15px;
+            font-family: 'DejaVu Serif', serif;
+            fill: #000;
+        }
+        text.centered {
+            text-anchor: middle;
+            dominant-baseline: middle;
+        }
+        tspan {
+            font-style: italic;
+            font-size: smaller;
+        }
+        ellipse, path {
+            stroke: #000;
+            stroke-width: 1;
+        }
+        path {
+            fill: none;
+        }
+        path.dashed {
+            stroke-dasharray: 2;
+        }
+    ]]></style>
+
+    <path
+            d="M 50 25 L 50  75 L 50 125"
+    />
+
+    <ellipse
+            cx="50" cy="25"
+            rx="18" ry="14"
+            fill="#990066"
+    />
+    <text
+            x="50"
+            y="25"
+            style="fill: #fff"
+            class="centered"
+    >F</text>
+    <text
+            x="29"
+            y="36"
+            text-anchor="end"
+    >1</text>
+
+    <ellipse
+            cx="50" cy="75"
+            rx="18" ry="14"
+            fill="#00ccff"
+    />
+    <text
+            x="50"
+            y="75"
+            class="centered"
+    >D<tspan>i</tspan></text>
+    <text
+            x="29"
+            y="86"
+            text-anchor="end"
+    >2</text>
+    <text
+            x="67"
+            y="64"
+    >4</text>
+
+    <ellipse
+            cx="50" cy="125"
+            rx="18" ry="14"
+            fill="#00ccff"
+    />
+    <text
+            x="50"
+            y="125"
+            class="centered"
+    >D<tspan>ii</tspan></text>
+    <text
+            x="67"
+            y="114"
+    >3</text>
+
+    <path
+            d="M 50,5
+               C 35,5 2,20 2,75
+               S 30,150 50,150
+               S 98,135 98,75
+               S 65,5 50,5"
+            class="dashed"
+    />
+</svg>
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/modal-example3.gif b/src/java.desktop/share/classes/java/awt/doc-files/modal-example3.gif
deleted file mode 100644
index f073bd7c7d6..00000000000
Binary files a/src/java.desktop/share/classes/java/awt/doc-files/modal-example3.gif and /dev/null differ
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/modal-example3.svg b/src/java.desktop/share/classes/java/awt/doc-files/modal-example3.svg
new file mode 100644
index 00000000000..82d63465bc0
--- /dev/null
+++ b/src/java.desktop/share/classes/java/awt/doc-files/modal-example3.svg
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
+ DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+
+ This code is free software; you can redistribute it and/or modify it
+ under the terms of the GNU General Public License version 2 only, as
+ published by the Free Software Foundation.  Oracle designates this
+ particular file as subject to the "Classpath" exception as provided
+ by Oracle in the LICENSE file that accompanied this code.
+
+ This code is distributed in the hope that it will be useful, but WITHOUT
+ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ version 2 for more details (a copy is included in the LICENSE file that
+ accompanied this code).
+
+ You should have received a copy of the GNU General Public License version
+ 2 along with this work; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+
+ Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
+ or visit www.oracle.com if you need additional information or have any
+ questions.
+-->
+
+<svg version="1.1"
+     width="140" height="170"
+     xmlns="http://www.w3.org/2000/svg"
+>
+    <style><![CDATA[
+        text {
+            font: 15px 'DejaVu Serif', serif;
+            fill: #000;
+        }
+        text.centered {
+            text-anchor: middle;
+            dominant-baseline: middle;
+        }
+        tspan {
+            font-style: italic;
+            font-size: smaller;
+        }
+        ellipse, path {
+            stroke: #000;
+            stroke-width: 1;
+        }
+        path {
+            fill: none;
+        }
+        path.dashed {
+            stroke-dasharray: 1 3 1 3 7 3;
+        }
+    ]]></style>
+
+    <path
+            d="M 75 25 L 40 115
+               M 75 25 L 90  85 L 105 145"
+    />
+
+    <ellipse
+            cx="75" cy="25"
+            rx="18" ry="14"
+            fill="#990066"
+    />
+    <text
+            x="75"
+            y="25"
+            style="fill: #fff"
+            class="centered"
+    >F</text>
+    <text
+            x="54"
+            y="36"
+            text-anchor="end"
+    >1</text>
+
+    <ellipse
+            cx="90" cy="85"
+            rx="18" ry="14"
+            fill="#ff5522"
+    />
+    <text
+            x="90"
+            y="85"
+            class="centered"
+    >D<tspan>i</tspan></text>
+    <text
+            x="107"
+            y="74"
+    >2</text>
+    <text
+            x="70"
+            y="85"
+            text-anchor="end"
+            dominant-baseline="middle"
+    >5</text>
+
+    <ellipse
+            cx="105" cy="145"
+            rx="18" ry="14"
+            fill="#00ccff"
+    />
+    <text
+            x="105"
+            y="145"
+            class="centered"
+    >D<tspan>ii</tspan></text>
+    <text
+            x="85"
+            y="160"
+            text-anchor="end"
+    >3</text>
+
+    <ellipse
+            cx="40" cy="115"
+            rx="18" ry="14"
+            fill="#ff9999"
+    />
+    <text
+            x="40"
+            y="115"
+            class="centered"
+    >D<tspan>iii</tspan></text>
+    <text
+            x="20"
+            y="110"
+            text-anchor="end"
+    >4</text>
+
+    <path
+            d="M 75,5
+               C  40,5 35,25 35,50
+               S   5,85    5,115
+               S  40,165  75,165
+               S 130,175 135,155
+               S 125,120 125,105
+               S 140,75  130,55
+               S 130,5    75,5"
+            class="dashed"
+    />
+</svg>
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/modal-example4.gif b/src/java.desktop/share/classes/java/awt/doc-files/modal-example4.gif
deleted file mode 100644
index fd5c278cd5d..00000000000
Binary files a/src/java.desktop/share/classes/java/awt/doc-files/modal-example4.gif and /dev/null differ
diff --git a/src/java.desktop/share/classes/java/awt/doc-files/modal-example4.svg b/src/java.desktop/share/classes/java/awt/doc-files/modal-example4.svg
new file mode 100644
index 00000000000..6b2ddc9a30a
--- /dev/null
+++ b/src/java.desktop/share/classes/java/awt/doc-files/modal-example4.svg
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ Copyright (c) 2022, Oracle and/or its affiliates. All rights reserved.
+ DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+
+ This code is free software; you can redistribute it and/or modify it
+ under the terms of the GNU General Public License version 2 only, as
+ published by the Free Software Foundation.  Oracle designates this
+ particular file as subject to the "Classpath" exception as provided
+ by Oracle in the LICENSE file that accompanied this code.
+
+ This code is distributed in the hope that it will be useful, but WITHOUT
+ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ version 2 for more details (a copy is included in the LICENSE file that
+ accompanied this code).
+
+ You should have received a copy of the GNU General Public License version
+ 2 along with this work; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+
+ Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
+ or visit www.oracle.com if you need additional information or have any
+ questions.
+-->
+
+<svg version="1.1"
+     width="140" height="170"
+     xmlns="http://www.w3.org/2000/svg"
+>
+    <style><![CDATA[
+        text {
+            font: 15px 'DejaVu Serif', serif;
+            fill: #000;
+        }
+        text.centered {
+            text-anchor: middle;
+            dominant-baseline: middle;
+        }
+        tspan {
+            font-style: italic;
+            font-size: smaller;
+        }
+        ellipse, path {
+            stroke: #000;
+            stroke-width: 1;
+        }
+        path {
+            fill: none;
+        }
+        path.dashed {
+            stroke-dasharray: 1 3 1 3 7 3;
+        }
+    ]]></style>
+
+    <path
+            d="M 75 25 L  40 115
+               M 75 25 L 100  85
+               M 75 25 L  75 145"
+    />
+
+    <ellipse
+            cx="75" cy="25"
+            rx="18" ry="14"
+            fill="#990066"
+    />
+    <text
+            x="75"
+            y="25"
+            style="fill: #fff"
+            class="centered"
+    >F</text>
+    <text
+            x="54"
+            y="36"
+            text-anchor="end"
+    >1</text>
+
+    <ellipse
+            cx="40" cy="115"
+            rx="18" ry="14"
+            fill="#ff5522"
+    />
+    <text
+            x="40"
+            y="115"
+            class="centered"
+    >D<tspan>i</tspan></text>
+    <text
+            x="20"
+            y="110"
+            text-anchor="end"
+    >2</text>
+
+    <ellipse
+            cx="100" cy="85"
+            rx="18" ry="14"
+            fill="#00ccff"
+    />
+    <text
+            x="100"
+            y="85"
+            class="centered"
+    >D<tspan>ii</tspan></text>
+    <text
+            x="117"
+            y="74"
+    >3</text>
+
+    <ellipse
+            cx="75" cy="145"
+            rx="18" ry="14"
+            fill="#ff9999"
+    />
+    <text
+            x="75"
+            y="145"
+            class="centered"
+    >D<tspan>iii</tspan></text>
+    <text
+            x="95"
+            y="155"
+    >4</text>
+    <text
+            x="55"
+            y="155"
+            text-anchor="end"
+    >5</text>
+
+    <path
+            d="M 75,5
+               C  40,5 35,25 35,50
+               S   5,85    5,115
+               S  40,165  75,165
+               S 130,175 135,155
+               S 125,120 125,105
+               S 140,75  130,55
+               S 130,5    75,5"
+            class="dashed"
+    />
+</svg>