How to creat svg document with svg.js

A few days ago, I got stuck in the mud of creating a svg dom with svg.js. After many test and searching, I found out that someting is different from the official manual.

The problem of using svg.js

For example, we write some dom in .html like this:

<!DOCTYPE html>
<html>
<head>
<title>Creating SVG with SVG.js</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://cdn.bootcss.com/svg.js/3.0.11/svg.min.js"></script>
</head>

<body>
<div id="drawing"></div>
<script>
  // write down your javascript here..
</script>
</body>
</html>

The official manual (refer to https://svgjs.com/docs/3.0/getting-started/) said that <script>...</script> part like this:

var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

The script above pass through on jsfiddle.net test (refer to https://jsfiddle.net/wout/wmtt8rkz/7/?utm_source=website&utm_medium=embed&utm_campaign=wmtt8rkz ). However, it doesn’t work on my case, no matter running on my MSIE 7.0 to 11.0 or Chrome 58. I felt so depressed that even could not got sleep for two whole days.