Я пытаюсь создать простой прямоугольник внутри моей веб-страницы, используя svg.js. У меня установлена библиотека через npm, и я добавил исходный файл в тег скрипта, но мой рисунок SVG не будет отображаться.
Консоль выдает ошибку «Uncaught ReferenceError: SVG не определен»,
Вот фрагмент моего проекта
var draw = SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({
fill: '#f06'
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Breathe</title>
</head>
<body>
<div class="container">
<div class="header-container">
<div class="title-container">
<div>Title</div>
<div></div>
<div></div>
</div>
</div>
<div class="main-container">
<div id="drawing"></div>
</div>
<div class="footer-container">
</div>
</div>
<script src="main.js" type="text/javascript"></script>
<script src="node_modules\svg.js\dist\svg.js"></script>
</body>
</html>