Wraps svg2roughjs in a Vue component to easily embed SVGs as sketchy, hand-drawn SVGs.
See how your SVG looks sketched here.
Install the component from the NPM registry:
npm install --save vue-sketch-svgTo 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.
<sketch-svg>
<svg xmlns="http://www.w3.org/2000/svg" width="590" height="615">
<!-- SVG content ... -->
</svg>
</sketch-svg><sketch-svg src="data:image/svg+xml;base64,..." /><sketch-svg src="<path-to-svg>.svg" />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 |
MIT License © Fabian Schwarzkopf