Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@svg-drawing/core

4.0.0 • Public • Published

@svg-drawing/core

npm version npm download

How to use

npm

Install

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

Example code is here

This example renders the drawing area.

import { SvgDrawing } from '@svg-drawing/core'
 
const drawel = 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)

SvgDrawing methods.

const draw = new SvgDrawing(el)
 
// change parameter. There are other changeable parameters like fill, close, curve, etc.
draw.penColor = '#00b'
draw.penWidth = 10
 
// drawing deactivate
draw.off()
// drawing reactivate
draw.on()
 
// drawing all clear
draw.clear()
// undo drawing
draw.undo()
 
// Download image. Also available in SvgAnimation, Renderer
draw.download('svg')
draw.download('jpg')
draw.download('png')
 
// Load svg data. Only the path element.
// SVG exported by this library can be read.
draw.parseSVGString(
  '<svg width="200" height="200"><path fill="#f00" stroke="#00f" stroke-width="4" d="M 1 1 L 2 2 C 3 3 5 3 7 3 Z"></path></svg>'
)
draw.parseSVGElement(document.getElementByID('loadSVG'))

CDN

<div id="draw-area" style="width: 100vw;height: 100vh;"></div>
<script src="https://unpkg.com/@svg-drawing/core@4.0.0-beta.6/lib/index.umd.js"></script>
<script>
  var draw = new SVGDCore.SvgDrawing(document.getElementById('draw-area'))
</script> 

Here is an example for Html only.

Keywords

Install

npm i @svg-drawing/core

DownloadsWeekly Downloads

7

Version

4.0.0

License

MIT

Unpacked Size

218 kB

Total Files

36

Last publish

Collaborators

  • avatar