次の例では、SVG を html に書いていましたが、SVG を外部ファイルにして読み込むようにしました。
SVG で描画する
index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="read_svg.js"></script>
<title>Read SVG</title>
</head>
<body>
<h2>Read SVG</h2>
<div id="svgArea"></div>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
<hr />
Version May/12/2018 PM 19:11<p />
</body>
</html>
read_svg.js
// -------------------------------------------------------------------------
// read_svg.js
//
// May/12/2018
// -------------------------------------------------------------------------
jQuery (function ()
{
jQuery("#outarea_aa").text("*** start ***")
jQuery("#svgArea").load("sample01.svg svg", function()
{
jQuery("#outarea_bb").text("*** done ***")
})
jQuery("#outarea_hh").text("*** end ***")
})
// -------------------------------------------------------------------------
sample01.svg
<svg width="500" height="400">
<circle cx="100" cy="60" r="50" fill="#e74c3c" stroke=black />
<ellipse cx="100" cy="170" rx="20" ry="40" fill="red" stroke="red" />
<ellipse cx="100" cy="300" rx="60" ry="20" fill="#3498db" stroke="#333333" />
<rect x="200" y="20" width="250" height="80" fill=blue stroke=blue />
<rect x="200" y="120" width="250" height="80" rx="20" ry="20" fill=yellow stroke="#333333" />
<line x1="200" y1="250" x2="350" y2="350" stroke="#333333" />
<line x1="250" y1="250" x2="400" y2="350" stroke=magenta stroke-width="10" />
<line x1="300" y1="250" x2="450" y2="350" stroke="#333333" stroke-width="5" stroke-dasharray="5 10" />
<polyline points="20,180 70,120 120,120 170,180 120,240 70,240" fill="none" stroke=green stroke-width="5" />
<polygon points="0,0 500,0 500,400 0,400" fill="none" stroke=cyan stroke-width="5" />
</svg>