<style>
.レクト{fill:none;
stroke:silver;
stroke-width:1;}
.テキスト{font-size:18;
font-family:"ヒラギノ角ゴ ProN W3",HiraKakuProN-W3,游ゴシック,"Yu Gothic",メイリオ,Meiryo,Verdana,Helvetica,Arial,sans-serif;}
.パス{fill:none;
stroke:black;
stroke-width:5;}
.ライン{fill:none;
stroke:#00dd00;
stroke-width:1;}
.ショートカット_ライン{fill:none;
stroke:#ff00ff;
stroke-width:1;}
.アンカー_ポイント{fill:orange;
stroke:red;
stroke-width:2;}
.コントロール_ポイント{fill:blue;
stroke:none;}
.ショートカット_ポイント{fill:#ff00ff;
stroke:none;
stroke-width:4;}
</style>

<svg width="600"height="600"viewBox="0 0 602 602"xmlns="http://www.w3.org/2000/svg"version="1.1">
<desc>パスデータ C , S コマンドとパラメーター</desc>
<rect class="レクト"x="1"y="1"width="600"height="600"/>
<polyline class="ライン"points="100 100 100 400"/>
<polyline class="ライン"points="300 300 200 400"/>
<polyline class="ショートカット_ライン"points="300 300 400 200"/>
<polyline class="ライン"points="500 200 500 500"/>
<path class="パス"d="M100 100C100 400 200 400 300 300 S500 200 500 500"/>
<circle class="アンカー_ポイント"cx="100"cy="100"r="6"/>
<circle class="アンカー_ポイント"cx="300"cy="300"r="6"/>
<circle class="アンカー_ポイント"cx="500"cy="500"r="6"/>
<circle class="コントロール_ポイント"cx="100"cy="400"r="5"/>
<circle class="コントロール_ポイント"cx="200"cy="400"r="5"/>
<circle class="コントロール_ポイント"cx="500"cy="200"r="5"/>
<circle class="ショートカット_ポイント"cx="400"cy="200"r="5"/>
<text class="テキスト"x="300"y="90">ショート・カットSで自動生成</text>
<text class="テキスト"x="300"y="120">(C200 400 からの対象座標)</text>
<text class="テキスト"x="394"y="160">↓</text>
<text class="テキスト"x="180"y="440">C200 400</text>
</svg>