From 5df6e558c5e408b3bbe0ecd2c4f0f8d3a852beb4 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Oct 2024 19:15:51 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=82=92?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/http/overview/fetching-a-page.svg  | 899 +-----------------
 files/ja/web/http/overview/http-layers.svg    | 877 +----------------
 2 files changed, 9 insertions(+), 1767 deletions(-)

diff --git a/files/ja/web/http/overview/fetching-a-page.svg b/files/ja/web/http/overview/fetching-a-page.svg
index 316a9eded9bdb7..01424fa44f2dc6 100644
--- a/files/ja/web/http/overview/fetching-a-page.svg
+++ b/files/ja/web/http/overview/fetching-a-page.svg
@@ -1,893 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="710"
-   height="470"
-   style="background-color:#fff"
-   viewBox="-0.5 -0.5 710 470"
-   version="1.1"
-   id="svg45"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:xhtml="http://www.w3.org/1999/xhtml">
-  <defs
-     id="defs45" />
-  <rect
-     width="100%"
-     height="100%"
-     fill="#FFF"
-     id="rect1" />
-  <rect
-     width="710"
-     height="470"
-     fill="#FFF"
-     pointer-events="all"
-     rx="14.1"
-     ry="14.1"
-     id="rect2" />
-  <rect
-     width="320"
-     height="420"
-     x="20"
-     y="30"
-     fill="#FFF"
-     stroke="#000"
-     pointer-events="all"
-     rx="9.6"
-     ry="9.6"
-     id="rect3" />
-  <rect
-     width="140"
-     height="70"
-     x="190"
-     y="90"
-     fill="#fff2cc"
-     stroke="#d6b656"
-     pointer-events="all"
-     rx="2.1"
-     ry="2.1"
-     id="rect4" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch4">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:125px;margin-left:193px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            画像
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="260"
-       y="130"
-       font-family="Monospace"
-       font-size="16px"
-       text-anchor="middle"
-       id="text4">画像</text>
-  </switch>
-  <rect
-     width="140"
-     height="80"
-     x="40"
-     y="310"
-     fill="#f8cecc"
-     stroke="#b85450"
-     pointer-events="all"
-     rx="2.4"
-     ry="2.4"
-     id="rect5" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch5">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:350px;margin-left:43px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            動画
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="110"
-       y="355"
-       font-family="Monospace"
-       font-size="16px"
-       text-anchor="middle"
-       id="text5">動画</text>
-  </switch>
-  <rect
-     width="140"
-     height="80"
-     x="190"
-     y="310"
-     fill="#ffe6cc"
-     stroke="#d79b00"
-     pointer-events="all"
-     rx="2.4"
-     ry="2.4"
-     id="rect6" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch6">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:350px;margin-left:193px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            広告
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="260"
-       y="355"
-       font-family="Monospace"
-       font-size="16px"
-       text-anchor="middle"
-       id="text6">広告</text>
-  </switch>
-  <rect
-     width="70"
-     height="10"
-     x="40"
-     y="410"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect7" />
-  <rect
-     width="200"
-     height="10"
-     x="120"
-     y="410"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect8" />
-  <rect
-     width="140"
-     height="10"
-     x="40"
-     y="90"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect9" />
-  <rect
-     width="130"
-     height="10"
-     x="40"
-     y="110"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect10" />
-  <rect
-     width="40"
-     height="10"
-     x="40"
-     y="130"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect11" />
-  <rect
-     width="90"
-     height="10"
-     x="90"
-     y="130"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect12" />
-  <rect
-     width="90"
-     height="10"
-     x="40"
-     y="182"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect13" />
-  <rect
-     width="90"
-     height="10"
-     x="40"
-     y="222"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect14" />
-  <rect
-     width="90"
-     height="10"
-     x="40"
-     y="262"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect15" />
-  <rect
-     width="90"
-     height="10"
-     x="135"
-     y="262"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect16" />
-  <rect
-     width="90"
-     height="10"
-     x="40"
-     y="282"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect17" />
-  <rect
-     width="90"
-     height="10"
-     x="140"
-     y="282"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect18" />
-  <rect
-     width="120"
-     height="10"
-     x="135"
-     y="222"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect19" />
-  <rect
-     width="120"
-     height="10"
-     x="40"
-     y="242"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect20" />
-  <rect
-     width="120"
-     height="10"
-     x="135"
-     y="182"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect21" />
-  <rect
-     width="120"
-     height="10"
-     x="40"
-     y="202"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect22" />
-  <rect
-     width="80"
-     height="10"
-     x="230"
-     y="262"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect23" />
-  <rect
-     width="120"
-     height="10"
-     x="170"
-     y="242"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect24" />
-  <rect
-     width="40"
-     height="10"
-     x="170"
-     y="202"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect25" />
-  <rect
-     width="40"
-     height="10"
-     x="240"
-     y="282"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect26" />
-  <rect
-     width="40"
-     height="10"
-     x="270"
-     y="222"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect27" />
-  <rect
-     width="90"
-     height="10"
-     x="220"
-     y="202"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect28" />
-  <rect
-     width="50"
-     height="10"
-     x="40"
-     y="430"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect29" />
-  <rect
-     width="40"
-     height="10"
-     x="120"
-     y="430"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect30" />
-  <rect
-     width="40"
-     height="10"
-     x="200"
-     y="430"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect31" />
-  <rect
-     width="50"
-     height="10"
-     x="280"
-     y="430"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect32" />
-  <rect
-     width="290"
-     height="10"
-     x="40"
-     y="60"
-     fill="#adadad"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect33" />
-  <rect
-     width="130"
-     height="10"
-     x="40"
-     y="150"
-     fill="#ccc"
-     pointer-events="all"
-     rx="3.6"
-     ry="3.6"
-     id="rect34" />
-  <rect
-     width="140"
-     height="24"
-     x="100"
-     fill="none"
-     pointer-events="all"
-     rx=".72"
-     ry=".72"
-     id="rect35" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch35">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:12px;margin-left:103px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            <xhtml:div>
-              ウェブ文書
-            </xhtml:div>
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="170"
-       y="17"
-       font-family="Monospace"
-       font-size="16px"
-       text-anchor="middle"
-       id="text35">ウェブ文書</text>
-  </switch>
-  <g
-     stroke="#000"
-     id="g35">
-    <path
-       fill="none"
-       stroke-miterlimit="10"
-       d="M333 125h207V85h10"
-       pointer-events="stroke"
-       id="path35" />
-    <circle
-       cx="330"
-       cy="125"
-       r="3"
-       pointer-events="all"
-       id="circle35" />
-  </g>
-  <g
-     stroke="#000"
-     id="g36">
-    <path
-       fill="none"
-       stroke-miterlimit="10"
-       d="m283 85.01 132.5.49L550 85"
-       pointer-events="stroke"
-       id="path36" />
-    <circle
-       cx="280"
-       cy="85"
-       r="3"
-       pointer-events="all"
-       id="circle36" />
-  </g>
-  <g
-     stroke="#000"
-     id="g37">
-    <path
-       fill="none"
-       stroke-miterlimit="10"
-       d="M333 350h197v35h20"
-       pointer-events="stroke"
-       id="path37" />
-    <circle
-       cx="330"
-       cy="350"
-       r="3"
-       pointer-events="all"
-       id="circle37" />
-  </g>
-  <g
-     stroke="#000"
-     id="g38">
-    <path
-       fill="none"
-       stroke-miterlimit="10"
-       d="M180 307v-10h370"
-       pointer-events="stroke"
-       id="path38" />
-    <circle
-       cx="180"
-       cy="310"
-       r="3"
-       pointer-events="all"
-       id="circle38" />
-  </g>
-  <rect
-     width="150"
-     height="24"
-     x="370"
-     y="20"
-     fill="none"
-     pointer-events="all"
-     rx=".72"
-     ry=".72"
-     id="rect38" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch38">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:32px;margin-left:373px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            <xhtml:div>
-              GET index.html
-              <xhtml:br />
-</xhtml:div>
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="445"
-       y="37"
-       font-family="Monospace"
-       font-size="16"
-       text-anchor="middle"
-       id="text38">GET index.html
-    </text>
-  </switch>
-  <rect
-     width="150"
-     height="24"
-     x="370"
-     y="60"
-     fill="none"
-     pointer-events="all"
-     rx=".72"
-     ry=".72"
-     id="rect39" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch39">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:72px;margin-left:373px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            <xhtml:div>
-              GET styles.css
-              <xhtml:br />
-</xhtml:div>
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="445"
-       y="77"
-       font-family="Monospace"
-       font-size="16"
-       text-anchor="middle"
-       id="text39">GET styles.css
-    </text>
-  </switch>
-  <rect
-     width="150"
-     height="24"
-     x="370"
-     y="103"
-     fill="none"
-     pointer-events="all"
-     rx=".72"
-     ry=".72"
-     id="rect40" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch40">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:115px;margin-left:373px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            <xhtml:div>
-              GET header.png
-              <xhtml:br />
-</xhtml:div>
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="445"
-       y="120"
-       font-family="Monospace"
-       font-size="16"
-       text-anchor="middle"
-       id="text40">GET header.png
-    </text>
-  </switch>
-  <rect
-     width="150"
-     height="24"
-     x="370"
-     y="268"
-     fill="none"
-     pointer-events="all"
-     rx=".72"
-     ry=".72"
-     id="rect41" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch41">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:280px;margin-left:373px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            <xhtml:div>
-              GET video.mp4
-              <xhtml:br />
-</xhtml:div>
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="445"
-       y="285"
-       font-family="Monospace"
-       font-size="16"
-       text-anchor="middle"
-       id="text41">GET video.mp4
-    </text>
-  </switch>
-  <rect
-     width="150"
-     height="24"
-     x="370"
-     y="326"
-     fill="none"
-     pointer-events="all"
-     rx=".72"
-     ry=".72"
-     id="rect42" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch42">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:338px;margin-left:373px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            <xhtml:div>
-              GET advert.jpg
-              <xhtml:br />
-</xhtml:div>
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="445"
-       y="343"
-       font-family="Monospace"
-       font-size="16"
-       text-anchor="middle"
-       id="text42">GET advert.jpg
-    </text>
-  </switch>
-  <rect
-     width="140"
-     height="70"
-     x="550"
-     y="50"
-     fill="#bac8d3"
-     stroke="#23445d"
-     pointer-events="all"
-     rx="2.1"
-     ry="2.1"
-     id="rect43" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch43">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:85px;margin-left:553px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            ウェブサーバー
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="620"
-       y="90"
-       font-family="Monospace"
-       font-size="16px"
-       text-anchor="middle"
-       id="text43">ウェブサーバー</text>
-  </switch>
-  <g
-     stroke="#000"
-     id="g43">
-    <path
-       fill="none"
-       stroke-miterlimit="10"
-       d="M342.84 50.02 540 50v35h10"
-       pointer-events="stroke"
-       id="path43" />
-    <circle
-       cx="339.84"
-       cy="50.02"
-       r="3"
-       pointer-events="all"
-       id="circle43" />
-  </g>
-  <rect
-     width="140"
-     height="70"
-     x="550"
-     y="262"
-     fill="#d0cee2"
-     stroke="#56517e"
-     pointer-events="all"
-     rx="2.1"
-     ry="2.1"
-     id="rect44" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch44">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:297px;margin-left:553px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            動画サーバー
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="620"
-       y="302"
-       font-family="Monospace"
-       font-size="16px"
-       text-anchor="middle"
-       id="text44">動画サーバー</text>
-  </switch>
-  <rect
-     width="140"
-     height="70"
-     x="550"
-     y="350"
-     fill="#b1ddf0"
-     stroke="#10739e"
-     pointer-events="all"
-     rx="2.1"
-     ry="2.1"
-     id="rect45" />
-  <switch
-     transform="translate(-.5 -.5)"
-     id="switch45">
-    <foreignObject
-       width="100%"
-       height="100%"
-       pointer-events="none"
-       requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-       style="overflow:visible;text-align:left">
-      <xhtml:div
-         style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:385px;margin-left:553px">
-        <xhtml:div
-           data-drawio-colors="color: rgb(0, 0, 0);"
-           style="box-sizing:border-box;font-size:0;text-align:center">
-          <xhtml:div
-             style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-            広告サーバー
-          </xhtml:div>
-        </xhtml:div>
-      </xhtml:div>
-    </foreignObject>
-    <text
-       x="620"
-       y="390"
-       font-family="Monospace"
-       font-size="16px"
-       text-anchor="middle"
-       id="text45">広告サーバー</text>
-  </switch>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="710" height="470" style="background-color:#fff" viewBox="-0.5 -0.5 710 470"><rect width="100%" height="100%" fill="#FFF"/><rect width="710" height="470" fill="#FFF" pointer-events="all" rx="14.1" ry="14.1"/><rect width="320" height="420" x="20" y="30" fill="#FFF" stroke="#000" pointer-events="all" rx="9.6" ry="9.6"/><rect width="140" height="70" x="190" y="90" fill="#fff2cc" stroke="#d6b656" pointer-events="all" rx="2.1" ry="2.1"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:125px;margin-left:193px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">画像</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="260" y="130" font-family="Monospace" font-size="16" text-anchor="middle">画像</text></switch><rect width="140" height="80" x="40" y="310" fill="#f8cecc" stroke="#b85450" pointer-events="all" rx="2.4" ry="2.4"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:350px;margin-left:43px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">動画</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="110" y="355" font-family="Monospace" font-size="16" text-anchor="middle">動画</text></switch><rect width="140" height="80" x="190" y="310" fill="#ffe6cc" stroke="#d79b00" pointer-events="all" rx="2.4" ry="2.4"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:350px;margin-left:193px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">広告</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="260" y="355" font-family="Monospace" font-size="16" text-anchor="middle">広告</text></switch><rect width="70" height="10" x="40" y="410" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="200" height="10" x="120" y="410" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="140" height="10" x="40" y="90" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="130" height="10" x="40" y="110" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="40" height="10" x="40" y="130" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="90" height="10" x="90" y="130" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="90" height="10" x="40" y="182" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="90" height="10" x="40" y="222" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="90" height="10" x="40" y="262" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="90" height="10" x="135" y="262" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="90" height="10" x="40" y="282" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="90" height="10" x="140" y="282" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="120" height="10" x="135" y="222" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="120" height="10" x="40" y="242" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="120" height="10" x="135" y="182" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="120" height="10" x="40" y="202" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="80" height="10" x="230" y="262" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="120" height="10" x="170" y="242" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="40" height="10" x="170" y="202" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="40" height="10" x="240" y="282" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="40" height="10" x="270" y="222" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="90" height="10" x="220" y="202" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="50" height="10" x="40" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="40" height="10" x="120" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="40" height="10" x="200" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="50" height="10" x="280" y="430" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="290" height="10" x="40" y="60" fill="#adadad" pointer-events="all" rx="3.6" ry="3.6"/><rect width="130" height="10" x="40" y="150" fill="#ccc" pointer-events="all" rx="3.6" ry="3.6"/><rect width="140" height="24" x="100" fill="none" pointer-events="all" rx=".72" ry=".72"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:12px;margin-left:103px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal"><xhtml:div>ウェブ文書</xhtml:div></xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="170" y="17" font-family="Monospace" font-size="16" text-anchor="middle">ウェブ文書</text></switch><g stroke="#000"><path fill="none" stroke-miterlimit="10" d="M333 125h207V85h10" pointer-events="stroke"/><circle cx="330" cy="125" r="3" pointer-events="all"/></g><g stroke="#000"><path fill="none" stroke-miterlimit="10" d="m283 85.01 132.5.49L550 85" pointer-events="stroke"/><circle cx="280" cy="85" r="3" pointer-events="all"/></g><g stroke="#000"><path fill="none" stroke-miterlimit="10" d="M333 350h197v35h20" pointer-events="stroke"/><circle cx="330" cy="350" r="3" pointer-events="all"/></g><g stroke="#000"><path fill="none" stroke-miterlimit="10" d="M180 307v-10h370" pointer-events="stroke"/><circle cx="180" cy="310" r="3" pointer-events="all"/></g><rect width="150" height="24" x="370" y="20" fill="none" pointer-events="all" rx=".72" ry=".72"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:32px;margin-left:373px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal"><xhtml:div>GET index.html<xhtml:br/></xhtml:div></xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="445" y="37" font-family="Monospace" font-size="16" text-anchor="middle">GET index.html
+    </text></switch><rect width="150" height="24" x="370" y="60" fill="none" pointer-events="all" rx=".72" ry=".72"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:72px;margin-left:373px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal"><xhtml:div>GET styles.css<xhtml:br/></xhtml:div></xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="445" y="77" font-family="Monospace" font-size="16" text-anchor="middle">GET styles.css
+    </text></switch><rect width="150" height="24" x="370" y="103" fill="none" pointer-events="all" rx=".72" ry=".72"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:115px;margin-left:373px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal"><xhtml:div>GET header.png<xhtml:br/></xhtml:div></xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="445" y="120" font-family="Monospace" font-size="16" text-anchor="middle">GET header.png
+    </text></switch><rect width="150" height="24" x="370" y="268" fill="none" pointer-events="all" rx=".72" ry=".72"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:280px;margin-left:373px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal"><xhtml:div>GET video.mp4<xhtml:br/></xhtml:div></xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="445" y="285" font-family="Monospace" font-size="16" text-anchor="middle">GET video.mp4
+    </text></switch><rect width="150" height="24" x="370" y="326" fill="none" pointer-events="all" rx=".72" ry=".72"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:144px;height:1px;padding-top:338px;margin-left:373px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal"><xhtml:div>GET advert.jpg<xhtml:br/></xhtml:div></xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="445" y="343" font-family="Monospace" font-size="16" text-anchor="middle">GET advert.jpg
+    </text></switch><rect width="140" height="70" x="550" y="50" fill="#bac8d3" stroke="#23445d" pointer-events="all" rx="2.1" ry="2.1"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:85px;margin-left:553px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">ウェブサーバー</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="620" y="90" font-family="Monospace" font-size="16" text-anchor="middle">ウェブサーバー</text></switch><g stroke="#000"><path fill="none" stroke-miterlimit="10" d="M342.84 50.02 540 50v35h10" pointer-events="stroke"/><circle cx="339.84" cy="50.02" r="3" pointer-events="all"/></g><rect width="140" height="70" x="550" y="262" fill="#d0cee2" stroke="#56517e" pointer-events="all" rx="2.1" ry="2.1"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:297px;margin-left:553px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">動画サーバー</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="620" y="302" font-family="Monospace" font-size="16" text-anchor="middle">動画サーバー</text></switch><rect width="140" height="70" x="550" y="350" fill="#b1ddf0" stroke="#10739e" pointer-events="all" rx="2.1" ry="2.1"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:134px;height:1px;padding-top:385px;margin-left:553px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">広告サーバー</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="620" y="390" font-family="Monospace" font-size="16" text-anchor="middle">広告サーバー</text></switch></svg>
\ No newline at end of file
diff --git a/files/ja/web/http/overview/http-layers.svg b/files/ja/web/http/overview/http-layers.svg
index 9638302c0752cf..5f49062040af9a 100644
--- a/files/ja/web/http/overview/http-layers.svg
+++ b/files/ja/web/http/overview/http-layers.svg
@@ -1,874 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   version="1.1"
-   width="599px"
-   height="338px"
-   viewBox="-0.5 -0.5 599 338"
-   style="background-color: rgb(255, 255, 255);"
-   id="svg75"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:xhtml="http://www.w3.org/1999/xhtml">
-  <defs
-     id="defs1" />
-  <rect
-     fill="#FFFFFF"
-     width="100%"
-     height="100%"
-     x="0"
-     y="0"
-     id="rect1" />
-  <g
-     id="g75">
-    <g
-       data-cell-id="0"
-       id="g74">
-      <g
-         data-cell-id="1"
-         id="g73">
-        <g
-           data-cell-id="oMBeN4IvPGKr6_LYo95F-5"
-           id="g5">
-          <g
-             id="g2">
-            <rect
-               x="88"
-               y="8"
-               width="120"
-               height="160"
-               rx="3.6"
-               ry="3.6"
-               fill="#fff2cc"
-               stroke="#d6b656"
-               pointer-events="all"
-               id="rect2" />
-          </g>
-          <g
-             id="g4">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g3">
-              <switch
-                 id="switch2">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 88px; margin-left: 91px;">
-                    <xhtml:div
-                       data-drawio-colors="color: rgb(0, 0, 0); "
-                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">HTML</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="148"
-                   y="93"
-                   fill="rgb(0, 0, 0)"
-                   font-family="&quot;Monospace&quot;"
-                   font-size="16px"
-                   text-anchor="middle"
-                   id="text2">HTML</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-2"
-           id="g9">
-          <g
-             id="g6">
-            <rect
-               x="208"
-               y="8"
-               width="120"
-               height="160"
-               rx="3.6"
-               ry="3.6"
-               fill="#ffe6cc"
-               stroke="#d79b00"
-               pointer-events="all"
-               id="rect5" />
-          </g>
-          <g
-             id="g8">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g7">
-              <switch
-                 id="switch6">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 88px; margin-left: 211px;">
-                    <xhtml:div
-                       data-drawio-colors="color: rgb(0, 0, 0); "
-                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">CSS</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="268"
-                   y="93"
-                   fill="rgb(0, 0, 0)"
-                   font-family="&quot;Monospace&quot;"
-                   font-size="16px"
-                   text-anchor="middle"
-                   id="text6">CSS</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-3"
-           id="g13">
-          <g
-             id="g10">
-            <rect
-               x="328"
-               y="8"
-               width="120"
-               height="80"
-               rx="2.4"
-               ry="2.4"
-               fill="#f8cecc"
-               stroke="#b85450"
-               pointer-events="all"
-               id="rect9" />
-          </g>
-          <g
-             id="g12">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g11">
-              <switch
-                 id="switch10">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 48px; margin-left: 331px;">
-                    <xhtml:div
-                       data-drawio-colors="color: rgb(0, 0, 0); "
-                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Web API</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="388"
-                   y="53"
-                   fill="rgb(0, 0, 0)"
-                   font-family="&quot;Monospace&quot;"
-                   font-size="16px"
-                   text-anchor="middle"
-                   id="text10">Web API</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-4"
-           id="g17">
-          <g
-             id="g14">
-            <rect
-               x="328"
-               y="88"
-               width="120"
-               height="80"
-               rx="2.4"
-               ry="2.4"
-               fill="#d5e8d4"
-               stroke="#82b366"
-               pointer-events="all"
-               id="rect13" />
-          </g>
-          <g
-             id="g16">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g15">
-              <switch
-                 id="switch14">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 128px; margin-left: 331px;">
-                    <xhtml:div
-                       data-drawio-colors="color: rgb(0, 0, 0); "
-                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">JavaScript</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="388"
-                   y="133"
-                   fill="rgb(0, 0, 0)"
-                   font-family="&quot;Monospace&quot;"
-                   font-size="16px"
-                   text-anchor="middle"
-                   id="text14">JavaScript</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-6"
-           id="g21">
-          <g
-             id="g18">
-            <rect
-               x="88"
-               y="208"
-               width="120"
-               height="40"
-               rx="1.2"
-               ry="1.2"
-               fill="#cfe3f5"
-               stroke="rgb(0, 0, 0)"
-               pointer-events="all"
-               id="rect17" />
-          </g>
-          <g
-             id="g20">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g19">
-              <switch
-                 id="switch18">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 228px; margin-left: 91px;">
-                    <xhtml:div
-                       data-drawio-colors="color: #333333; "
-                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">DNS</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="148"
-                   y="233"
-                   fill="#333333"
-                   font-family="&quot;Monospace&quot;"
-                   font-size="16px"
-                   text-anchor="middle"
-                   id="text18">DNS</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-7"
-           id="g25">
-          <g
-             id="g22">
-            <rect
-               x="88"
-               y="248"
-               width="120"
-               height="40"
-               rx="1.2"
-               ry="1.2"
-               fill="#cfe3f5"
-               stroke="rgb(0, 0, 0)"
-               pointer-events="all"
-               id="rect21" />
-          </g>
-          <g
-             id="g24">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g23">
-              <switch
-                 id="switch22">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 268px; margin-left: 91px;">
-                    <xhtml:div
-                       data-drawio-colors="color: #333333; "
-                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">UDP</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="148"
-                   y="273"
-                   fill="#333333"
-                   font-family="&quot;Monospace&quot;"
-                   font-size="16px"
-                   text-anchor="middle"
-                   id="text22">UDP</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-8"
-           id="g29">
-          <g
-             id="g26">
-            <rect
-               x="208"
-               y="208"
-               width="240"
-               height="80"
-               rx="2.4"
-               ry="2.4"
-               fill="#cfe3f5"
-               stroke="rgb(0, 0, 0)"
-               pointer-events="all"
-               id="rect25" />
-          </g>
-          <g
-             id="g28">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g27">
-              <switch
-                 id="switch26">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 234px; height: 1px; padding-top: 283px; margin-left: 211px;">
-                    <xhtml:div
-                       data-drawio-colors="color: #333333; "
-                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">TCP</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="328"
-                   y="283"
-                   fill="#333333"
-                   font-family="&quot;Monospace&quot;"
-                   font-size="16px"
-                   text-anchor="middle"
-                   id="text26">TCP</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-9"
-           id="g33">
-          <g
-             id="g30">
-            <rect
-               x="88"
-               y="288"
-               width="360"
-               height="40"
-               rx="1.2"
-               ry="1.2"
-               fill="#e1d5e7"
-               stroke="#9673a6"
-               pointer-events="all"
-               id="rect29" />
-          </g>
-          <g
-             id="g32">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g31">
-              <switch
-                 id="switch30">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 354px; height: 1px; padding-top: 308px; margin-left: 91px;">
-                    <xhtml:div
-                       data-drawio-colors="color: rgb(0, 0, 0); "
-                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">IP</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="268"
-                   y="313"
-                   fill="rgb(0, 0, 0)"
-                   font-family="&quot;Monospace&quot;"
-                   font-size="16px"
-                   text-anchor="middle"
-                   id="text30">IP</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-10"
-           id="g37">
-          <g
-             id="g34">
-            <rect
-               x="328"
-               y="208"
-               width="120"
-               height="40"
-               rx="1.2"
-               ry="1.2"
-               fill="#cfe3f5"
-               stroke="rgb(0, 0, 0)"
-               pointer-events="all"
-               id="rect33" />
-          </g>
-          <g
-             id="g36">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g35">
-              <switch
-                 id="switch34">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 228px; margin-left: 331px;">
-                    <xhtml:div
-                       data-drawio-colors="color: #333333; "
-                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">TLS</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="388"
-                   y="233"
-                   fill="#333333"
-                   font-family="&quot;Monospace&quot;"
-                   font-size="16px"
-                   text-anchor="middle"
-                   id="text34">TLS</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-12"
-           id="g41">
-          <g
-             id="g38">
-            <rect
-               x="488"
-               y="93.5"
-               width="90"
-               height="30"
-               fill="none"
-               stroke="none"
-               pointer-events="all"
-               id="rect37" />
-          </g>
-          <g
-             id="g40">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g39">
-              <switch
-                 id="switch38">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 88px; height: 1px; padding-top: 109px; margin-left: 490px;">
-                    <xhtml:div
-                       data-drawio-colors="color: rgb(0, 0, 0); "
-                       style="box-sizing: border-box; font-size: 0px; text-align: left;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
-                        <xhtml:div>クライアント<xhtml:br />
-</xhtml:div>
-                      </xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="490"
-                   y="112"
-                   fill="rgb(0, 0, 0)"
-                   font-family="&quot;Helvetica&quot;"
-                   font-size="12px"
-                   id="text38">クライアント
-</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-13"
-           id="g43">
-          <g
-             id="g42">
-            <path
-               d="M 475 10.5 L 469.5 10.5 Q 468 10.5 468 12 L 468 107 Q 468 108.5 466.5 108.5 L 462.5 108.5 Q 461 108.5 462.5 108.5 L 466.5 108.5 Q 468 108.5 468 110 L 468 205 Q 468 206.5 469.5 206.5 L 475 206.5"
-               fill="none"
-               stroke="rgb(0, 0, 0)"
-               stroke-miterlimit="10"
-               transform="rotate(-180,468,108.5)"
-               pointer-events="all"
-               id="path41" />
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-15"
-           id="g45">
-          <g
-             id="g44">
-            <path
-               d="M 488 108.5 L 473.6 108.5"
-               fill="none"
-               stroke="rgb(0, 0, 0)"
-               stroke-miterlimit="10"
-               pointer-events="stroke"
-               id="path43" />
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-5"
-           id="g49">
-          <g
-             id="g46">
-            <rect
-               x="88"
-               y="168"
-               width="360"
-               height="40"
-               rx="1.2"
-               ry="1.2"
-               fill="#f5f5f5"
-               stroke="#666666"
-               pointer-events="all"
-               id="rect45" />
-          </g>
-          <g
-             id="g48">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g47">
-              <switch
-                 id="switch46">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 354px; height: 1px; padding-top: 188px; margin-left: 91px;">
-                    <xhtml:div
-                       data-drawio-colors="color: #333333; "
-                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">HTTP</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="268"
-                   y="193"
-                   fill="#333333"
-                   font-family="&quot;Monospace&quot;"
-                   font-size="16px"
-                   text-anchor="middle"
-                   id="text46">HTTP</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-29"
-           id="g53">
-          <g
-             id="g50">
-            <rect
-               x="486"
-               y="233.63"
-               width="112"
-               height="30"
-               fill="none"
-               stroke="none"
-               pointer-events="all"
-               id="rect49" />
-          </g>
-          <g
-             id="g52">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g51">
-              <switch
-                 id="switch50">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 110px; height: 1px; padding-top: 249px; margin-left: 488px;">
-                    <xhtml:div
-                       data-drawio-colors="color: rgb(0, 0, 0); "
-                       style="box-sizing: border-box; font-size: 0px; text-align: left;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
-                        <xhtml:div>アプリケーション/<xhtml:br />
-トランスポート</xhtml:div>
-                      </xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="488"
-                   y="252"
-                   fill="rgb(0, 0, 0)"
-                   font-family="&quot;Helvetica&quot;"
-                   font-size="12px"
-                   id="text50">アプリケーション/...</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-30"
-           id="g55">
-          <g
-             id="g54">
-            <path
-               d="M 474 210.38 L 468.5 210.38 Q 467 210.38 467 211.88 L 467 247.13 Q 467 248.63 465.5 248.63 L 461.5 248.63 Q 460 248.63 461.5 248.63 L 465.5 248.63 Q 467 248.63 467 250.13 L 467 285.38 Q 467 286.88 468.5 286.88 L 474 286.88"
-               fill="none"
-               stroke="rgb(0, 0, 0)"
-               stroke-miterlimit="10"
-               transform="rotate(-180,467,248.63)"
-               pointer-events="all"
-               id="path53" />
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-31"
-           id="g57">
-          <g
-             id="g56">
-            <path
-               d="M 486 248.63 L 472.6 248.63"
-               fill="none"
-               stroke="rgb(0, 0, 0)"
-               stroke-miterlimit="10"
-               pointer-events="stroke"
-               id="path55" />
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-32"
-           id="g61">
-          <g
-             id="g58">
-            <rect
-               x="484"
-               y="293.5"
-               width="74"
-               height="30"
-               fill="none"
-               stroke="none"
-               pointer-events="all"
-               id="rect57" />
-          </g>
-          <g
-             id="g60">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g59">
-              <switch
-                 id="switch58">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 72px; height: 1px; padding-top: 309px; margin-left: 486px;">
-                    <xhtml:div
-                       data-drawio-colors="color: rgb(0, 0, 0); "
-                       style="box-sizing: border-box; font-size: 0px; text-align: left;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
-                        <xhtml:div>IP レイヤー<xhtml:br />
-</xhtml:div>
-                      </xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="486"
-                   y="312"
-                   fill="rgb(0, 0, 0)"
-                   font-family="&quot;Helvetica&quot;"
-                   font-size="12px"
-                   id="text58">IP レイヤー
-</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-33"
-           id="g63">
-          <g
-             id="g62">
-            <path
-               d="M 474 290.5 L 468.5 290.5 Q 467 290.5 467 292 L 467 307 Q 467 308.5 465.5 308.5 L 461.5 308.5 Q 460 308.5 461.5 308.5 L 465.5 308.5 Q 467 308.5 467 310 L 467 325 Q 467 326.5 468.5 326.5 L 474 326.5"
-               fill="none"
-               stroke="rgb(0, 0, 0)"
-               stroke-miterlimit="10"
-               transform="rotate(-180,467,308.5)"
-               pointer-events="all"
-               id="path61" />
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-34"
-           id="g65">
-          <g
-             id="g64">
-            <path
-               d="M 484 308.5 L 472.6 308.5"
-               fill="none"
-               stroke="rgb(0, 0, 0)"
-               stroke-miterlimit="10"
-               pointer-events="stroke"
-               id="path63" />
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-35"
-           id="g69">
-          <g
-             id="g66">
-            <rect
-               x="18"
-               y="148"
-               width="60"
-               height="30"
-               fill="none"
-               stroke="none"
-               pointer-events="all"
-               id="rect65" />
-          </g>
-          <g
-             id="g68">
-            <g
-               transform="translate(-0.5 -0.5)"
-               id="g67">
-              <switch
-                 id="switch66">
-                <foreignObject
-                   pointer-events="none"
-                   width="100%"
-                   height="100%"
-                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
-                   style="overflow: visible; text-align: left;">
-                  <xhtml:div
-                     style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 58px; height: 1px; padding-top: 163px; margin-left: 20px;">
-                    <xhtml:div
-                       data-drawio-colors="color: rgb(0, 0, 0); "
-                       style="box-sizing: border-box; font-size: 0px; text-align: left;">
-                      <xhtml:div
-                         style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">ウェブ</xhtml:div>
-                    </xhtml:div>
-                  </xhtml:div>
-                </foreignObject>
-                <text
-                   x="20"
-                   y="167"
-                   fill="rgb(0, 0, 0)"
-                   font-family="&quot;Helvetica&quot;"
-                   font-size="12px"
-                   id="text66">ウェブ</text>
-              </switch>
-            </g>
-          </g>
-        </g>
-        <g
-           data-cell-id="itvtTAMVvJ-Au7iy1GT8-36"
-           id="g72">
-          <g
-             id="g71">
-            <path
-               d="M 8 319.88 L 8 16.12"
-               fill="none"
-               stroke="rgb(0, 0, 0)"
-               stroke-miterlimit="10"
-               pointer-events="stroke"
-               id="path69" />
-            <path
-               d="M 8 326.88 L 4.5 319.88 L 11.5 319.88 Z"
-               fill="rgb(0, 0, 0)"
-               stroke="rgb(0, 0, 0)"
-               stroke-miterlimit="10"
-               pointer-events="all"
-               id="path70" />
-            <path
-               d="M 8 9.12 L 11.5 16.12 L 4.5 16.12 Z"
-               fill="rgb(0, 0, 0)"
-               stroke="rgb(0, 0, 0)"
-               stroke-miterlimit="10"
-               pointer-events="all"
-               id="path71" />
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="599" height="338" style="background-color:#fff" viewBox="-0.5 -0.5 599 338"><rect width="100%" height="100%" fill="#FFF"/><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="oMBeN4IvPGKr6_LYo95F-5"><rect width="120" height="160" x="88" y="8" fill="#fff2cc" stroke="#d6b656" pointer-events="all" rx="3.6" ry="3.6"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:114px;height:1px;padding-top:88px;margin-left:91px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:Monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">HTML</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="148" y="93" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">HTML</text></switch></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-2"><rect width="120" height="160" x="208" y="8" fill="#ffe6cc" stroke="#d79b00" pointer-events="all" rx="3.6" ry="3.6"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:114px;height:1px;padding-top:88px;margin-left:211px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:Monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">CSS</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="268" y="93" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">CSS</text></switch></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-3"><rect width="120" height="80" x="328" y="8" fill="#f8cecc" stroke="#b85450" pointer-events="all" rx="2.4" ry="2.4"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:114px;height:1px;padding-top:48px;margin-left:331px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:Monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">Web API</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="388" y="53" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Web API</text></switch></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-4"><rect width="120" height="80" x="328" y="88" fill="#d5e8d4" stroke="#82b366" pointer-events="all" rx="2.4" ry="2.4"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:114px;height:1px;padding-top:128px;margin-left:331px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:Monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">JavaScript</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="388" y="133" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">JavaScript</text></switch></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-6"><rect width="120" height="40" x="88" y="208" fill="#cfe3f5" stroke="#000" pointer-events="all" rx="1.2" ry="1.2"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:114px;height:1px;padding-top:228px;margin-left:91px"><xhtml:div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:Monospace;color:#333;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">DNS</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="148" y="233" fill="#333" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">DNS</text></switch></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-7"><rect width="120" height="40" x="88" y="248" fill="#cfe3f5" stroke="#000" pointer-events="all" rx="1.2" ry="1.2"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:114px;height:1px;padding-top:268px;margin-left:91px"><xhtml:div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:Monospace;color:#333;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">UDP</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="148" y="273" fill="#333" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">UDP</text></switch></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-8"><rect width="240" height="80" x="208" y="208" fill="#cfe3f5" stroke="#000" pointer-events="all" rx="2.4" ry="2.4"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe flex-end;justify-content:unsafe center;width:234px;height:1px;padding-top:283px;margin-left:211px"><xhtml:div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:Monospace;color:#333;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">TCP</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="328" y="283" fill="#333" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">TCP</text></switch></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-9"><rect width="360" height="40" x="88" y="288" fill="#e1d5e7" stroke="#9673a6" pointer-events="all" rx="1.2" ry="1.2"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:354px;height:1px;padding-top:308px;margin-left:91px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:Monospace;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">IP</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="268" y="313" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">IP</text></switch></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-10"><rect width="120" height="40" x="328" y="208" fill="#cfe3f5" stroke="#000" pointer-events="all" rx="1.2" ry="1.2"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:114px;height:1px;padding-top:228px;margin-left:331px"><xhtml:div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:Monospace;color:#333;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">TLS</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="388" y="233" fill="#333" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">TLS</text></switch></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-12"><path fill="none" d="M488 93.5h90v30h-90z" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:88px;height:1px;padding-top:109px;margin-left:490px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:left"><xhtml:div style="display:inline-block;font-size:12px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal"><xhtml:div>クライアント<xhtml:br/></xhtml:div></xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="490" y="112" font-family="&quot;Helvetica&quot;" font-size="12">クライアント
+</text></switch></g><path fill="none" stroke="#000" stroke-miterlimit="10" d="M461 206.5h5.5q1.5 0 1.5-1.5v-95q0-1.5 1.5-1.5h4q1.5 0 0 0h-4q-1.5 0-1.5-1.5V12q0-1.5-1.5-1.5H461" data-cell-id="itvtTAMVvJ-Au7iy1GT8-13" pointer-events="all"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="M488 108.5h-14.4" data-cell-id="itvtTAMVvJ-Au7iy1GT8-15" pointer-events="stroke"/><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-5"><rect width="360" height="40" x="88" y="168" fill="#f5f5f5" stroke="#666" pointer-events="all" rx="1.2" ry="1.2"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:354px;height:1px;padding-top:188px;margin-left:91px"><xhtml:div data-drawio-colors="color: #333333;" style="box-sizing:border-box;font-size:0;text-align:center"><xhtml:div style="display:inline-block;font-size:16px;font-family:Monospace;color:#333;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">HTTP</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="268" y="193" fill="#333" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">HTTP</text></switch></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-29"><path fill="none" d="M486 233.63h112v30H486z" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:110px;height:1px;padding-top:249px;margin-left:488px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:left"><xhtml:div style="display:inline-block;font-size:12px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal"><xhtml:div>アプリケーション/<xhtml:br/>トランスポート</xhtml:div></xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="488" y="252" font-family="&quot;Helvetica&quot;" font-size="12">アプリケーション/...</text></switch></g><path fill="none" stroke="#000" stroke-miterlimit="10" d="M460 286.88h5.5q1.5 0 1.5-1.5v-35.25q0-1.5 1.5-1.5h4q1.5 0 0 0h-4q-1.5 0-1.5-1.5v-35.25q0-1.5-1.5-1.5H460" data-cell-id="itvtTAMVvJ-Au7iy1GT8-30" pointer-events="all"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="M486 248.63h-13.4" data-cell-id="itvtTAMVvJ-Au7iy1GT8-31" pointer-events="stroke"/><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-32"><path fill="none" d="M484 293.5h74v30h-74z" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:72px;height:1px;padding-top:309px;margin-left:486px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:left"><xhtml:div style="display:inline-block;font-size:12px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal"><xhtml:div>IP レイヤー<xhtml:br/></xhtml:div></xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="486" y="312" font-family="&quot;Helvetica&quot;" font-size="12">IP レイヤー
+</text></switch></g><path fill="none" stroke="#000" stroke-miterlimit="10" d="M460 326.5h5.5q1.5 0 1.5-1.5v-15q0-1.5 1.5-1.5h4q1.5 0 0 0h-4q-1.5 0-1.5-1.5v-15q0-1.5-1.5-1.5H460" data-cell-id="itvtTAMVvJ-Au7iy1GT8-33" pointer-events="all"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="M484 308.5h-11.4" data-cell-id="itvtTAMVvJ-Au7iy1GT8-34" pointer-events="stroke"/><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-35"><path fill="none" d="M18 148h60v30H18z" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left"><xhtml:div style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:58px;height:1px;padding-top:163px;margin-left:20px"><xhtml:div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:left"><xhtml:div style="display:inline-block;font-size:12px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">ウェブ</xhtml:div></xhtml:div></xhtml:div></foreignObject><text x="20" y="167" font-family="&quot;Helvetica&quot;" font-size="12">ウェブ</text></switch></g><g stroke="#000" stroke-miterlimit="10" data-cell-id="itvtTAMVvJ-Au7iy1GT8-36"><path fill="none" d="M8 319.88V16.12" pointer-events="stroke"/><path d="m8 326.88-3.5-7h7ZM8 9.12l3.5 7h-7Z" pointer-events="all"/></g></g></g></svg>
\ No newline at end of file