SVG Output

Component for rendering SVG graphics in notebook outputs. Handles matplotlib figures rendered as SVG, diagrams, and other vector graphics.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/svg-output.json

Usage

import { SvgOutput } from "@/registry/outputs/svg-output"

export function Example() {
  const svg = `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="#6366f1" />
  </svg>`
  
  return <SvgOutput data={svg} />
}

Props

Why SVG?

SVG outputs are common in notebooks for:

• matplotlib figures with savefig(format='svg')
• Diagrams and flowcharts
• Logos and icons
• Interactive visualizations

SVG is preferred over raster images when you need:

• Crisp rendering at any zoom level
• Smaller file sizes for simple graphics
• Ability to style with CSS