svelte-deep-zoom

Svelte 5 attachment to render interactive Deep Zoom images (tiled image pyramids). Similar to Open SeaDragon (fewer features, but smaller size). Supports foveation to prioritize tiles closest to focus point when zooming.

See Demo

Requires Svelte 5.29+.

Instructions

Install using your package manager of choice:

pnpm i svelte-deep-zoom

Create a DeepZoom instance (or the deepzoom factory) and attach it to a canvas. Fields on the instance are Svelte $state — assign width, src, overlays, and so on to update without re-attaching. Assigning a new src rebuilds the tile pyramid and resets pan/zoom to the default fit.

Options include:

• width & height in CSS pixels of item to render (will be centered and sized to fit canvas)
• size size of tiles (default 256)
• overlap tile overlap (default 1)
• src a function to generate the URL for a tile given the pyramid level, col, and row of the tile
• overlays an optional array of overlays to render over the tiles
• concurrency concurrency limit for loading tiles (default 12). Set to 0 for no limit
• minTileZoom the minimum scale at which a tile layer will render (default 0.8)
• maxTileZoom the maximum scale at which a tile layer will render (default 2.0)
• opacityDuration the duration that a newly loaded tile will take to fade in (creates a "progressive JPEG" loading effect)
• alpha canvas option (default true)
• desynchronized canvas option (default false)

Overlays

Overlays add optional functionality and are tree-shaken out if unused. Built-in overlays include:

Custom overlays implement render(ctx, frame) and return true to keep the animation loop running.

• Watermark pass the image src url in the constructor
• Busy renders an animated busy spinner when tiles are loading
• Debug renders tile borders and level / col / row information

Additional overlays that could be developed might include a mini-map to show where in the full image you are zoomed into.

Example

<script lang="ts">
  import { DeepZoom } from 'svelte-deep-zoom'

  const viewer = new DeepZoom({
    width: 13920,
    height: 10200,
    size: 254,
    overlap: 1,
    src(level: number, col: number, row: number) {
      return `https://openseadragon.github.io/example-images/duomo/duomo_files/${level}/${col}_${row}.jpg`
    }
  })
</script>

<canvas {@attach viewer.attach}></canvas>

<style>
  canvas {
    width: 100%;
    height: 100%;
    user-select: none;
    touch-action: none;
    overscroll-behavior: none;
  }
</style>

When you don't need the instance, the factory returns an attachment directly:

<canvas {@attach deepzoom({ width, height, src })}></canvas>