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:

<script>
	import { SVGViewer } from "svelte-svg-viewer";
</script>

<SVGViewer
	width="600px"
	height="600px"
>
	<foreignObject
		width="1000"
		height="1000"
		xmlns="http://www.w3.org/2000/svg"
	>
		<p>Content</p>
	</foreignObject>
</SVGViewer>

Examples

soon™

Props

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

<script>
	import { writable } from "svelte/store";
	import { SVGViewer } from "svelte-svg-viewer";

	// This is a default version. It cannot 
	// be modified after component initialization.
	const actionKey = "Control";
	
	// And this is controllable version. It can be modified.
	// Also, if used, it overrides default version.
	const actionKey = writable("Control"); 
</script>

<SVGViewer {actionKey}>
	...
</SVGViewer>

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

<script>
	import { SVGViewer } from "svelte-svg-viewer";
</script>

<SVGViewer 
	afterMount={(methods) => methods.center()}
>
	...
</SVGViewer>

To see the rest go to this file

Methods

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

<script>
	import { writable } from "svelte/store";
	import { SVGViewer } from "svelte-svg-viewer";

	// We declare a methods variable
	let methods;

	onMount(() => {
		// And then we can use method we need on mount
		methods.center();
	});
</script>

<SVGViewer 
	bind:methods
>
	...
</SVGViewer>

<!-- Or use it on click, etc. -->
<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)