How to use SVG.js along with Parcel(npm,yarn) and VScode
Install yarn
https://classic.yarnpkg.com/en/docs/install/
Install parcel
https://parceljs.org/getting_started.html
Install svg.js
yarn add @svgdotjs/svg.js
Folder tree
├── package.json
├── src
│ ├── index.html
│ └── index.ts
package.json
{
"scripts": {
"serve": "parcel serve src/index.html --port 8000",
"build": "parcel build index.html --out-dir build"
},
"dependencies": {
"@svgdotjs/svg.js": "^3.0.16"
},
"devDependencies": {
"typescript": "^4.1.2"
}
}
index.html
<html>
<body>
<div id="drawing"></div>
<script src="./index.ts"></script>
</body>
</html>
index.ts
import { SVG } from '@svgdotjs/svg.js'
var draw = SVG().addTo('#drawing')
, rect = draw.rect(100, 100).fill('#f07')
serve it
yarn serve
work with vscode
https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
give up on this
Because someone made a tool that exactly fits my needs: https://excalidraw.com
copied from
https://yingshaoxo.blogspot.com/2020/11/how-to-use-sgvjs-along-with.html