svg2rough.js

Utilizes Rough.js to convert an SVG to a hand-drawn visualization.

Try the sample application here.

Installation

NPM

Just install it from the NPM registry with

npm install --save svg2roughjs

or pack it yourself with npm pack and depend on the tar ball to import Svg2Roughjs.

"dependencies": {
  "svg2roughjs": "<path-to>/svg2roughjs-<version>.tgz"
},

UMD

The build also creates an UMD bundle that ca be loaded via script tags or a module loader e.g. RequireJS.

The UMD bundle is also available on unpkg:

https://unpkg.com/svg2roughjs/dist/svg2roughjs.umd.min.js

Usage

Basically, just import Svg2Roughjs and instantiate it with an output div in which the SVG sketch should be created. Calling sketch() outputs the current svg to the given element as hand-drawn sketch.

For reference, the sample application is provided in /sample-application/ as well.

ES Module

import { Svg2Roughjs } from 'svg2roughjs'

const svg2roughjs = new Svg2Roughjs('#output-div')
svg2roughjs.svg = document.getElementById('input-svg')
svg2roughs.sketch()

UMD Bundle

<!-- script loading -->
<script src="https://unpkg.com/svg2roughjs/dist/svg2roughjs.umd.min.js"></script>
<script>
  const svgConverter = new svg2roughjs.Svg2Roughjs('#output-div')
  svgConverter.svg = document.getElementById('input-svg')
  svgConverter.sketch()
</script>

<!-- requirejs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
  window.requirejs(['https://unpkg.com/svg2roughjs/dist/svg2roughjs.umd.min.js'], svg2roughjs => {
    const svgConverter = new svg2roughjs.Svg2Roughjs('#output-div')
    svgConverter.svg = document.getElementById('input-svg')
    svgConverter.sketch()
  });
</script>

API

Exports

Svg2Roughjs: The main class for the conversion.
OutputType: An enum that is used to switch between SVG and CANVAS output when targetting an HTMLDivElement as output container.

Methods

constructor(target, outputType?, roughConfig?)

Creates a new Svg2Rough.js instance.

target may either be a selector for a parent HTML element into which a new canvas or SVG should be created, or directly an SVGSVGElement or HTMLCanvasElement that should be used for the output.

The optional outputType defaults to the respective mode if target is either SVGSVGElement or HTMLCanvasElement. If targetting an HTML container element, then OutputType.SVG is used by default.
async sketch()

Clears the targetted output SVGSVGElement or HTMLCanvasElement and converts the set svg to a hand-drawn sketch.

Properties

Property	Description	Default
`svg`	The input SVG that should be converted.	`undefined`
`outputType`	Switch between canvas or SVG output.	`OutputType.SVG`
`roughConfig`	Rough.js style properties, e.g. to change the fill-style, roughness or bowing.	`{}`
`fontFamily`	Font with which text elements should be drawn. If set to `null`, the text element's original font-family is used.	`'Comic Sans MS, cursive'`
`backgroundColor`	Sets a background color onto which the sketch is drawn.	`transparent`
`randomize`	Randomize Rough.js' fillWeight, hachureAngle and hachureGap.	`true`
`sketchPatterns`	Whether to sketch pattern fills/strokes or just copy them to the output	`true`
`pencilFilter`	Applies a pencil effect on the SVG rendering.	`false`