SVG Canvas Lite: Visual Editor (Offline)

Edit .svg files visually inside VS Code. The canvas and the code view are the same document, so every canvas change is a normal text edit and undo/redo is plain VS Code undo/redo.

100% offline. All scripts and styles are bundled with the extension. No telemetry, no AI, no account. Scripts inside SVG files are never executed.

Features (Lite, free)

• Custom editor for .svg with split view: canvas + code beside it, kept in sync live
• Select, move, resize and rotate shapes (rect, circle, ellipse, line, polyline, text, image, use; path and group move/rotate via transform)
• Draw rect, circle, ellipse, line, polyline (click points, double-click to finish), text
• Attribute inspector: edit, add or remove any attribute; edit text content; delete an element
• Renders <defs>, <symbol>, <use> (both href and xlink:href), gradients and <style>
• Round-trip safe: only the attribute values you change are rewritten. Comments, formatting, quote style, attribute order and unknown markup stay byte-identical.

How it works

SVG Canvas is a VS Code CustomTextEditor: it edits the real text document through normal workspace edits, so dirty state, save, undo/redo and source control all behave like any text edit. It opens only when you choose it (it does not replace the default editor).

Use

Right-click an .svg → Open in SVG Canvas, or use the editor title button, or Reopen Editor With… → SVG Canvas (visual). Set svgCanvas.openCodeBeside to false to skip the code split.

Safety

The canvas renders a sanitized copy: <script>, <foreignObject>, <iframe>, <object>, <embed>, <set>, event handler attributes (on…), javascript: and external/remote URLs, remote CSS url()/image-set()/@import (including CSS-escaped forms) are removed before display. As a second layer, the webview Content Security Policy blocks any remote load and allows only the extension's own local script. Your file is never modified by sanitizing: removed items stay in your code and are listed under the inspector.

Lite vs Pro

Known limits

• The file must be well-formed XML to render; while it is broken, the canvas shows a notice and the code view still works.
• Resize of paths/polylines/groups is not in Lite (move and rotate are).
• No multi-select or keyboard nudge yet; deeply nested groups select the nearest editable ancestor.
• Resize on rotated/transformed elements uses the local box and can feel off.
• Text tool asks for text via a VS Code input box.
• Elements inside <symbol> are edited in the code view; the canvas selects the <use>.

Privacy

No data leaves your computer. No telemetry.

Feedback

Bugs and ideas: bhamlefty@gmail.com · https://zecro-svg-canvas.pages.dev/