svg2rough.js

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

Try the sample application here.

NPM

Install from the NPM registry with

npm install --save svg2roughjs

Usage

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, a sample application is provided in /sample-application/.

ES Module

import { Svg2Roughjs } from 'svg2roughjs'

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

UMD Bundle

An UMD bundle that ca be loaded via script tags or a module loader e.g. RequireJS is included in the NPM package or can be loaded from unpkg:

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

<!-- 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

Module 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.

• sketch(sourceSvgChanged = false): Promise<SVGSVGElement | HTMLCanvasElement | null>

  Clears the configured target element and converts the current svg2roughj.svg to a hand-drawn sketch.

  Setting sourceSvgChanged to true re-evaluates the given svg2roughj.svg as it was set anew. May be used to re-use the same Svg2Rough.js instance and the same SVG element as source container.

Properties

| Property | Description | Default | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | | svg | The given SVGSVGElement that should be converted. | undefined | | outputType | Switch between canvas or SVG output. | OutputType.SVG | | roughConfig | Rough.js options object, 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 | | seed | Optional, numerical seed for the randomness when creating the sketch. | null | | 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 |

Sample Images

Some sample images with different Svg2rough.js settings. Try it yourself here.

| SVG | Sketch | | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | (created with yEd Live) |   | |   |   | | (created with yEd Live) |   | |   |   | | (created with yEd Live) |   | |   |   | | | | |   |   | | | | |   |   | | | |

Local Build

To build the project locally, make sure to have Node.js installed and run

> npm install
> npm run build

This creates a local /dist/ folder containing both, the ES module and UMD build of svg2roughjs.

Tests

To perform all tests on the current build, run

npm run test-all

This converts all given tests in /test/ and compares the output SVG with the expected string. Each test contains a configuration file with different settings and a fixed seed to account for the randomness in the sketched output.

Credits

• Rough.js – Draws the hand-drawn elements
• svg-pathdata – Parses SVGPathElements
• TinyColor – Color manipulation

License

MIT License © Fabian Schwarzkopf and Johannes Rössel