Documentation
On this page

Guides

Generated SVGs

Convert generated SVG markup to a data URL and display it in an <img>. Medium Zoom attaches to images, so an inline <svg> must be converted before it can zoom.

Open this generated diagram to read it at full size. The SVG includes its own colors, text, and dimensions:

generated-diagram.tsx
Press Enter or Space to zoom. Click, press Escape, or scroll to close.

The Code view shows the SVG markup and how to pass it to ZoomableDiagram, defined in the React section. For a standalone JavaScript version, see the SVG data URL example and its source (opens in a new tab).

JavaScript

Start with a container such as <div id="diagram"></div>:

js
import mediumZoom from 'medium-zoom'

const svg = `
  <svg xmlns="http://www.w3.org/2000/svg"
       width="1440" height="720" viewBox="0 0 1440 720">
    <rect width="1440" height="720" fill="#edf2e9" />
    <text x="72" y="180" font-family="sans-serif" font-size="64">
      A zoomable diagram
    </text>
  </svg>`

const image = document.createElement('img')
image.alt = 'A zoomable diagram'
image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
image.style.width = '100%'
image.style.maxWidth = '560px'
image.style.height = 'auto'
const container = document.getElementById('diagram')

if (container) {
  container.appendChild(image)
  const zoom = mediumZoom(image)

  // Before removing the image, detach it from the zoom instance.
  // zoom.detach(image)
}

For an existing SVG element, serialize its markup with new XMLSerializer().serializeToString(svgElement). Keep the xmlns declaration so the image uses the SVG namespace.

React

After installing the React component, pass the data URL as src. The component manages zoom attachment and cleanup:

zoomable-diagram.tsx
import {
  ImageZoom,
  type ImageZoomProps,
} from '@/components/ui/image-zoom'

type ZoomableDiagramProps = Omit<ImageZoomProps, 'src'> & {
  svg: string
}

export function ZoomableDiagram({
  svg,
  style,
  ...props
}: ZoomableDiagramProps) {
  return (
    <ImageZoom
      {...props}
      src={`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`}
      style={{ width: '100%', maxWidth: 560, height: 'auto', ...style }}
    />
  )
}

ZoomableDiagramProps keeps the image props, options, and state props from ImageZoomProps, replacing src with the SVG string. Pass alt to describe the diagram.

For Mermaid diagrams, pass the svg string returned by await mermaid.render(...) to this component. If rendering in an effect, ignore results that arrive after the source changes or the component unmounts.

Sizing and image constraints

Set explicit SVG width and height values with a matching viewBox, then display a smaller thumbnail. The example uses a 1440 × 720 SVG displayed at 560 × 280 or smaller.

Data URLs do not match Medium Zoom’s .svg filename check, so zooming uses the image’s natural dimensions, capped by the viewport. A viewBox alone may produce a small natural size.

  • Include styles in the SVG. The image cannot inherit the page’s CSS; avoid external fonts and HTML labels. For Mermaid, use SVG text labels (htmlLabels: false).
  • Provide meaningful alt text. Text inside the image is not selectable, and links and event handlers are inactive.
  • If your site uses Content Security Policy, allow data: in img-src or its default-src fallback. For example, img-src 'self' data: permits local images and data URLs.