Vector & Diagrams · Zero Signup Required

Online SVG Code Viewer & Live Vector Sandbox

Preview inline SVG icons, Mermaid/Excalidraw exports, badges, and generative vector diagrams in real time. Verify `viewBox` scaling on dark or light canvases and share a clean `/v/:id` vector artifact link.

Input (SVG) 15 lines · 1174 B

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 180" width="520" height="180" fill="none">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="520" y2="180" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#18181b"/>
      <stop offset="100%" stop-color="#09090b"/>
    </linearGradient>
  </defs>
  <rect width="520" height="180" rx="18" fill="url(#bg)" stroke="#27272a" stroke-width="2"/>
  <circle cx="52" cy="56" r="18" fill="#10b981" fill-opacity="0.18" stroke="#10b981" stroke-width="2"/>
  <path d="M45 56l5 5 10-11" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
  <text x="84" y="53" fill="#fafafa" font-family="system-ui, sans-serif" font-size="17" font-weight="700">Zero-Latency Vector Preview</text>
  <text x="84" y="75" fill="#a1a1aa" font-family="monospace" font-size="12">viewBox="0 0 520 180" • Crisp Scaling • Isolated Frame</text>
  <rect x="34" y="108" width="452" height="42" rx="10" fill="#27272a" fill-opacity="0.55"/>
  <text x="50" y="134" fill="#6ee7b7" font-family="monospace" font-size="12">$ cat diagram.svg | curl --data-binary @- https://supanote.app/paste</text>
</svg>

Live Output Ready

viewBox: 0 0 520 180 · 12 tags

Terminal / CI Pipe Equivalent

cat diagram.svg | curl --data-binary @- https://supanote.app/paste

Upload generated SVG architecture diagrams or badges straight from build scripts.

Capabilities & Guarantees

✓ Automatic extraction of `viewBox`, intrinsic `width`/`height`, element count, and byte size
✓ Toggleable checkerboard, dark, and light canvas backgrounds for transparent icons
✓ Sandboxed vector rendering prevents embedded `<script>` or `onload` XSS vectors from touching host origin
✓ One-click `/v/:id` Pure Artifact View for full-bleed diagram reviews

Common Engineering Workflows

Debugging Transparent Icons & Stroke Colors

Switch between dark and light canvas backdrops to catch hardcoded black strokes or missing `currentColor` attributes.

Sharing Architecture & Sequence Diagrams

Publish Graphviz, D2, PlantUML, or Excalidraw SVG exports as clean links without blurry PNG compression.

Inspecting LLM-Generated Vector Graphics

Paste SVG markup generated by Claude or Gemini to verify `viewBox` cropping and path coordinates live.

Technical Questions & Details

Is it safe to preview third-party SVG files in Supanote?

Yes. SVG markup is rendered inside an isolated opaque-origin sandboxed iframe so inline SVG scripts or event handlers cannot access your session or origin.

Does the SVG Viewer show viewBox and byte metrics?

Yes. The workbench header displays the detected `viewBox`, width/height attributes, SVG tag count, and exact UTF-8 byte footprint.

Can teammates download the raw `.svg` file from the shared link?

Yes. Every shared SVG note provides both `/n/:id/raw` and `/n/:id/download` endpoints alongside `/v/:id` Pure Artifact View.

Explore Related Tools, Templates & Comparisons

Frontend & UI Templates → · Supanote vs GitHub Gist →

Logs & SRE

Nginx Log Analyzer

Parse Nginx combined access logs and upstream error traces instantly with HTTP status colorizing and secret scanning.

Containers

Docker Log Viewer

Inspect Docker Compose stdout/stderr streams, JSON log drivers, ANSI color codes, and multi-line stack traces.

Data Grid

CSV & TSV Viewer

Turn raw comma, tab, or semicolon-delimited text into a fast, sortable spreadsheet table in one paste.

Artifact View

HTML Sandbox

Preview self-contained HTML, CSS, and JavaScript snippets live and share them as Claude-style `/v/:id` artifacts.