SVG Viewer

An Obsidian plugin that renders inline SVG code fences as live graphics in both Reading View and Live Preview mode.

Paste raw SVG markup into a fenced code block and instantly see the rendered graphic — no file attachments needed.

Features

• Renders svg code fences as live inline graphics
• Works in both Reading View and Live Preview
• Security-first: all SVG is sanitized before rendering (scripts, event handlers, and dangerous URIs are stripped)
• Click a rendered block to view the raw SVG source; click outside to return to the graphic
• Copy SVG source to clipboard with one click
• Optional "SVG" badge label on rendered blocks
• Configurable external resource blocking
• Supports dark and light themes
• Zero runtime dependencies

Installation

Manual

1. Download main.js, manifest.json, and styles.css from the latest release
2. Create a folder called svg-viewer inside your vault's .obsidian/plugins/ directory
3. Copy the three files into that folder
4. Open Obsidian Settings → Community Plugins → Enable "SVG Viewer"

From Source

git clone https://github.com/konstantinosGkilas/Obsidian-SVG-Viewer.git
cd Obsidian-SVG-Viewer
npm install
npm run build

Then copy main.js, manifest.json, and styles.css into your vault's .obsidian/plugins/svg-viewer/ directory.

Usage

Wrap SVG markup in a fenced code block with the svg language identifier:

```svg
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="steelblue"/>
</svg>
```

The SVG renders as a live graphic. Interact with it:

• Click the block — switches to the raw SVG source view
• Click outside — switches back to the rendered graphic
• Hover — reveals a copy button in the top-right corner

Settings

Setting	Default	Description
Block external resources	On	Strips external URLs (http://, https://) from SVG attributes
Show SVG badge	On	Displays a small "SVG" label below rendered blocks

Security

All SVG content is sanitized before it touches the DOM. The following are removed:

• <script> elements
• <foreignObject> elements (can embed arbitrary HTML)
• All on* event handler attributes (onclick, onload, onerror, etc.)
• javascript: URI schemes in href and src attributes
• data:text/html and data:text/javascript URIs
• External resource URLs when "Block external resources" is enabled (default)

The plugin never uses eval() or the Function() constructor.

Development

npm install          # install dependencies
npm run dev          # start esbuild in watch mode
npm run build        # production build
npm test             # run unit tests

Project Structure

├── main.ts              # Plugin entry point
├── src/
│   ├── sanitizer.ts     # SVG sanitization (XSS prevention)
│   ├── validator.ts     # SVG structural validation
│   ├── renderer.ts      # Rendering pipeline and UI controls
│   └── settings.ts      # Plugin settings tab
├── styles.css           # Plugin styles
├── tests/
│   ├── sanitizer.test.ts
│   └── validator.test.ts
├── manifest.json
├── package.json
├── tsconfig.json
└── esbuild.config.mjs

Contributing

1. Fork this repository
2. Create a feature branch (git checkout -b feature/my-feature)
3. Make your changes and add tests
4. Run npm test to verify all tests pass
5. Run npm run build to verify the build succeeds
6. Submit a pull request

License

MIT