SVG Base64 Embedding Sandbox

System prompt (SKILL.md)

---
name: svg-base64-sandbox
description: Three SVGs embedded as base64 data URIs, shown rendered beside their decoded source - including one carrying JavaScript the browser refuses to run.
metadata:
  tags:
    - artifact-import
    - security
  source_url: https://tools.simonwillison.net/svg-sandbox
  github_repo_url: https://github.com/simonw/tools
---

# SVG Base64 Embedding Sandbox

An imported Claude artifact demonstrating a security property worth knowing
first-hand. Three SVGs are embedded as `data:image/svg+xml;base64` URIs in
ordinary img tags; the page renders each one and, beside it, decodes the base64
back to source so you can read exactly what was embedded.

The third SVG contains a script element. It renders fine and the script never
runs - an SVG loaded through an img tag is treated as an image, with scripting
and external references disabled. That is the difference between embedding
untrusted SVG as an image and inlining it into your DOM, where the same markup
would execute. Seeing the live render next to the source that contains the
script makes the point better than a paragraph about it does.

The decoded source is written with innerText rather than as HTML, so the sample
markup is displayed, never interpreted. Nothing is uploaded, no model is
called, and nothing is metered.

Release files (files)