svg2roughjs

The svg2roughjs-nodejs CLI allows you to create hand-drawn sketches of SVG files from the command line using Node.js and Puppeteer.

To use it, navigate to the /nodejs-cli/ directory, install dependencies, and run the script pointing to your source SVG file.

# Navigate to the CLI directory
cd nodejs-cli

# Install dependencies
npm install

# Run the conversion
node src/svg2roughjs ../test/complex/bpmn-diagram/test.svg -o ./test.svg

Load the UMD bundle directly from unpkg via a script tag. The library will be available under the svg2roughjs global object.

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

Import Svg2Roughjs from the package, instantiate it with a target container selector or element, assign the source SVGSVGElement to the svg property, and call sketch() to perform the conversion.

import { Svg2Roughjs } from 'svg2roughjs'

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

Load the UMD bundle using RequireJS to access the Svg2Roughjs class.

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

Install the svg2roughjs package from the NPM registry to use it in your project.

npm install --save svg2roughjs

The Svg2Roughjs class is the primary interface for converting SVGs to hand-drawn sketches using Rough.js.

Constructor

constructor(target, outputType?, roughConfig?)

• target: A container HTMLDivElement (or selector) where the sketch will be created, or a direct SVGSVGElement or HTMLCanvasElement to be used as the output.
• outputType (optional): Determines the output format. Defaults to OutputType.SVG if the target is an HTML container. If the target is an SVGSVGElement or HTMLCanvasElement, it defaults to the respective mode.
• roughConfig (optional): A Rough.js options object to customize styles like fill, roughness, or bowing.

// Example instantiation
const converter = new Svg2Roughjs('#output-container', OutputType.CANVAS, { roughness: 2 });

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

Clears the configured target element and converts the current svg2roughjs.svg into a hand-drawn sketch.

If sourceSvgChanged is set to true, the method re-evaluates the existing svg property as if it were newly set. This is useful for re-using the same instance and source element for multiple renders.

The module exports the following:

• Svg2Roughjs: The main class for the conversion.
• OutputType: An enum used to switch between SVG and CANVAS output when targeting an HTMLDivElement.

The roughConfig property allows you to pass any valid Options object from Rough.js to the underlying renderer. This controls the specific hand-drawn styles of lines, fills, and hatches.

Note: If you do not specify fixedDecimalPlaceDigits in your config, Svg2Roughjs will automatically set it to 3 to ensure precision during coordinate processing.

instance.roughConfig = {
  strokeWidth: 2,
  stroke: '#000',
  roughness: 1.5,
  // fixedDecimalPlaceDigits is automatically set to 3 if omitted
};