Svelte SVG Viewer

A component for displaying something big in a small (or not) space.

Usage

To start using the library, install it in your project:

npm install svelte-svg-viewer

And then use it in your app:

1<script>
2	import { SVGViewer } from "svelte-svg-viewer";
3</script>
4
5<SVGViewer
6	width="600px"
7	height="600px"
8>
9	<foreignObject
10		width="1000"
11		height="1000"
12		xmlns="http://www.w3.org/2000/svg"
13	>
14		<p>Content</p>
15	</foreignObject>
16</SVGViewer>

Examples

soon™

Props

Almost all props can take writable stores or raw values, which makes them controllable or uncontrollable:

1<script>
2	import { writable } from "svelte/store";
3	import { SVGViewer } from "svelte-svg-viewer";
4
5	// This is a default version. It cannot 
6	// be modified after component initialization.
7	const actionKey = "Control";
8	
9	// And this is controllable version. It can be modified.
10	// Also, if used, it overrides default version.
11	const actionKey = writable("Control"); 
12</script>
13
14<SVGViewer {actionKey}>
15	...
16</SVGViewer>

Also component has afterMount prop that we can use to call methods right after component is mounted:

1<script>
2	import { SVGViewer } from "svelte-svg-viewer";
3</script>
4
5<SVGViewer 
6	afterMount={(methods) => methods.center()}
7>
8	...
9</SVGViewer>

To see the rest go to this file

Methods

Methods can be bound to a variable right from the component:

1<script>
2	import { writable } from "svelte/store";
3	import { SVGViewer } from "svelte-svg-viewer";
4
5	// We declare a methods variable
6	let methods;
7
8	onMount(() => {
9		// And then we can use method we need on mount
10		methods.center();
11	});
12</script>
13
14<SVGViewer 
15	bind:methods
16>
17	...
18</SVGViewer>
19
20<!-- Or use it on click, etc. -->
21<button on:click={() => methods.center()}>Center</button>

Current issues

Incorrect XML namespace uri for foreignObject

This issue lies in incorrect xmlns attribute of foreignObject when inserted into a <slot>, link. The only workaround right now, if you want to use foreignObject in SVGViewer, is to provide correct value shown in the example above.

Inspirations

• Vaul Svelte (project structure is nice)
• React Svg Pan Zoom
• Melt UI (Prop documentation is nice)