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

Dependencies

svg2roughjs: ^2.2.1