vue-sketch-svg

Wraps svg2roughjs in a Vue component to easily embed SVGs as sketchy, hand-drawn SVGs.

See how your SVG looks sketched here.

Installation

Install the component from the NPM registry:

npm install --save vue-sketch-svg

Usage

To get started, import it as component:

import SketchSvg from 'vue-sketch-svg'
export default {
  name: 'MyVueComponent',
  components: {
    SketchSvg
  }
  // ...
}

And utilize one of the different ways to pass an SVG to the component.

Inline as slotted content

<sketch-svg>
  <svg xmlns="http://www.w3.org/2000/svg" width="590" height="615">
    <!-- SVG content ... -->
  </svg>
</sketch-svg>

As self-contained data-uri

<sketch-svg src="data:image/svg+xml;base64,..." />

As path to the file

<sketch-svg src="<path-to-svg>.svg" />

:warning: This approach fetches the SVG on the given path. Therefore it must be served on the same origin or cross-origin accessible. See also Cross-Origin Resource Sharing.

API

The component supports several properties:

| Property | Description | Default | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------- | | src | Can be used instead of inlining the SVG as component content. Supports self-contained data URIs or fetch-able paths | undefined | | width | Controls the size of the component. Only works in conjuction with height. | undefined | | height | Controls the size of the component. Only works in conjunction with width. | undefined | | sketch | Whether the sketch or the original SVG should be shown. SVG. | true | | combineNestedSvgPaths | Can be used on SVGs with nested paths to avoid filling of empty inner areas. | true | | roughness | Controls the overall roughness of the sketched. | 1 | | bowing | Controls the bowing the lines of the sketch. | 1 | | fillStyle | Specifies the fill style of the sketch. Supports: solid, hachure, zigzag, cross-hatch, dots, dashed, zigzag-line | hachure |

Dependencies

• svg2roughjs

License

MIT License © Fabian Schwarzkopf