This is an automated email from the ASF dual-hosted git repository.

wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git


The following commit(s) were added to refs/heads/master by this push:
     new abe199b7fbf Add blog: How to Use SkyWalking for Distributed Tracing in 
Istio? (#548)
abe199b7fbf is described below

commit abe199b7fbfa248a20e3968325ef3d1ef555a916
Author: Jimmy Song <[email protected]>
AuthorDate: Wed Dec 14 10:44:04 2022 +0800

    Add blog: How to Use SkyWalking for Distributed Tracing in Istio? (#548)
---
 .../f1.svg                                         | 176 +++++++++++
 .../f2.jpg                                         | Bin 0 -> 155829 bytes
 .../f3.jpg                                         | Bin 0 -> 137476 bytes
 .../f4.jpg                                         | Bin 0 -> 231348 bytes
 .../f5.jpg                                         | Bin 0 -> 194322 bytes
 .../f6.jpg                                         | Bin 0 -> 56031 bytes
 .../f7.svg                                         | 106 +++++++
 .../f8.svg                                         | 239 +++++++++++++++
 .../index.md                                       | 321 +++++++++++++++++++++
 .../f1.svg                                         | 176 +++++++++++
 .../f2.jpg                                         | Bin 0 -> 155829 bytes
 .../f3.jpg                                         | Bin 0 -> 137476 bytes
 .../f4.jpg                                         | Bin 0 -> 231348 bytes
 .../f5.jpg                                         | Bin 0 -> 194322 bytes
 .../f6.jpg                                         | Bin 0 -> 56031 bytes
 .../f7.svg                                         | 106 +++++++
 .../f8.svg                                         | 239 +++++++++++++++
 .../index.md                                       | 303 +++++++++++++++++++
 18 files changed, 1666 insertions(+)

diff --git 
a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f1.svg 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f1.svg
new file mode 100644
index 00000000000..8f9dee43ad3
--- /dev/null
+++ b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f1.svg
@@ -0,0 +1,176 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/"; version="1.1" 
xmlns:xl="http://www.w3.org/1999/xlink"; xmlns="http://www.w3.org/2000/svg"; 
viewBox="134 170 1026 461" width="1026" height="461">
+  <defs>
+    <marker orient="auto" overflow="visible" markerUnits="strokeWidth" 
id="FilledArrow_Marker" stroke-linejoin="miter" stroke-miterlimit="10" 
viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="black">
+      <g>
+        <path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" 
stroke="currentColor" stroke-width="1"/>
+      </g>
+    </marker>
+  </defs>
+  <g id="basic" fill-opacity="1" fill="none" stroke="none" stroke-opacity="1" 
stroke-dasharray="none">
+    <title>basic</title>
+    <rect fill="white" x="134" y="170" width="1026" height="461"/>
+    <g id="basic_Layer_1">
+      <title>Layer 1</title>
+      <g id="Graphic_42">
+        <rect x="134.25" y="170" width="1025" height="461" fill="white"/>
+      </g>
+      <g id="Graphic_2">
+        <rect x="643" y="235.5" width="500" height="40" fill="#333"/>
+        <text transform="translate(648 245.76794)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="239.52" y="16">A</tspan>
+        </text>
+      </g>
+      <g id="Graphic_3">
+        <rect x="685" y="307.73206" width="458" height="40" fill="#333"/>
+        <text transform="translate(690 318)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="218.368" y="16">B</tspan>
+        </text>
+      </g>
+      <g id="Graphic_4">
+        <rect x="716" y="370.61603" width="414.5" height="40" fill="#333"/>
+        <text transform="translate(721 380.88397)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="196.322" y="16">C</tspan>
+        </text>
+      </g>
+      <g id="Graphic_5">
+        <rect x="928" y="433.5" width="202.5" height="40" fill="#333"/>
+        <text transform="translate(933 443.76794)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="90.322" y="16">D</tspan>
+        </text>
+      </g>
+      <g id="Graphic_6">
+        <rect x="704.5" y="496.384" width="215" height="40" fill="#333"/>
+        <text transform="translate(709.5 506.6519)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="97.316" y="16">E</tspan>
+        </text>
+      </g>
+      <g id="Graphic_7">
+        <rect x="629.8546" y="246" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Graphic_8">
+        <rect x="629.8546" y="502.5" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Line_9">
+        <path d="M 629.8546 255.81915 L 616.5 255.81915 L 616.5 512.5 L 
629.8546 512.5" stroke="black" stroke-linecap="round" stroke-linejoin="round" 
stroke-width="2"/>
+      </g>
+      <g id="Graphic_10">
+        <text transform="translate(539.784 380.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">TRACE</tspan>
+        </text>
+      </g>
+      <g id="Graphic_20">
+        <rect x="643" y="550" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Graphic_19">
+        <rect x="1144" y="550" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Line_18">
+        <path d="M 646.75 570 L 646.75 586.1386 L 1144 586.1386 L 1144 570" 
stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Graphic_17">
+        <text transform="translate(866.464 597)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="5684342e-20" y="16">SPANS</tspan>
+        </text>
+      </g>
+      <g id="Graphic_21">
+        <text transform="translate(1082 183.53589)" fill="black">
+          <tspan font-family="Helvetica Neue" font-style="italic" 
font-weight="bold" font-size="16" fill="black" x="0" y="16">time</tspan>
+        </text>
+      </g>
+      <g id="Graphic_22">
+        <rect x="1135.5" y="199" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Graphic_23">
+        <rect x="629.8546" y="199" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Line_24">
+        <line x1="637.3546" y1="209" x2="1122.6" y2="209" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-dasharray="8.0,8.0" stroke-width="2"/>
+      </g>
+      <g id="Graphic_25">
+        <circle cx="411.506" cy="285.5" r="22.5000359527927" fill="white"/>
+        <circle cx="411.506" cy="285.5" r="22.5000359527927" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(398.506 275.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="7.52" y="16">A</tspan>
+        </text>
+      </g>
+      <g id="Graphic_26">
+        <circle cx="335.81" cy="397.5" r="22.5000359527927" fill="white"/>
+        <circle cx="335.81" cy="397.5" r="22.5000359527927" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(322.81 387.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="7.368" y="16">B</tspan>
+        </text>
+      </g>
+      <g id="Graphic_27">
+        <circle cx="194.864" cy="588.5" r="22.5000359527927" fill="white"/>
+        <circle cx="194.864" cy="588.5" r="22.5000359527927" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(181.864 578.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="7.072" y="16">D</tspan>
+        </text>
+      </g>
+      <g id="Graphic_28">
+        <circle cx="260.114" cy="502" r="22.5000359527927" fill="white"/>
+        <circle cx="260.114" cy="502" r="22.5000359527927" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(247.114 492.26794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="7.072" y="16">C</tspan>
+        </text>
+      </g>
+      <g id="Graphic_29">
+        <circle cx="411.506" cy="502" r="22.5000359527927" fill="white"/>
+        <circle cx="411.506" cy="502" r="22.5000359527927" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(398.506 492.26794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="7.816" y="16">E</tspan>
+        </text>
+      </g>
+      <g id="Line_30">
+        <line x1="398.90456" y1="304.14513" x2="355.63493" y2="368.16697" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Line_31">
+        <line x1="322.6089" y1="415.7244" x2="280.88263" y2="473.32845" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Line_32">
+        <line x1="349.0111" y1="415.7244" x2="390.73737" y2="473.32845" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Line_33">
+        <line x1="246.56256" y1="519.96475" x2="216.184" y2="560.2367" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Line_34">
+        <line x1="411.506" y1="225.5" x2="411.506" y2="250.1" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Graphic_35">
+        <rect x="407.756" y="205.5" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Graphic_36">
+        <text transform="translate(382.178 194)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">TraceID</tspan>
+        </text>
+      </g>
+      <g id="Graphic_37">
+        <text transform="translate(311.946 318)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">Span2</tspan>
+        </text>
+      </g>
+      <g id="Graphic_38">
+        <text transform="translate(171 532)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">Span4</tspan>
+        </text>
+      </g>
+      <g id="Graphic_39">
+        <text transform="translate(236.25 428)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">Span3</tspan>
+        </text>
+      </g>
+      <g id="Graphic_40">
+        <text transform="translate(387.642 432)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">Span5</tspan>
+        </text>
+      </g>
+      <g id="Graphic_41">
+        <text transform="translate(423.114 231)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">Span1</tspan>
+        </text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git 
a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f2.jpg 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f2.jpg
new file mode 100644
index 00000000000..643b4260e00
Binary files /dev/null and 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f2.jpg 
differ
diff --git 
a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f3.jpg 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f3.jpg
new file mode 100644
index 00000000000..e246a55c883
Binary files /dev/null and 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f3.jpg 
differ
diff --git 
a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f4.jpg 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f4.jpg
new file mode 100644
index 00000000000..640735cfa99
Binary files /dev/null and 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f4.jpg 
differ
diff --git 
a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f5.jpg 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f5.jpg
new file mode 100644
index 00000000000..2c9a279d93a
Binary files /dev/null and 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f5.jpg 
differ
diff --git 
a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f6.jpg 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f6.jpg
new file mode 100644
index 00000000000..d381d6840a5
Binary files /dev/null and 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f6.jpg 
differ
diff --git 
a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f7.svg 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f7.svg
new file mode 100644
index 00000000000..da538ad4230
--- /dev/null
+++ b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f7.svg
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/"; version="1.1" 
xmlns:xl="http://www.w3.org/1999/xlink"; xmlns="http://www.w3.org/2000/svg"; 
viewBox="794 65 659 244" width="659" height="244">
+  <defs>
+    <marker orient="auto" overflow="visible" markerUnits="strokeWidth" 
id="FilledArrow_Marker" stroke-linejoin="miter" stroke-miterlimit="10" 
viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black">
+      <g>
+        <path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" 
stroke="currentColor" stroke-width="1"/>
+      </g>
+    </marker>
+  </defs>
+  <g id="span" fill-opacity="1" fill="none" stroke="none" stroke-opacity="1" 
stroke-dasharray="none">
+    <title>span</title>
+    <rect fill="white" x="794" y="65" width="659" height="244"/>
+    <g id="span_Layer_1">
+      <title>Layer 1</title>
+      <g id="Graphic_35">
+        <rect x="794.955" y="65.375" width="657.5" height="242.75" 
fill="white"/>
+      </g>
+      <g id="Graphic_18">
+        <rect x="1016.2931" y="82" width="214.82375" height="209.5" 
fill="white"/>
+        <rect x="1016.2931" y="82" width="214.82375" height="209.5" 
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(1021.2931 87)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="18" fill="black" x="85.41087" y="18">Pod</tspan>
+        </text>
+      </g>
+      <g id="Graphic_17">
+        <rect x="1063.705" y="233.5" width="120" height="40" fill="#333"/>
+        <text transform="translate(1068.705 243.76794)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="39.744" y="16">App</tspan>
+        </text>
+      </g>
+      <g id="Graphic_16">
+        <rect x="1063.705" y="123.5" width="120" height="40" fill="#f15623"/>
+        <text transform="translate(1068.705 133.76794)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="31.872" y="16">Envoy</tspan>
+        </text>
+      </g>
+      <g id="Graphic_19">
+        <rect x="803.5" y="119.75" width="108.5" height="47.5" fill="white"/>
+        <rect x="803.5" y="119.75" width="108.5" height="47.5" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(808.5 133.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x=".666" y="16">Downstream</tspan>
+        </text>
+      </g>
+      <g id="Graphic_20">
+        <rect x="1335.41" y="119.75" width="108.5" height="47.5" fill="white"/>
+        <rect x="1335.41" y="119.75" width="108.5" height="47.5" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(1340.41 133.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="11.922" y="16">Upstream</tspan>
+        </text>
+      </g>
+      <g id="Line_21">
+        <line x1="912" y1="143.5" x2="1053.805" y2="143.5" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_22">
+        <line x1="1183.705" y1="143.5" x2="1325.51" y2="143.5" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_23">
+        <path d="M 943.8234 128.76794 L 985.8616 128.76794 L 985.8616 
152.33923 C 973.2502 149.39282 956.4349 161.17847 943.8234 155.28564 Z" 
fill="white"/>
+        <path d="M 943.8234 128.76794 L 985.8616 128.76794 L 985.8616 
152.33923 C 973.2502 149.39282 956.4349 161.17847 943.8234 155.28564 Z" 
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(948.8234 134.35275)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="12" fill="black" x="1.457125" y="12">Span</tspan>
+        </text>
+      </g>
+      <g id="Line_25">
+        <line x1="1089.377" y1="163.5" x2="1089.377" y2="223.6" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_26">
+        <line x1="1155.455" y1="233.5" x2="1155.455" y2="173.4" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_29">
+        <rect x="929.6506" y="93" width="68.992" height="28.447998" 
fill="white"/>
+        <text transform="translate(934.6506 98)" fill="black">
+          <tspan font-family="Helvetica Neue" font-size="16" fill="black" 
x="0" y="15">Inbound</tspan>
+        </text>
+      </g>
+      <g id="Graphic_30">
+        <rect x="1242.2394" y="93" width="82.048" height="28.447998" 
fill="white"/>
+        <text transform="translate(1247.2394 98)" fill="black">
+          <tspan font-family="Helvetica Neue" font-size="16" fill="black" 
x="0" y="15">Outbound</tspan>
+        </text>
+      </g>
+      <g id="Graphic_31">
+        <path d="M 1068.3579 181.09268 L 1110.3961 181.09268 L 1110.3961 
204.66397 C 1097.7847 201.71756 1080.9693 213.5032 1068.3579 207.61038 Z" 
fill="white"/>
+        <path d="M 1068.3579 181.09268 L 1110.3961 181.09268 L 1110.3961 
204.66397 C 1097.7847 201.71756 1080.9693 213.5032 1068.3579 207.61038 Z" 
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(1073.3579 186.67749)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="12" fill="black" x="1.457125" y="12">Span</tspan>
+        </text>
+      </g>
+      <g id="Graphic_32">
+        <path d="M 1134.4359 181.1825 L 1176.4741 181.1825 L 1176.4741 
204.7538 C 1163.8627 201.80739 1147.0473 213.59303 1134.4359 207.7002 Z" 
fill="white"/>
+        <path d="M 1134.4359 181.1825 L 1176.4741 181.1825 L 1176.4741 
204.7538 C 1163.8627 201.80739 1147.0473 213.59303 1134.4359 207.7002 Z" 
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(1139.4359 186.76732)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="12" fill="black" x="1.457125" y="12">Span</tspan>
+        </text>
+      </g>
+      <g id="Graphic_33">
+        <path d="M 1258.3616 128.76794 L 1300.3999 128.76794 L 1300.3999 
152.33923 C 1287.7884 149.39282 1270.9731 161.17847 1258.3616 155.28564 Z" 
fill="white"/>
+        <path d="M 1258.3616 128.76794 L 1300.3999 128.76794 L 1300.3999 
152.33923 C 1287.7884 149.39282 1270.9731 161.17847 1258.3616 155.28564 Z" 
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(1263.3616 134.35275)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="12" fill="black" x="1.457125" y="12">Span</tspan>
+        </text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git 
a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f8.svg 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f8.svg
new file mode 100644
index 00000000000..89125e84776
--- /dev/null
+++ b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/f8.svg
@@ -0,0 +1,239 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/"; version="1.1" 
xmlns:xl="http://www.w3.org/1999/xlink"; xmlns="http://www.w3.org/2000/svg"; 
viewBox="423 28 445 649" width="445" height="649">
+  <defs>
+    <marker orient="auto" overflow="visible" markerUnits="strokeWidth" 
id="FilledArrow_Marker" stroke-linejoin="miter" stroke-miterlimit="10" 
viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black">
+      <g>
+        <path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" 
stroke="currentColor" stroke-width="1"/>
+      </g>
+    </marker>
+  </defs>
+  <g id="bookinfo-spans-with-time" fill-opacity="1" fill="none" stroke="none" 
stroke-opacity="1" stroke-dasharray="none">
+    <title>bookinfo-spans-with-time</title>
+    <rect fill="white" x="423" y="28" width="445" height="649"/>
+    <g id="bookinfo-spans-with-time_Layer_1">
+      <title>Layer 1</title>
+      <g id="Graphic_48">
+        <rect x="423" y="28" width="444.5" height="648.2003" fill="white"/>
+      </g>
+      <g id="Graphic_47">
+        <rect x="575.25" y="180.09941" width="140" height="130" fill="white"/>
+        <rect x="575.25" y="180.09941" width="140" height="130" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_46">
+        <rect x="575.25" y="108.36236" width="140" height="40" fill="#f15623"/>
+        <text transform="translate(580.25 118.6303)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="1.304" y="16">Ingress Gateway</tspan>
+        </text>
+      </g>
+      <g id="Graphic_45">
+        <rect x="585.25" y="270.8043" width="120" height="30" fill="#333"/>
+        <text transform="translate(590.25 276.07223)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="5.808" y="16">Productpage</tspan>
+        </text>
+      </g>
+      <g id="Graphic_44">
+        <rect x="585.25" y="209.8043" width="120" height="30" fill="#f15623"/>
+        <text transform="translate(590.25 215.07223)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="31.872" y="16">Envoy</tspan>
+        </text>
+      </g>
+      <g id="Line_43">
+        <line x1="645.25" y1="76.6253" x2="645.25" y2="98.46236" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_42">
+        <line x1="645.25" y1="270.8043" x2="645.25" y2="249.7043" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_41">
+        <rect x="446.545" y="358.5" width="140" height="130" fill="white"/>
+        <rect x="446.545" y="358.5" width="140" height="130" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_40">
+        <rect x="455.875" y="449.5446" width="120" height="30" fill="#333"/>
+        <text transform="translate(460.875 454.81255)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="23.008" y="16">Reviews</tspan>
+        </text>
+      </g>
+      <g id="Graphic_39">
+        <rect x="455.875" y="390.8609" width="120" height="30" fill="#f15623"/>
+        <text transform="translate(460.875 396.12886)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="31.872" y="16">Envoy</tspan>
+        </text>
+      </g>
+      <g id="Graphic_38">
+        <rect x="702.5087" y="358.5" width="140" height="130" fill="white"/>
+        <rect x="702.5087" y="358.5" width="140" height="130" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_37">
+        <rect x="712.6025" y="449.5446" width="120" height="30" fill="#333"/>
+        <text transform="translate(717.6025 454.81255)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="28.648" y="16">Details</tspan>
+        </text>
+      </g>
+      <g id="Graphic_36">
+        <rect x="712.415" y="390.8609" width="120" height="30" fill="#f15623"/>
+        <text transform="translate(717.415 396.12886)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="31.872" y="16">Envoy</tspan>
+        </text>
+      </g>
+      <g id="Line_35">
+        <path d="M 772.415 420.8609 L 772.415 430.8609 L 772.5087 435.20276 L 
772.6025 435.20276 L 772.6025 439.6446" marker-end="url(#FilledArrow_Marker)" 
stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_34">
+        <rect x="446.545" y="525.5003" width="140" height="130" fill="white"/>
+        <rect x="446.545" y="525.5003" width="140" height="130" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_33">
+        <rect x="456.545" y="613.88865" width="120" height="30" fill="#333"/>
+        <text transform="translate(461.545 619.1566)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="25.824" y="16">Ratings</tspan>
+        </text>
+      </g>
+      <g id="Graphic_32">
+        <rect x="456.545" y="558.18864" width="120" height="30" 
fill="#f15623"/>
+        <text transform="translate(461.545 563.4566)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="31.872" y="16">Envoy</tspan>
+        </text>
+      </g>
+      <g id="Line_31">
+        <line x1="516.545" y1="588.18864" x2="516.545" y2="603.98865" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_30">
+        <path d="M 645.25 310.0994 L 645.25 334.2997 L 516.545 334.2997 L 
516.545 348.6" marker-end="url(#FilledArrow_Marker)" stroke="black" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_29">
+        <path d="M 645.25 310.0994 L 645.25 334.2997 L 772.5087 334.2997 L 
772.5087 348.6" marker-end="url(#FilledArrow_Marker)" stroke="black" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_28">
+        <line x1="516.545" y1="488.5" x2="516.545" y2="515.6003" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_27">
+        <line x1="645.25" y1="148.36236" x2="645.25" y2="170.19941" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_26">
+        <path d="M 654.3917 68.22263 L 649.5438 65.87729 C 649.0865 65.655816 
648.80235 65.21091 648.80235 64.71591 L 648.80235 63.05561 C 648.91856 62.91811 
649.0409 62.76146 649.1672 62.5886 C 649.796 61.72923 650.2999 60.77263 
650.6663 59.740895 C 651.3824 59.423174 651.8472 58.738134 651.8472 57.9647 L 
651.8472 56.000427 C 651.8472 55.52753 651.6645 55.06936 651.33974 54.71137 L 
651.33974 52.09938 C 651.36816 51.82929 651.4798 50.22153 650.2781 48.895156 C 
649.2357 47.74458 647.5443  [...]
+      </g>
+      <g id="Line_25">
+        <line x1="484.08495" y1="420.8609" x2="484.08495" y2="439.6446" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_24">
+        <line x1="556.26055" y1="449.5446" x2="556.26055" y2="430.7609" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_23">
+        <path d="M 516.545 356.04432 L 516.545 366.04432 L 516.21 373.4526 L 
515.875 380.9526 L 515.875 380.9609" marker-end="url(#FilledArrow_Marker)" 
stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_22">
+        <line x1="516.545" y1="519.8656" x2="516.545" y2="548.28864" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_21">
+        <path d="M 772.5087 352.5447 L 772.5087 362.5447 L 772.46185 371.7028 
L 772.415 379.2028 L 772.415 380.9609" marker-end="url(#FilledArrow_Marker)" 
stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_20">
+        <rect x="625.994" y="85.41478" width="38.512" height="11" 
fill="white"/>
+        <text transform="translate(630.994 85.41478)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="0" y="8">1</tspan>
+          <tspan font-family="PingFang SC" font-weight="bold" font-size="8" 
fill="black" y="8"> (0ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_19">
+        <rect x="626.55" y="253.3378" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(631.55 253.3378)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">5 (1ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_18">
+        <rect x="753.74075" y="426.9389" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(758.74075 426.9389)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">8 (4ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_17">
+        <rect x="493.397" y="590.8775" width="46.296" height="10.232056" 
fill="white"/>
+        <text transform="translate(498.397 590.8775)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="0" y="8">16 (16ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_16">
+        <rect x="626.55" y="156.1125" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(631.55 156.1125)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">2 (1ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_15">
+        <rect x="566.7774" y="329.18368" width="42.296" height="10.232056" 
fill="white"/>
+        <text transform="translate(569.7774 329.18368)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="0" y="8">10 (14ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_14">
+        <rect x="753.7659" y="365.78995" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(758.7659 365.78995)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">7 (0ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_13">
+        <rect x="493.397" y="497.85857" width="46.296" height="10.232056" 
fill="white"/>
+        <text transform="translate(498.397 497.85857)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="0" y="8">14 (16ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_12">
+        <rect x="458.71295" y="427.9262" width="50.744" height="10.232056" 
fill="white"/>
+        <text transform="translate(463.71295 427.9262)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="0" y="8">12 (109ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_11">
+        <rect x="535.33655" y="435.7531" width="41.848" height="10.232056" 
fill="white"/>
+        <text transform="translate(540.33655 435.7531)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="8864021e-19" y="8">13 (2ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_10">
+        <rect x="495.37137" y="366.44876" width="41.848" height="10.232056" 
fill="white"/>
+        <text transform="translate(500.37137 366.44876)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="8864021e-19" y="8">11 (1ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_9">
+        <rect x="495.621" y="532.5357" width="41.848" height="10.232056" 
fill="white"/>
+        <text transform="translate(500.621 532.5357)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="8864021e-19" y="8">15 (1ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_8">
+        <rect x="696.2264" y="329.18368" width="33.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(699.2264 329.18368)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">6 (3ms)</tspan>
+        </text>
+      </g>
+      <g id="Line_7">
+        <line x1="645.25" y1="175.95415" x2="645.25" y2="199.9043" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_6">
+        <rect x="626.55" y="185.45076" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(631.55 185.45076)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">3 (1ms)</tspan>
+        </text>
+      </g>
+      <g id="Line_5">
+        <line x1="606.1533" y1="239.8043" x2="606.1533" y2="260.9043" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_4">
+        <rect x="585.2293" y="245.48753" width="41.848" height="10.232056" 
fill="white"/>
+        <text transform="translate(590.2293 245.48753)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="8864021e-19" y="8">4 (21ms)</tspan>
+        </text>
+      </g>
+      <g id="Line_3">
+        <line x1="688.75" y1="270.8043" x2="688.75" y2="249.7043" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_2">
+        <rect x="670.05" y="254.42142" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(675.05 254.42142)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">9 (0ms)</tspan>
+        </text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git 
a/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/index.md 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/index.md
new file mode 100644
index 00000000000..b06b7e680b3
--- /dev/null
+++ 
b/content/blog/how-to-use-skywalking-for-distributed-tracing-in-istio/index.md
@@ -0,0 +1,321 @@
+---
+title: "How to Use SkyWalking for Distributed Tracing in Istio?"
+date: 2022-12-14
+author: "[Jimmy Song (tetrate.io)](https://jimmysong.io/en/)"
+description: "This blog will guide you to use SkyWalking for distributed 
tracing with Istio."
+tags:
+- Istio
+- Service Mesh
+---
+
+In cloud native applications, a request often needs to be processed through a 
series of APIs or backend services, some of which are parallel and some serial 
and located on different platforms or nodes. How do we determine the service 
paths and nodes a call goes through to help us troubleshoot the problem? This 
is where distributed tracing comes into play.
+
+This article covers:
+
+- How distributed tracing works
+- How to choose distributed tracing software
+- How to use distributed tracing in Istio
+- How to view distributed tracing data using Bookinfo and SkyWalking as 
examples
+
+## Distributed Tracing Basics
+
+Distributed tracing is a method for tracing requests in a distributed system 
to help users better understand, control, and optimize distributed systems. 
There are two concepts used in distributed tracing: TraceID and SpanID. You can 
see them in Figure 1 below.
+
+- **TraceID** is a globally unique ID that identifies the trace information of 
a request. All traces of a request belong to the same TraceID, and the TraceID 
remains constant throughout the trace of the request.
+- **SpanID** is a locally unique ID that identifies a request’s trace 
information at a certain time. A request generates different SpanIDs at 
different periods, and SpanIDs are used to distinguish trace information for a 
request at different periods.
+
+TraceID and SpanID are the basis of distributed tracing. They provide a 
uniform identifier for request tracing in distributed systems and facilitate 
users’ ability to query, manage, and analyze the trace information of requests.
+
+![img](f1.svg)
+
+*Figure 1: Trace and span*
+
+The following is the process of distributed tracing:
+
+- When a system receives a request, the distributed tracing system assigns a 
TraceID to the request, which is used to chain together the entire chain of 
invocations.
+- The distributed trace system generates a SpanID and ParentID for each 
service call within the system for the request, which is used to record the 
parent-child relationship of the call; a Span without a ParentID is used as the 
entry point of the call chain.
+- TraceID and SpanID are to be passed during each service call.
+- When viewing a distributed trace, query the full process of a particular 
request by TraceID.
+
+## How Istio Implements Distributed Tracing
+
+Istio’s distributed tracing is based on information collected by the Envoy 
proxy in the data plane. After a service request is intercepted by Envoy, Envoy 
adds tracing information as headers to the request forwarded to the destination 
workload. The following headers are relevant for distributed tracing:
+
+- As TraceID: x-request-id
+- Used to establish parent-child relationships for Span in the LightStep 
trace: x-ot-span-context</li
+- Used for Zipkin, also for Jaeger, SkyWalking, see 
[b3-propagation](https://github.com/openzipkin/b3-propagation):
+  - *x-b3-traceid*
+  - *x-b3-traceid*
+  - *x-b3-spanid*
+  - *x-b3-parentspanid*
+  - *x-b3-sampled*
+  - *x-b3-flags*
+  - *b3*
+- For Datadog:
+  - *x-datadog-trace-id*
+  - *x-datadog-parent-id*
+  - *x-datadog-sampling-priority*
+- For SkyWalking: *sw8*
+- For AWS X-Ray: *x-amzn-trace-id*
+
+For more information on how to use these headers, please see the [Envoy 
documentation](https://www.envoyproxy.io/docs/envoy/latest/configuration/http/http_conn_man/headers).
+
+Regardless of the language of your application, Envoy will generate the 
appropriate tracing headers for you at the Ingress Gateway and forward these 
headers to the upstream cluster. However, in order to utilize the distributed 
tracing feature, you must modify your application code to attach the tracing 
headers to upstream requests. Since neither the service mesh nor the 
application can automatically propagate these headers, you can integrate the 
agent for distributed tracing into the app [...]
+
+For example, look at the code of the Productpage service in the [Bookinfo 
application](https://istio.io/latest/docs/examples/bookinfo/). You can see that 
it integrates the Jaeger client library and synchronizes the header generated 
by Envoy with the HTTP requests to the Details and Reviews services in the 
*getForwardHeaders (request)* function.
+
+```python
+def getForwardHeaders(request):
+    headers = {}
+
+    # Using Jaeger agent to get the x-b3-* headers
+    span = get_current_span()
+    carrier = {}
+    tracer.inject(
+        span_context=span.context,
+        format=Format.HTTP_HEADERS,
+        carrier=carrier)
+
+    headers.update(carrier)
+
+    # Dealing with the non x-b3-* header manually
+    if 'user' in session:
+        headers['end-user'] = session['user']
+    incoming_headers = [
+        'x-request-id',
+        'x-ot-span-context',
+        'x-datadog-trace-id',
+        'x-datadog-parent-id',
+        'x-datadog-sampling-priority',
+        'traceparent',
+        'tracestate',
+        'x-cloud-trace-context',
+        'grpc-trace-bin',
+        'sw8',
+        'user-agent',
+        'cookie',
+        'authorization',
+        'jwt',
+    ]
+
+    for ihdr in incoming_headers:
+        val = request.headers.get(ihdr)
+        if val is not None:
+            headers[ihdr] = val
+
+    return headers
+```
+
+For more information, the [Istio 
documentation](https://istio.io/latest/about/faq/#distributed-tracing) provides 
answers to frequently asked questions about distributed tracing in Istio.
+
+## How to Choose A Distributed Tracing System
+
+Distributed tracing systems are similar in principle. There are many such 
systems on the market, such as [Apache 
SkyWalking](https://github.com/apache/skywalking), 
[Jaeger](https://github.com/jaegertracing/jaeger), 
[Zipkin](https://github.com/openzipkin/zipkin/), 
[Lightstep](https://lightstep.com/), 
[Pinpoint](https://github.com/pinpoint-apm/pinpoint), and so on. For our 
purposes here, we will choose three of them and compare them in several 
dimensions. Here are our inclusion criteria:
+
+- They are currently the most popular open-source distributed tracing systems.
+- All are based on the OpenTracing specification.
+- They support integration with Istio and Envoy.
+
+| Items               | Apache SkyWalking                                      
      | Jaeger                                       | Zipkin                   
                    |
+| ------------------- | 
------------------------------------------------------------ | 
-------------------------------------------- | 
-------------------------------------------- |
+| Implementations     | Language-based probes, service mesh probes, eBPF 
agent, third-party instrumental libraries (Zipkin currently supported) | 
Language-based probes                        | Language-based probes            
            |
+| Database            | ES, H2, MySQL, TiDB, Sharding-sphere, BanyanDB         
      | ES, MySQL, Cassandra, Memory                 | ES, MySQL, Cassandra, 
Memory                 |
+| Supported Languages | Java, Rust, PHP, NodeJS, Go, Python, C++, .Net, Lua    
      | Java, Go, Python, NodeJS, C#, PHP, Ruby, C++ | Java, Go, Python, 
NodeJS, C#, PHP, Ruby, C++ |
+| Initiator           | Personal                                               
      | Uber                                         | Twitter                  
                    |
+| Governance          | Apache Foundation                                      
      | CNCF                                         | CNCF                     
                    |
+| Version             | 9.3.0                                                  
      | 1.39.0                                       | 2.23.19                  
                    |
+| Stars               | 20.9k                                                  
      | 16.8k                                        | 15.8k                    
                    |
+
+Although Apache SkyWalking’s agent does not support as many languages as 
Jaeger and Zipkin, SkyWalking’s implementation is richer and compatible with 
Jaeger and Zipkin trace data, and development is more active, so it is one of 
the best choices for building a telemetry platform.
+
+## Demo
+
+Refer to the [Istio 
documentation](https://istio.io/latest/docs/tasks/observability/distributed-tracing/skywalking/)
 to install and configure Apache SkyWalking.
+
+### Environment Description
+
+The following is the environment for our demo:
+
+- Kubernetes 1.24.5
+- Istio 1.16
+- SkyWalking 9.1.0
+
+### Install Istio
+
+Before installing Istio, you can check the environment for any problems:
+
+```bash
+$ istioctl experimental precheck
+✔ No issues found when checking the cluster. Istio is safe to install or 
upgrade!
+  To get started, check out https://istio.io/latest/docs/setup/getting-started/
+```
+
+Then install Istio and configure the destination for sending tracing messages 
as SkyWalking:
+
+```bash
+# Initial Istio Operator
+istioctl operator init
+# Configure tracing destination
+kubectl apply -f - <<EOF
+apiVersion: install.istio.io/v1alpha1
+kind: IstioOperator
+metadata:
+  namespace: istio-system
+  name: istio-with-skywalking
+spec:
+  meshConfig:
+    defaultProviders:
+      tracing:
+      - "skywalking"
+    enableTracing: true
+    extensionProviders:
+    - name: "skywalking"
+      skywalking:
+        service: tracing.istio-system.svc.cluster.local
+        port: 11800
+EOF
+```
+
+## Deploy Apache SkyWalking
+
+Istio 1.16 supports distributed tracing using Apache SkyWalking. Install 
SkyWalking by executing the following code:
+
+```bash
+kubectl apply -f 
+https://raw.githubusercontent.com/istio/istio/release-1.16/samples/addons/extras/skywalking.yaml
+```
+
+It will install the following components under the *istio-system* namespace:
+
+- [SkyWalking Observability Analysis Platform 
(OAP)](https://skywalking.apache.org/docs/main/v9.3.0/en/concepts-and-designs/backend-overview/):
 Used to receive trace data, supports SkyWalking native data formats, Zipkin v1 
and v2 and Jaeger format.
+- [UI](https://skywalking.apache.org/docs/main/v9.3.0/en/ui/readme/): Used to 
query distributed trace data.
+
+For more information about SkyWalking, please refer to the [SkyWalking 
documentation](https://skywalking.apache.org/docs/main/v9.3.0/readme/).
+
+## Deploy the Bookinfo Application
+
+Execute the following command to install the bookinfo application:
+
+```bash
+kubectl label namespace default istio-injection=enabled
+kubectl apply -f samples/bookinfo/platform/kube/bookinfo.yaml
+kubectl apply -f samples/bookinfo/networking/bookinfo-gateway.yaml
+```
+
+Launch the SkyWalking UI:
+
+```bash
+istioctl dashboard skywalking
+```
+
+Figure 2 shows all the services available in the bookinfo application:
+
+![img](f2.jpg)
+
+*Figure 2: SkyWalking General Service page*
+
+You can also see information about instances, endpoints, topology, tracing, 
etc. For example, Figure 3 shows the service topology of the bookinfo 
application:
+
+![img](f3.jpg)
+
+*Figure 3: Topology diagram of the Bookinfo application*
+
+Tracing views in SkyWalking can be displayed in a variety of formats, 
including list, tree, table, and statistics. See Figure 4:
+
+![img](f4.jpg)
+
+*Figure 4: SkyWalking General Service trace supports multiple display formats*
+
+To facilitate our examination, set the sampling rate of the trace to 100%:
+
+```bash
+kubectl apply -f - <<EOF
+apiVersion: telemetry.istio.io/v1alpha1
+kind: Telemetry
+metadata:
+  name: mesh-default
+  namespace: istio-system
+spec:
+  tracing:
+  - randomSamplingPercentage: 100.00
+EOF
+```
+
+> **Important:** *It’s generally not good practice to set the sampling rate to 
100% in a production environment. To avoid the overhead of generating too many 
trace logs in production, please adjust the sampling strategy (sampling 
percentage).*
+
+## Uninstall
+
+After experimenting, uninstall Istio and SkyWalking by executing the following 
command.
+
+```bash
+samples/bookinfo/platform/kube/cleanup.sh
+istioctl unintall --purge
+kubectl delete namespace istio-system
+```
+
+## Understanding the Bookinfo Tracing Information
+
+Navigate to the General Service tab in the Apache SkyWalking UI, and you can 
see the trace information for the most recent *istio-ingressgateway* service, 
as shown in Figure 5. Click on each span to see the details.
+
+![img](f5.jpg)
+
+*Figure 5: The table view shows the basic information about each span.*
+
+Switching to the list view, you can see the execution order and duration of 
each span, as shown in Figure 6:
+
+![img](f6.jpg)
+
+*Figure 6: List display*
+
+You might want to know why such a straightforward application generates so 
much span data. Because after we inject the Envoy proxy into the pod, every 
request between services will be intercepted and processed by Envoy, as shown 
in Figure 7:
+
+![img](f7.svg)
+
+*Figure 7: Envoy intercepts requests to generate a span*
+
+The tracing process is shown in Figure 8:
+
+![img](f8.svg)
+
+*Figure 8: Trace of the Bookinfo application*
+
+We give each span a label with a serial number, and the time taken is 
indicated in parentheses. For illustration purposes, we have summarized all 
spans in the table below.
+
+| No.  | Endpoint     | Total Duration (ms) | Component Duration (ms) | 
Current Service      | Description                                 |
+| ---- | ------------ | ------------------- | ----------------------- | 
-------------------- | ------------------------------------------- |
+| 1    | /productpage | 190                 | 0                       | 
istio-ingressgateway | Envoy Outbound                              |
+| 2    | /productpage | 190                 | 1                       | 
istio-ingressgateway | Ingress -> Productpage network transmission |
+| 3    | /productpage | 189                 | 1                       | 
productpage          | Envoy Inbound                               |
+| 4    | /productpage | 188                 | 21                      | 
productpage          | Application internal processing             |
+| 5    | /details/0   | 8                   | 1                       | 
productpage          | Envoy Outbound                              |
+| 6    | /details/0   | 7                   | 3                       | 
productpage          | Productpage -> Details network transmission |
+| 7    | /details/0   | 4                   | 0                       | 
details              | Envoy Inbound                               |
+| 8    | /details/0   | 4                   | 4                       | 
details              | Application internal processing             |
+| 9    | /reviews/0   | 159                 | 0                       | 
productpage          | Envoy Outbound                              |
+| 10   | /reviews/0   | 159                 | 14                      | 
productpage          | Productpage -> Reviews network transmission |
+| 11   | /reviews/0   | 145                 | 1                       | 
reviews              | Envoy Inbound                               |
+| 12   | /reviews/0   | 144                 | 109                     | 
reviews              | Application internal processing             |
+| 13   | /ratings/0   | 35                  | 2                       | 
reviews              | Envoy Outbound                              |
+| 14   | /ratings/0   | 33                  | 16                      | 
reviews              | Reviews -> Ratings network transmission     |
+| 15   | /ratings/0   | 17                  | 1                       | 
ratings              | Envoy Inbound                               |
+| 16   | /ratings/0   | 16                  | 16                      | 
ratings              | Application internal processing             |
+
+From the above information, it can be seen that:
+
+- The total time consumed for this request is 190 ms.
+- In Istio sidecar mode, each traffic flow in and out of the application 
container must pass through the Envoy proxy once, each time taking 0 to 2 ms.
+- Network requests between Pods take between 1 and 16ms.
+- This is because the data itself has errors and the start time of the Span is 
not necessarily equal to the end time of the parent Span.
+- We can see that the most time-consuming part is the Reviews application, 
which takes 109 ms so that we can optimize it for that application.
+
+## Summary
+
+Distributed tracing is an indispensable tool for analyzing performance and 
troubleshooting modern distributed applications. In this tutorial, we’ve seen 
how, with just a few minor changes to your application code to propagate 
tracing headers, Istio makes distributed tracing simple to use. We’ve also 
reviewed [Apache SkyWalking](https://skywalking.apache.org/) as one of the best 
distributed tracing systems that Istio supports. It is a fully functional 
platform for cloud native application [...]
+
+---
+
+If you’re new to service mesh and Kubernetes security, we have a bunch of free 
online courses [available at Tetrate Academy](https://tetr8.io/academy) that 
will quickly get you up to speed with Istio and Envoy.
+
+If you’re looking for a fast way to get to production with Istio, check out 
[Tetrate Istio Distribution (TID)](https://tetr8.io/tid). TID is Tetrate’s 
hardened, fully upstream Istio distribution, with FIPS-verified builds and 
support available. It’s a great way to get started with Istio knowing you have 
a trusted distribution to begin with, have an expert team supporting you, and 
also have the option to get to FIPS compliance quickly if you need to.
+
+Once you have Istio up and running, you will probably need simpler ways to 
manage and secure your services beyond what’s available in Istio, that’s where 
Tetrate Service Bridge comes in. You can learn more about how Tetrate Service 
Bridge makes service mesh more secure, manageable, and resilient 
[here](https://tetr8.io/tsb), or [contact us for a quick 
demo](https://tetr8.io/contact).
diff --git 
a/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f1.svg 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f1.svg
new file mode 100644
index 00000000000..8f9dee43ad3
--- /dev/null
+++ b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f1.svg
@@ -0,0 +1,176 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/"; version="1.1" 
xmlns:xl="http://www.w3.org/1999/xlink"; xmlns="http://www.w3.org/2000/svg"; 
viewBox="134 170 1026 461" width="1026" height="461">
+  <defs>
+    <marker orient="auto" overflow="visible" markerUnits="strokeWidth" 
id="FilledArrow_Marker" stroke-linejoin="miter" stroke-miterlimit="10" 
viewBox="-1 -3 7 6" markerWidth="7" markerHeight="6" color="black">
+      <g>
+        <path d="M 4.8 0 L 0 -1.8 L 0 1.8 Z" fill="currentColor" 
stroke="currentColor" stroke-width="1"/>
+      </g>
+    </marker>
+  </defs>
+  <g id="basic" fill-opacity="1" fill="none" stroke="none" stroke-opacity="1" 
stroke-dasharray="none">
+    <title>basic</title>
+    <rect fill="white" x="134" y="170" width="1026" height="461"/>
+    <g id="basic_Layer_1">
+      <title>Layer 1</title>
+      <g id="Graphic_42">
+        <rect x="134.25" y="170" width="1025" height="461" fill="white"/>
+      </g>
+      <g id="Graphic_2">
+        <rect x="643" y="235.5" width="500" height="40" fill="#333"/>
+        <text transform="translate(648 245.76794)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="239.52" y="16">A</tspan>
+        </text>
+      </g>
+      <g id="Graphic_3">
+        <rect x="685" y="307.73206" width="458" height="40" fill="#333"/>
+        <text transform="translate(690 318)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="218.368" y="16">B</tspan>
+        </text>
+      </g>
+      <g id="Graphic_4">
+        <rect x="716" y="370.61603" width="414.5" height="40" fill="#333"/>
+        <text transform="translate(721 380.88397)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="196.322" y="16">C</tspan>
+        </text>
+      </g>
+      <g id="Graphic_5">
+        <rect x="928" y="433.5" width="202.5" height="40" fill="#333"/>
+        <text transform="translate(933 443.76794)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="90.322" y="16">D</tspan>
+        </text>
+      </g>
+      <g id="Graphic_6">
+        <rect x="704.5" y="496.384" width="215" height="40" fill="#333"/>
+        <text transform="translate(709.5 506.6519)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="97.316" y="16">E</tspan>
+        </text>
+      </g>
+      <g id="Graphic_7">
+        <rect x="629.8546" y="246" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Graphic_8">
+        <rect x="629.8546" y="502.5" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Line_9">
+        <path d="M 629.8546 255.81915 L 616.5 255.81915 L 616.5 512.5 L 
629.8546 512.5" stroke="black" stroke-linecap="round" stroke-linejoin="round" 
stroke-width="2"/>
+      </g>
+      <g id="Graphic_10">
+        <text transform="translate(539.784 380.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">TRACE</tspan>
+        </text>
+      </g>
+      <g id="Graphic_20">
+        <rect x="643" y="550" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Graphic_19">
+        <rect x="1144" y="550" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Line_18">
+        <path d="M 646.75 570 L 646.75 586.1386 L 1144 586.1386 L 1144 570" 
stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Graphic_17">
+        <text transform="translate(866.464 597)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="5684342e-20" y="16">SPANS</tspan>
+        </text>
+      </g>
+      <g id="Graphic_21">
+        <text transform="translate(1082 183.53589)" fill="black">
+          <tspan font-family="Helvetica Neue" font-style="italic" 
font-weight="bold" font-size="16" fill="black" x="0" y="16">time</tspan>
+        </text>
+      </g>
+      <g id="Graphic_22">
+        <rect x="1135.5" y="199" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Graphic_23">
+        <rect x="629.8546" y="199" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Line_24">
+        <line x1="637.3546" y1="209" x2="1122.6" y2="209" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-dasharray="8.0,8.0" stroke-width="2"/>
+      </g>
+      <g id="Graphic_25">
+        <circle cx="411.506" cy="285.5" r="22.5000359527927" fill="white"/>
+        <circle cx="411.506" cy="285.5" r="22.5000359527927" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(398.506 275.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="7.52" y="16">A</tspan>
+        </text>
+      </g>
+      <g id="Graphic_26">
+        <circle cx="335.81" cy="397.5" r="22.5000359527927" fill="white"/>
+        <circle cx="335.81" cy="397.5" r="22.5000359527927" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(322.81 387.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="7.368" y="16">B</tspan>
+        </text>
+      </g>
+      <g id="Graphic_27">
+        <circle cx="194.864" cy="588.5" r="22.5000359527927" fill="white"/>
+        <circle cx="194.864" cy="588.5" r="22.5000359527927" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(181.864 578.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="7.072" y="16">D</tspan>
+        </text>
+      </g>
+      <g id="Graphic_28">
+        <circle cx="260.114" cy="502" r="22.5000359527927" fill="white"/>
+        <circle cx="260.114" cy="502" r="22.5000359527927" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(247.114 492.26794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="7.072" y="16">C</tspan>
+        </text>
+      </g>
+      <g id="Graphic_29">
+        <circle cx="411.506" cy="502" r="22.5000359527927" fill="white"/>
+        <circle cx="411.506" cy="502" r="22.5000359527927" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(398.506 492.26794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="7.816" y="16">E</tspan>
+        </text>
+      </g>
+      <g id="Line_30">
+        <line x1="398.90456" y1="304.14513" x2="355.63493" y2="368.16697" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Line_31">
+        <line x1="322.6089" y1="415.7244" x2="280.88263" y2="473.32845" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Line_32">
+        <line x1="349.0111" y1="415.7244" x2="390.73737" y2="473.32845" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Line_33">
+        <line x1="246.56256" y1="519.96475" x2="216.184" y2="560.2367" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Line_34">
+        <line x1="411.506" y1="225.5" x2="411.506" y2="250.1" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="2"/>
+      </g>
+      <g id="Graphic_35">
+        <rect x="407.756" y="205.5" width="7.5" height="20" fill="white"/>
+      </g>
+      <g id="Graphic_36">
+        <text transform="translate(382.178 194)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">TraceID</tspan>
+        </text>
+      </g>
+      <g id="Graphic_37">
+        <text transform="translate(311.946 318)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">Span2</tspan>
+        </text>
+      </g>
+      <g id="Graphic_38">
+        <text transform="translate(171 532)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">Span4</tspan>
+        </text>
+      </g>
+      <g id="Graphic_39">
+        <text transform="translate(236.25 428)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">Span3</tspan>
+        </text>
+      </g>
+      <g id="Graphic_40">
+        <text transform="translate(387.642 432)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">Span5</tspan>
+        </text>
+      </g>
+      <g id="Graphic_41">
+        <text transform="translate(423.114 231)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="0" y="16">Span1</tspan>
+        </text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git 
a/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f2.jpg 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f2.jpg
new file mode 100644
index 00000000000..643b4260e00
Binary files /dev/null and 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f2.jpg 
differ
diff --git 
a/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f3.jpg 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f3.jpg
new file mode 100644
index 00000000000..e246a55c883
Binary files /dev/null and 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f3.jpg 
differ
diff --git 
a/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f4.jpg 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f4.jpg
new file mode 100644
index 00000000000..640735cfa99
Binary files /dev/null and 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f4.jpg 
differ
diff --git 
a/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f5.jpg 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f5.jpg
new file mode 100644
index 00000000000..2c9a279d93a
Binary files /dev/null and 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f5.jpg 
differ
diff --git 
a/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f6.jpg 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f6.jpg
new file mode 100644
index 00000000000..d381d6840a5
Binary files /dev/null and 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f6.jpg 
differ
diff --git 
a/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f7.svg 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f7.svg
new file mode 100644
index 00000000000..da538ad4230
--- /dev/null
+++ b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f7.svg
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/"; version="1.1" 
xmlns:xl="http://www.w3.org/1999/xlink"; xmlns="http://www.w3.org/2000/svg"; 
viewBox="794 65 659 244" width="659" height="244">
+  <defs>
+    <marker orient="auto" overflow="visible" markerUnits="strokeWidth" 
id="FilledArrow_Marker" stroke-linejoin="miter" stroke-miterlimit="10" 
viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black">
+      <g>
+        <path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" 
stroke="currentColor" stroke-width="1"/>
+      </g>
+    </marker>
+  </defs>
+  <g id="span" fill-opacity="1" fill="none" stroke="none" stroke-opacity="1" 
stroke-dasharray="none">
+    <title>span</title>
+    <rect fill="white" x="794" y="65" width="659" height="244"/>
+    <g id="span_Layer_1">
+      <title>Layer 1</title>
+      <g id="Graphic_35">
+        <rect x="794.955" y="65.375" width="657.5" height="242.75" 
fill="white"/>
+      </g>
+      <g id="Graphic_18">
+        <rect x="1016.2931" y="82" width="214.82375" height="209.5" 
fill="white"/>
+        <rect x="1016.2931" y="82" width="214.82375" height="209.5" 
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(1021.2931 87)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="18" fill="black" x="85.41087" y="18">Pod</tspan>
+        </text>
+      </g>
+      <g id="Graphic_17">
+        <rect x="1063.705" y="233.5" width="120" height="40" fill="#333"/>
+        <text transform="translate(1068.705 243.76794)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="39.744" y="16">App</tspan>
+        </text>
+      </g>
+      <g id="Graphic_16">
+        <rect x="1063.705" y="123.5" width="120" height="40" fill="#f15623"/>
+        <text transform="translate(1068.705 133.76794)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="31.872" y="16">Envoy</tspan>
+        </text>
+      </g>
+      <g id="Graphic_19">
+        <rect x="803.5" y="119.75" width="108.5" height="47.5" fill="white"/>
+        <rect x="803.5" y="119.75" width="108.5" height="47.5" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(808.5 133.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x=".666" y="16">Downstream</tspan>
+        </text>
+      </g>
+      <g id="Graphic_20">
+        <rect x="1335.41" y="119.75" width="108.5" height="47.5" fill="white"/>
+        <rect x="1335.41" y="119.75" width="108.5" height="47.5" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(1340.41 133.76794)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="black" x="11.922" y="16">Upstream</tspan>
+        </text>
+      </g>
+      <g id="Line_21">
+        <line x1="912" y1="143.5" x2="1053.805" y2="143.5" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_22">
+        <line x1="1183.705" y1="143.5" x2="1325.51" y2="143.5" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_23">
+        <path d="M 943.8234 128.76794 L 985.8616 128.76794 L 985.8616 
152.33923 C 973.2502 149.39282 956.4349 161.17847 943.8234 155.28564 Z" 
fill="white"/>
+        <path d="M 943.8234 128.76794 L 985.8616 128.76794 L 985.8616 
152.33923 C 973.2502 149.39282 956.4349 161.17847 943.8234 155.28564 Z" 
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(948.8234 134.35275)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="12" fill="black" x="1.457125" y="12">Span</tspan>
+        </text>
+      </g>
+      <g id="Line_25">
+        <line x1="1089.377" y1="163.5" x2="1089.377" y2="223.6" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_26">
+        <line x1="1155.455" y1="233.5" x2="1155.455" y2="173.4" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_29">
+        <rect x="929.6506" y="93" width="68.992" height="28.447998" 
fill="white"/>
+        <text transform="translate(934.6506 98)" fill="black">
+          <tspan font-family="Helvetica Neue" font-size="16" fill="black" 
x="0" y="15">Inbound</tspan>
+        </text>
+      </g>
+      <g id="Graphic_30">
+        <rect x="1242.2394" y="93" width="82.048" height="28.447998" 
fill="white"/>
+        <text transform="translate(1247.2394 98)" fill="black">
+          <tspan font-family="Helvetica Neue" font-size="16" fill="black" 
x="0" y="15">Outbound</tspan>
+        </text>
+      </g>
+      <g id="Graphic_31">
+        <path d="M 1068.3579 181.09268 L 1110.3961 181.09268 L 1110.3961 
204.66397 C 1097.7847 201.71756 1080.9693 213.5032 1068.3579 207.61038 Z" 
fill="white"/>
+        <path d="M 1068.3579 181.09268 L 1110.3961 181.09268 L 1110.3961 
204.66397 C 1097.7847 201.71756 1080.9693 213.5032 1068.3579 207.61038 Z" 
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(1073.3579 186.67749)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="12" fill="black" x="1.457125" y="12">Span</tspan>
+        </text>
+      </g>
+      <g id="Graphic_32">
+        <path d="M 1134.4359 181.1825 L 1176.4741 181.1825 L 1176.4741 
204.7538 C 1163.8627 201.80739 1147.0473 213.59303 1134.4359 207.7002 Z" 
fill="white"/>
+        <path d="M 1134.4359 181.1825 L 1176.4741 181.1825 L 1176.4741 
204.7538 C 1163.8627 201.80739 1147.0473 213.59303 1134.4359 207.7002 Z" 
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(1139.4359 186.76732)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="12" fill="black" x="1.457125" y="12">Span</tspan>
+        </text>
+      </g>
+      <g id="Graphic_33">
+        <path d="M 1258.3616 128.76794 L 1300.3999 128.76794 L 1300.3999 
152.33923 C 1287.7884 149.39282 1270.9731 161.17847 1258.3616 155.28564 Z" 
fill="white"/>
+        <path d="M 1258.3616 128.76794 L 1300.3999 128.76794 L 1300.3999 
152.33923 C 1287.7884 149.39282 1270.9731 161.17847 1258.3616 155.28564 Z" 
stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <text transform="translate(1263.3616 134.35275)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="12" fill="black" x="1.457125" y="12">Span</tspan>
+        </text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git 
a/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f8.svg 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f8.svg
new file mode 100644
index 00000000000..89125e84776
--- /dev/null
+++ b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/f8.svg
@@ -0,0 +1,239 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/"; version="1.1" 
xmlns:xl="http://www.w3.org/1999/xlink"; xmlns="http://www.w3.org/2000/svg"; 
viewBox="423 28 445 649" width="445" height="649">
+  <defs>
+    <marker orient="auto" overflow="visible" markerUnits="strokeWidth" 
id="FilledArrow_Marker" stroke-linejoin="miter" stroke-miterlimit="10" 
viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black">
+      <g>
+        <path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" 
stroke="currentColor" stroke-width="1"/>
+      </g>
+    </marker>
+  </defs>
+  <g id="bookinfo-spans-with-time" fill-opacity="1" fill="none" stroke="none" 
stroke-opacity="1" stroke-dasharray="none">
+    <title>bookinfo-spans-with-time</title>
+    <rect fill="white" x="423" y="28" width="445" height="649"/>
+    <g id="bookinfo-spans-with-time_Layer_1">
+      <title>Layer 1</title>
+      <g id="Graphic_48">
+        <rect x="423" y="28" width="444.5" height="648.2003" fill="white"/>
+      </g>
+      <g id="Graphic_47">
+        <rect x="575.25" y="180.09941" width="140" height="130" fill="white"/>
+        <rect x="575.25" y="180.09941" width="140" height="130" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_46">
+        <rect x="575.25" y="108.36236" width="140" height="40" fill="#f15623"/>
+        <text transform="translate(580.25 118.6303)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="1.304" y="16">Ingress Gateway</tspan>
+        </text>
+      </g>
+      <g id="Graphic_45">
+        <rect x="585.25" y="270.8043" width="120" height="30" fill="#333"/>
+        <text transform="translate(590.25 276.07223)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="5.808" y="16">Productpage</tspan>
+        </text>
+      </g>
+      <g id="Graphic_44">
+        <rect x="585.25" y="209.8043" width="120" height="30" fill="#f15623"/>
+        <text transform="translate(590.25 215.07223)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="31.872" y="16">Envoy</tspan>
+        </text>
+      </g>
+      <g id="Line_43">
+        <line x1="645.25" y1="76.6253" x2="645.25" y2="98.46236" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_42">
+        <line x1="645.25" y1="270.8043" x2="645.25" y2="249.7043" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_41">
+        <rect x="446.545" y="358.5" width="140" height="130" fill="white"/>
+        <rect x="446.545" y="358.5" width="140" height="130" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_40">
+        <rect x="455.875" y="449.5446" width="120" height="30" fill="#333"/>
+        <text transform="translate(460.875 454.81255)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="23.008" y="16">Reviews</tspan>
+        </text>
+      </g>
+      <g id="Graphic_39">
+        <rect x="455.875" y="390.8609" width="120" height="30" fill="#f15623"/>
+        <text transform="translate(460.875 396.12886)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="31.872" y="16">Envoy</tspan>
+        </text>
+      </g>
+      <g id="Graphic_38">
+        <rect x="702.5087" y="358.5" width="140" height="130" fill="white"/>
+        <rect x="702.5087" y="358.5" width="140" height="130" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_37">
+        <rect x="712.6025" y="449.5446" width="120" height="30" fill="#333"/>
+        <text transform="translate(717.6025 454.81255)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="28.648" y="16">Details</tspan>
+        </text>
+      </g>
+      <g id="Graphic_36">
+        <rect x="712.415" y="390.8609" width="120" height="30" fill="#f15623"/>
+        <text transform="translate(717.415 396.12886)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="31.872" y="16">Envoy</tspan>
+        </text>
+      </g>
+      <g id="Line_35">
+        <path d="M 772.415 420.8609 L 772.415 430.8609 L 772.5087 435.20276 L 
772.6025 435.20276 L 772.6025 439.6446" marker-end="url(#FilledArrow_Marker)" 
stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_34">
+        <rect x="446.545" y="525.5003" width="140" height="130" fill="white"/>
+        <rect x="446.545" y="525.5003" width="140" height="130" stroke="gray" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_33">
+        <rect x="456.545" y="613.88865" width="120" height="30" fill="#333"/>
+        <text transform="translate(461.545 619.1566)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="25.824" y="16">Ratings</tspan>
+        </text>
+      </g>
+      <g id="Graphic_32">
+        <rect x="456.545" y="558.18864" width="120" height="30" 
fill="#f15623"/>
+        <text transform="translate(461.545 563.4566)" fill="white">
+          <tspan font-family="Helvetica Neue" font-weight="bold" 
font-size="16" fill="white" x="31.872" y="16">Envoy</tspan>
+        </text>
+      </g>
+      <g id="Line_31">
+        <line x1="516.545" y1="588.18864" x2="516.545" y2="603.98865" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_30">
+        <path d="M 645.25 310.0994 L 645.25 334.2997 L 516.545 334.2997 L 
516.545 348.6" marker-end="url(#FilledArrow_Marker)" stroke="black" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_29">
+        <path d="M 645.25 310.0994 L 645.25 334.2997 L 772.5087 334.2997 L 
772.5087 348.6" marker-end="url(#FilledArrow_Marker)" stroke="black" 
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_28">
+        <line x1="516.545" y1="488.5" x2="516.545" y2="515.6003" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_27">
+        <line x1="645.25" y1="148.36236" x2="645.25" y2="170.19941" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_26">
+        <path d="M 654.3917 68.22263 L 649.5438 65.87729 C 649.0865 65.655816 
648.80235 65.21091 648.80235 64.71591 L 648.80235 63.05561 C 648.91856 62.91811 
649.0409 62.76146 649.1672 62.5886 C 649.796 61.72923 650.2999 60.77263 
650.6663 59.740895 C 651.3824 59.423174 651.8472 58.738134 651.8472 57.9647 L 
651.8472 56.000427 C 651.8472 55.52753 651.6645 55.06936 651.33974 54.71137 L 
651.33974 52.09938 C 651.36816 51.82929 651.4798 50.22153 650.2781 48.895156 C 
649.2357 47.74458 647.5443  [...]
+      </g>
+      <g id="Line_25">
+        <line x1="484.08495" y1="420.8609" x2="484.08495" y2="439.6446" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_24">
+        <line x1="556.26055" y1="449.5446" x2="556.26055" y2="430.7609" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_23">
+        <path d="M 516.545 356.04432 L 516.545 366.04432 L 516.21 373.4526 L 
515.875 380.9526 L 515.875 380.9609" marker-end="url(#FilledArrow_Marker)" 
stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_22">
+        <line x1="516.545" y1="519.8656" x2="516.545" y2="548.28864" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Line_21">
+        <path d="M 772.5087 352.5447 L 772.5087 362.5447 L 772.46185 371.7028 
L 772.415 379.2028 L 772.415 380.9609" marker-end="url(#FilledArrow_Marker)" 
stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_20">
+        <rect x="625.994" y="85.41478" width="38.512" height="11" 
fill="white"/>
+        <text transform="translate(630.994 85.41478)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="0" y="8">1</tspan>
+          <tspan font-family="PingFang SC" font-weight="bold" font-size="8" 
fill="black" y="8"> (0ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_19">
+        <rect x="626.55" y="253.3378" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(631.55 253.3378)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">5 (1ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_18">
+        <rect x="753.74075" y="426.9389" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(758.74075 426.9389)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">8 (4ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_17">
+        <rect x="493.397" y="590.8775" width="46.296" height="10.232056" 
fill="white"/>
+        <text transform="translate(498.397 590.8775)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="0" y="8">16 (16ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_16">
+        <rect x="626.55" y="156.1125" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(631.55 156.1125)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">2 (1ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_15">
+        <rect x="566.7774" y="329.18368" width="42.296" height="10.232056" 
fill="white"/>
+        <text transform="translate(569.7774 329.18368)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="0" y="8">10 (14ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_14">
+        <rect x="753.7659" y="365.78995" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(758.7659 365.78995)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">7 (0ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_13">
+        <rect x="493.397" y="497.85857" width="46.296" height="10.232056" 
fill="white"/>
+        <text transform="translate(498.397 497.85857)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="0" y="8">14 (16ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_12">
+        <rect x="458.71295" y="427.9262" width="50.744" height="10.232056" 
fill="white"/>
+        <text transform="translate(463.71295 427.9262)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="0" y="8">12 (109ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_11">
+        <rect x="535.33655" y="435.7531" width="41.848" height="10.232056" 
fill="white"/>
+        <text transform="translate(540.33655 435.7531)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="8864021e-19" y="8">13 (2ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_10">
+        <rect x="495.37137" y="366.44876" width="41.848" height="10.232056" 
fill="white"/>
+        <text transform="translate(500.37137 366.44876)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="8864021e-19" y="8">11 (1ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_9">
+        <rect x="495.621" y="532.5357" width="41.848" height="10.232056" 
fill="white"/>
+        <text transform="translate(500.621 532.5357)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="8864021e-19" y="8">15 (1ms)</tspan>
+        </text>
+      </g>
+      <g id="Graphic_8">
+        <rect x="696.2264" y="329.18368" width="33.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(699.2264 329.18368)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">6 (3ms)</tspan>
+        </text>
+      </g>
+      <g id="Line_7">
+        <line x1="645.25" y1="175.95415" x2="645.25" y2="199.9043" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_6">
+        <rect x="626.55" y="185.45076" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(631.55 185.45076)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">3 (1ms)</tspan>
+        </text>
+      </g>
+      <g id="Line_5">
+        <line x1="606.1533" y1="239.8043" x2="606.1533" y2="260.9043" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_4">
+        <rect x="585.2293" y="245.48753" width="41.848" height="10.232056" 
fill="white"/>
+        <text transform="translate(590.2293 245.48753)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="8864021e-19" y="8">4 (21ms)</tspan>
+        </text>
+      </g>
+      <g id="Line_3">
+        <line x1="688.75" y1="270.8043" x2="688.75" y2="249.7043" 
marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" 
stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Graphic_2">
+        <rect x="670.05" y="254.42142" width="37.4" height="10.232056" 
fill="white"/>
+        <text transform="translate(675.05 254.42142)" fill="black">
+          <tspan font-family="Helvetica Neue" font-weight="bold" font-size="8" 
fill="black" x="7283063e-19" y="8">9 (0ms)</tspan>
+        </text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git 
a/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/index.md 
b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/index.md
new file mode 100644
index 00000000000..da30a896817
--- /dev/null
+++ b/content/zh/how-to-use-skywalking-for-distributed-tracing-in-istio/index.md
@@ -0,0 +1,303 @@
+---
+title: "如何在 Istio 中使用 SkyWalking 进行分布式追踪?"
+date: 2022-12-14
+author: "[宋净超 (tetrate.io)](https://jimmysong.io)"
+description: "这篇文章将介绍一些关于分布式追踪的基础知识以及如何在 Istio 中使用分布式追踪。"
+tags:
+- Istio
+- Service Mesh
+---
+
+在云原生应用中,一次请求往往需要经过一系列的 API 
或后台服务处理才能完成,这些服务有些是并行的,有些是串行的,而且位于不同的平台或节点。那么如何确定一次调用的经过的服务路径和节点以帮助我们进行问题排查?这时候就需要使用到分布式追踪。
+
+本文将向你介绍:
+
+- 分布式追踪的原理
+- 如何选择分布式追踪软件
+- 在 Istio 中如何使用分布式追踪
+- 以 Bookinfo 和 SkyWalking 为例说明如何查看分布式追踪数据
+
+## 分布式追踪基础
+
+分布式追踪是一种用来跟踪分布式系统中请求的方法,它可以帮助用户更好地理解、控制和优化分布式系统。分布式追踪中用到了两个概念:TraceID 和 SpanID。
+
+- TraceID 是一个全局唯一的 ID,用来标识一个请求的追踪信息。一个请求的所有追踪信息都属于同一个 TraceID,TraceID 
在整个请求的追踪过程中都是不变的;
+- SpanID 是一个局部唯一的 ID,用来标识一个请求在某一时刻的追踪信息。一个请求在不同的时间段会产生不同的 SpanID,SpanID 
用来区分一个请求在不同时间段的追踪信息;
+
+TraceID 和 SpanID 是分布式追踪的基础,它们为分布式系统中请求的追踪提供了一个统一的标识,方便用户查询、管理和分析请求的追踪信息。
+
+![img](f1.svg)
+
+下面是分布式追踪的过程:
+
+1. 当一个系统收到请求后,分布式追踪系统会为该请求分配一个 TraceID,用于串联起整个调用链;
+2. 分布式追踪系统会为该请求在系统内的每一次服务调用生成一个 SpanID 和 ParentID,用于记录调用的父子关系,没有 ParentID 的 
Span 将作为调用链的入口;
+3. 每个服务调用过程中都要传递 TraceID 和 SpanID;
+4. 在查看分布式追踪时,通过 TraceID 查询某次请求的全过程;
+
+## Istio 如何实现分布式追踪
+
+Istio 中的分布式追踪是基于数据平面中的 Envoy 代理实现的。服务请求在被劫持到 Envoy 中后,Envoy 在转发请求时会附加大量 
Header,其中与分布式追踪相关的有:
+
+- 作为 TraceID:`x-request-id`
+- 用于在 LightStep 追踪系统中建立 Span 的父子关系:`x-ot-span-context`
+- 用于 Zipkin,同时适用于 Jaeger、SkyWalking,详见 
[b3-propagation](https://github.com/openzipkin/b3-propagation):
+  - `x-b3-traceid`
+  - `x-b3-spanid`
+  - `x-b3-parentspanid`
+  - `x-b3-sampled`
+  - `x-b3-flags`
+  - `b3`
+- 用于 Datadog:
+  - `x-datadog-trace-id`
+  - `x-datadog-parent-id`
+  - `x-datadog-sampling-priority`
+- 用于 SkyWalking:`sw8`
+- 用于 AWS X-Ray:`x-amzn-trace-id`
+
+关于这些 Header 的详细用法请参考 [Envoy 
文档](https://www.envoyproxy.io/docs/envoy/latest/configuration/http/http_conn_man/headers)
 。
+
+Envoy 会在 Ingress Gateway 中为你产生用于追踪的 Header,不论你的应用程序使用何种语言开发,Envoy 都会将这些 Header 
转发到上游集群。但是,你还要对应用程序代码做一些小的修改,才能为使用分布式追踪功能。这是因为应用程序无法自动传播这些 
Header,可以在程序中集成分布式追踪的 Agent,或者在代码中手动传播这些 Header。Envoy 会将追踪数据发送到 tracer 
后端处理,然后就可以在 UI 中查看追踪数据了。
+
+例如在 Bookinfo 应用中的 Productpage 服务,如果你查看它的代码可以发现,其中集成了 Jaeger 客户端库,并在 
`getForwardHeaders (request)` 方法中将 Envoy 生成的 Header 同步给对 Details 和 Reviews 服务的 
HTTP 请求:
+
+```python
+def getForwardHeaders(request):
+    headers = {}
+
+    # 使用 Jaeger agent 获取 x-b3-* header
+    span = get_current_span()
+    carrier = {}
+    tracer.inject(
+        span_context=span.context,
+        format=Format.HTTP_HEADERS,
+        carrier=carrier)
+
+    headers.update(carrier)
+
+    # 手动处理非 x-b3-* header
+    if 'user' in session:
+        headers['end-user'] = session['user']
+    incoming_headers = [
+        'x-request-id',
+        'x-ot-span-context',
+        'x-datadog-trace-id',
+        'x-datadog-parent-id',
+        'x-datadog-sampling-priority',
+        'traceparent',
+        'tracestate',
+        'x-cloud-trace-context',
+        'grpc-trace-bin',
+        'sw8',
+        'user-agent',
+        'cookie',
+        'authorization',
+        'jwt',
+    ]
+
+    for ihdr in incoming_headers:
+        val = request.headers.get(ihdr)
+        if val is not None:
+            headers[ihdr] = val
+
+    return headers
+```
+
+关于 Istio 中分布式追踪的常见问题请见 [Istio 
文档](https://istio.io/latest/zh/about/faq/#distributed-tracing) 。
+
+## 分布式追踪系统如何选择
+
+分布式追踪系统的原理类似,市面上也有很多这样的系统,例如 [Apache 
SkyWalking](https://github.com/apache/skywalking) 
、[Jaeger](https://github.com/jaegertracing/jaeger) 
、[Zipkin](https://github.com/openzipkin/zipkin/) 
、[LightStep](https://lightstep.com/) 
、[Pinpoint](https://github.com/pinpoint-apm/pinpoint) 
等。我们将选择其中三个,从多个维度进行对比。之所以选择它们是因为:
+
+- 它们是当前最流行的开源分布式追踪系统;
+- 都是基于 OpenTracing 规范;
+- 都支持与 Istio 及 Envoy 集成;
+
+| 类别      | Apache SkyWalking                                            | 
Jaeger                                       | Zipkin                           
            |
+| :-------- | :----------------------------------------------------------- | 
:------------------------------------------- | 
:------------------------------------------- |
+| 实现方式  | 基于语言的探针、服务网格探针、eBPF agent、第三方指标库(当前支持 Zipkin) | 基于语言的探针              
                 | 基于语言的探针                               |
+| 数据存储  | ES、H2、MySQL、TiDB、Sharding-sphere、BanyanDB               | 
ES、MySQL、Cassandra、内存                   | ES、MySQL、Cassandra、内存                 
  |
+| 支持语言  | Java、Rust、PHP、NodeJS、Go、Python、C++、.NET、Lua          | 
Java、Go、Python、NodeJS、C#、PHP、Ruby、C++ | Java、Go、Python、NodeJS、C#、PHP、Ruby、C++ |
+| 发起者    | 个人                                                         | Uber   
                                      | Twitter                                 
     |
+| 治理方式  | Apache Foundation                                            | CNCF  
                                       | CNCF                                   
      |
+| 版本      | 9.3.0                                                        | 
1.39.0                                       | 2.23.19                          
            |
+| Star 数量 | 20.9k                                                        | 
16.8k                                        | 15.8k                            
            |
+
+分布式追踪系统对比表(数据截止时间 2022-12-07)
+
+虽然 Apache SkyWalking 的 Agent 支持的语言没有 Jaeger 和 Zipkin 多,但是 SkyWalking 
的实现方式更丰富,并且与 Jaeger、Zipkin 的追踪数据兼容,开发更为活跃,且为国人开发,中文资料丰富,是构建遥测平台的最佳选择之一。
+
+## 实验
+
+参考 [Istio 
文档](https://istio.io/latest/docs/tasks/observability/distributed-tracing/skywalking/)
 来安装和配置 Apache SkyWalking。
+
+### 环境说明
+
+以下是我们实验的环境:
+
+- Kubernetes 1.24.5
+- Istio 1.16
+- SkyWalking 9.1.0
+
+### 安装 Istio
+
+安装之前可以先检查下环境是否有问题:
+
+```bash
+$ istioctl experimental precheck
+✔ No issues found when checking the cluster. Istio is safe to install or 
upgrade!
+  To get started, check out https://istio.io/latest/docs/setup/getting-started/
+```
+
+然后安装 Istio 同时配置发送追踪信息的目的地为 SkyWalking:
+
+```bash
+# 初始化 Istio Operator
+istioctl operator init
+# 安装 Istio 并配置使用 SkyWalking
+kubectl apply -f - <<EOF
+apiVersion: install.istio.io/v1alpha1
+kind: IstioOperator
+metadata:
+  namespace: istio-system
+  name: istio-with-skywalking
+spec:
+  meshConfig:
+    defaultProviders:
+      tracing:
+      - "skywalking"
+    enableTracing: true
+    extensionProviders:
+    - name: "skywalking"
+      skywalking:
+        service: tracing.istio-system.svc.cluster.local
+        port: 11800
+EOF
+```
+
+### 部署 Apache SkyWalking
+
+Istio 1.16 支持使用 Apache SkyWalking 进行分布式追踪,执行下面的代码安装 SkyWalking:
+
+```bash
+kubectl apply -f 
https://raw.githubusercontent.com/istio/istio/release-1.16/samples/addons/extras/skywalking.yaml
+```
+
+它将在 `istio-system` 命名空间下安装:
+
+- [SkyWalking 
OAP](https://skywalking.apache.org/docs/main/v9.3.0/en/concepts-and-designs/backend-overview/)
 (Observability Analysis Platform) :用于接收追踪数据,支持 SkyWalking 原生数据格式,Zipkin v1 和 
v2 以及 Jaeger 格式。
+- [UI](https://skywalking.apache.org/docs/main/v9.3.0/en/ui/readme/) 
:用于查询分布式追踪数据。
+
+关于 SkyWalking 的详细信息请参考 [SkyWalking 
文档](https://skywalking.apache.org/docs/main/v9.3.0/readme/) 。
+
+### 部署 Bookinfo 应用
+
+执行下面的命令安装 bookinfo 示例:
+
+```bash
+kubectl label namespace default istio-injection=enabled
+kubectl apply -f samples/bookinfo/platform/kube/bookinfo.yaml
+kubectl apply -f samples/bookinfo/networking/bookinfo-gateway.yaml
+```
+
+打开 SkyWalking UI:
+
+```bash
+istioctl dashboard skywalking
+```
+
+SkyWalking 的 General Service 页面展示了 bookinfo 应用中的所有服务。
+
+![img](f2.jpg)
+
+你还可以看到实例、端点、拓扑、追踪等信息。例如下图展示了 bookinfo 应用的服务拓扑。
+
+![img](f3.jpg)
+
+SkyWalking 的追踪视图有多种显示形式,如列表、树形、表格和统计。
+
+![img](f4.jpg)SkyWalking 通用服务追踪支持多种显示样式
+
+为了方便我们检查,将追踪的采样率设置为 100%:
+
+```bash
+kubectl apply -f - <<EOF
+apiVersion: telemetry.istio.io/v1alpha1
+kind: Telemetry
+metadata:
+  name: mesh-default
+  namespace: istio-system
+spec:
+  tracing:
+  - randomSamplingPercentage: 100.00
+EOF
+```
+
+### 卸载
+
+在实验完后,执行下面的命令卸载 Istio 和 SkyWalking:
+
+```bash
+samples/bookinfo/platform/kube/cleanup.sh
+istioctl unintall --purge
+kubectl delete namespace istio-system
+```
+
+## Bookinfo demo 追踪信息说明
+
+在 Apache SkyWalking UI 中导航到 General Service 分页,查看最近的 `istio-ingressgateway` 
服务的追踪信息,表视图如下所示。图中展示了此次请求所有 Span 的基本信息,点击每个 Span 可以查看详细信息。
+
+![img](f5.jpg)
+
+切换为列表视图,可以看到每个 Span 的执行顺序及持续时间,如下图所示。
+
+![img](f6.jpg)
+
+你可能会感到困惑,为什么这么简单的一个应用会产生如此多的 Span 信息?因为我们为 Pod 注入了 Envoy 代理之后,每个服务间的请求都会被 
Envoy 拦截和处理,如下图所示。
+
+![img](f7.svg)
+
+整个追踪流程如下图所示。
+
+![img](f8.svg)
+
+图中给每一个 Span 标记了序号,并在括号里注明了耗时。为了便于说明我们将所有 Span 汇总在下面的表格中。
+
+| 序号 | 方法         | 总耗时(ms) | 组件耗时(ms) | 当前服务             | 说明                 
           |
+| :--- | :----------- | :----------- | :------------- | :------------------- | 
:------------------------------ |
+| 1    | /productpage | 190          | 0              | istio-ingressgateway | 
Envoy Outbound                  |
+| 2    | /productpage | 190          | 1              | istio-ingressgateway | 
Ingress -> Productpage 网络传输 |
+| 3    | /productpage | 189          | 1              | productpage          | 
Envoy Inbound                   |
+| 4    | /productpage | 188          | 21             | productpage          | 
应用内部处理                    |
+| 5    | /details/0   | 8            | 1              | productpage          | 
Envoy Outbound                  |
+| 6    | /details/0   | 7            | 3              | productpage          | 
Productpage -> Details 网络传输 |
+| 7    | /details/0   | 4            | 0              | details              | 
Envoy Inbound                   |
+| 8    | /details/0   | 4            | 4              | details              | 
应用内部                        |
+| 9    | /reviews/0   | 159          | 0              | productpage          | 
Envoy Outbound                  |
+| 10   | /reviews/0   | 159          | 14             | productpage          | 
Productpage -> Reviews 网络传输 |
+| 11   | /reviews/0   | 145          | 1              | reviews              | 
Envoy Inbound                   |
+| 12   | /reviews/0   | 144          | 109            | reviews              | 
应用内部处理                    |
+| 13   | /ratings/0   | 35           | 2              | reviews              | 
Envoy Outbound                  |
+| 14   | /ratings/0   | 33           | 16             | reviews              | 
Reviews -> Ratings 网络传输     |
+| 15   | /ratings/0   | 17           | 1              | ratings              | 
Envoy Inbound                   |
+| 16   | /ratings/0   | 16           | 16             | ratings              | 
应用内部处理                    |
+
+从以上信息可以发现:
+
+- 本次请求总耗时 190ms;
+- 在 Istio sidecar 模式下,每次流量在进出应用容器时都需要经过一次 Envoy 代理,每次耗时在 0 到 2 ms;
+- 在 Pod 间的网络请求耗时在 1 到 16ms 之间;
+- 将耗时做多的调用链 Ingress Gateway -> Productpage -> Reviews -> Ratings 上的所有耗时累计 182 
ms,小于请求总耗时 190ms,这是因为数据本身有误差,以及 Span 的开始时间并不一定等于父 Span 的结束时间,如果你在 SkyWalking 
的追踪页面,选择「列表」样式查看追踪数据(见图 2)可以更直观的发现这个问题;
+- 我们可以查看到最耗时的部分是 Reviews 应用,耗时 109ms,因此我们可以针对该应用进行优化;
+
+## 总结
+
+只要对应用代码稍作修改就可以在 Istio 很方便的使用分布式追踪功能。在 Istio 支持的众多分布式追踪系统中,[Apache 
SkyWalking](https://skywalking.apache.org/) 
是其中的佼佼者。它不仅支持分布式追踪,还支持指标和日志收集、报警、Kubernetes 和服务网格监控,[使用 eBPF 
诊断服务网格性能](https://skywalking.apache.org/zh/diagnose-service-mesh-network-performance-with-ebpf/)
 等功能,是一个功能完备的云原生应用分析平台。本文中为了方便演示,将追踪采样率设置为了 
100%,在生产使用时请根据需要调整采样策略(采样百分比),防止产生过多的追踪日志。
+
+---
+
+如果您不熟悉服务网格和 Kubernetes 安全性,我们在 [Tetrate Academy](https://tetr8.io/academy) 
提供了一系列免费在线课程,可以让您快速了解 Istio 和 Envoy。
+
+如果您正在寻找一种快速将 Istio 投入生产的方法,请查看 [Tetrate Istio Distribution 
(TID)](https://tetr8.io/tid)。TID 是 Tetrate 的强化、完全上游的 Istio 发行版,具有经过 FIPS 
验证的构建和支持。这是开始使用 Istio 的好方法,因为您知道您有一个值得信赖的发行版,有一个支持您的专家团队,并且如果需要,还可以选择快速获得 FIPS 
合规性。
+
+一旦启动并运行 Istio,您可能需要更简单的方法来管理和保护您的服务,而不仅仅是 Istio 中可用的方法,这就是 Tetrate Service 
Bridge 的用武之地。您可以[在这里](https://tetr8.io/tsb)详细了解 Tetrate Service Bridge 
如何使服务网格更安全、更易于管理和弹性,或[联系我们进行快速演示](https://tetr8.io/contact)。 

Reply via email to