SlickSVG - Split Screen SVG Editor

   ____     ____     ____ _______  _____   _____
 _/  _//__ |   /    /    V    __/__\    | /    /
_\___     \:   |    |    |    |/   Y    :/    /
\    |     |   |    |    |    |    |    /     \
|    :     |   |____|    |__  :    |    \      \
:____      |   :    /    |  \      |_____\ svg  \
     \____/ \______/ \__/    \____/       \_____/

        https://github.com/xero/slicksvg

A Node.js-based, web SVG editor written in TypeScript, with no frontend frameworks. The UI and all interactions are managed using vanilla TypeScript, DOM APIs, and modern browser features. The app provides a full-screen split view for editing and previewing SVG code in real time.

Features: Real-time editing • Resizable split view • Xray mode highlighting • Dark/light themes • SVG optimization • Transform tools • Mobile / Touch support • Comprehensive testing

Open SlickSVG in your browser

Screenshots

Light Mode with an Error in the Code:

Dark Mode Editing Points:

Features

Core Editor

• Resizable Split View: Editor and live preview with draggable separator for custom sizing (10%-90% range)
• Advanced Code Editor: CodeMirror 6 with XML/SVG syntax highlighting and real-time linting. The line numbers take only the width the longest needs, one figure for a cleaned drawing on one line, and a line with an error has its number in red, with no gutter kept empty for errors. It opens with a light bulb drawn in paths, to try the tools on
• Live Preview: Instant SVG rendering with semi-transparent dashed border for bounding visualization
• Real-time Validation: XML/SVG syntax checking with detailed error reporting
• Tokyo Night Themes: Beautiful light/dark mode syntax highlighting with seamless theme switching

Xray Mode

• Visual Element Highlighting: Toggle xray mode to visually highlight SVG elements in the preview when cursor is positioned within corresponding code
• Native SVG Filters: Uses sophisticated SVG filter effects for smooth, high-quality highlighting
• Smart Element Detection: Automatically detects cursor position and maps to corresponding SVG elements
• Element Indexing: Supports multiple elements of the same type (e.g., multiple circles, paths)
• Non-intrusive: Highlighting preserves original SVG appearance and doesn't modify code

SVG Tools

• Upload: Drag & drop or click to upload SVG files with validation
• Download: Save current SVG code as a file
• Resize: Change SVG dimensions with modal dialog interface
• Optimize: The Clean button removes unnecessary whitespace and comments and optimizes the SVG code for smaller files, with every transform written in its simplest form
• Transform:
  • Rotate in 90° increments
  • Flip horizontal/vertical
  • Reset transformations

This is the beginning of the README. Read the rest at the original. Read the full README ↗