1.0.1 • Published 3 years ago
vue-sketch-svg v1.0.1
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
License
MIT License © Fabian Schwarzkopf