circle-free / svg-drawing

svg drawing library.

svg-drawing

svg-drawing is svg based drawing library.

This is a demo. Code is here.

This project has moved to monorepo. If you want to use the previous version, please use here.

Getting Started

npm

npm i @svg-drawing/core
# or
yarn add @svg-drawing/core

import { SvgDrawing } from '@svg-drawing/core'

const el = document.createElement('div')

// Drawing area will be resized to fit the rendering area
el.setAttribute(
  'style',
  `
  border: 1px solid #ddd;
  width: 500px;
  height: 500px;
  `
)
document.body.appendChid(el)
new SvgDrawing(el)

CDN

<div id="draw-area" style="width: 100vw;height: 100vh;"></div>
<!-- Common JS-->
<script src="https://unpkg.com/@svg-drawing/[email protected]/lib/index.umd.js"></script>
<script>
  var draw = new SVGDCore.SvgDrawing(document.getElementById('draw-area'))
</script>

Here is an example for Html only.

Packages

Packages	Description
@svg-drawing/core	Core Module
@svg-drawing/animation	Animate the drawn Svg. Can be animations using JavaScript or <animate>
@svg-drawing/img-trace	Image(png/jpg) convert Svg.
@svg-drawing/react	For React.