SVG Editor

A simple web-based SVG editor for creating and editing scalable vector graphics.

Warning

This package is still in the experimental phase. You can expect new functionalities, but with this comes the possibility of more frequent errors

Important

Package is using modern Web APIs which may be not available on older browsers See:

• https://caniuse.com/mdn-api_htmlelement_attachinternals
• https://caniuse.com/mdn-api_elementinternals
• https://caniuse.com/mdn-api_shadowroot

Demo

See https://akcyp.github.io/svg-path-marker/

Features

• Draw and edit SVG shapes
• Multiple shapes support
• Touch devices support
• Keyboard support
• Undo/redo actions (Ctrl-Z, Ctrl-Y)
• Resposive (tool is rendering with native SVG element instead of canvas)
• Cross framework support thanks to Web Component implementation
• Form control support

Quick usage guide

• Double click to add new point (tap on touch devices)
• Click on point to edit its properties & add successor commands (points)
• Drag points around

Developer guide

Installation

# with npm
npm i svg-path-marker
# with yarn
yarn add svg-path-marker
# with pnpm
pnpm add svg-path-marker

Loading in your application

// Load with JS / TS:
import 'svg-path-marker';
import type { SVGPathMarker } from 'svg-path-marker';

<!-- Load with html script tag: -->
<script type="module" src="./node_modules/svg-path-marker"></script>

<!-- Usage: -->
<svg-path-marker d="M 0,0" viewbox="0 0 500 500">
  <!-- Any content, for example: -->
  <img width="500px" height="500px" src="..." />
</svg-path-marker>

<!-- Use as form control: -->
<form>
  <!-- "d" property is a value -->
  <svg-path-marker
    name="path"
    d="M 0,0 L 0,5 L 5,5 Z"
    style="width: 100px; height: 100px"
  ></svg-path-marker>
  <button type="submit">Submit</button>
</form>

CSS states:

svg-path-marker:disabled {
  /* Custom disabled styles */
}
svg-path-marker:invalid {
  /* Custom invalid input styles */
}
svg-path-marker:state(open) {
  /* Custom open styles (when at least one path is not closed) */
}
svg-path-marker:state(closed) {
  /* Custom closed state (when all paths are closed) */
}
svg-path-marker:state(drag) {
  /* While moving points */
}

Props:

export interface SVGPathMarkerProps {
  /**
   * Required path[d] prop, for reference see:
   * - https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d
   * - https://www.w3.org/TR/1999/WD-SVG-19990412/paths.html
   */
  d: string;
  /**
   * When present, makes the editor not mutable
   */
  disabled?: boolean;
  /**
   * The viewbox attribute defines the position and dimension, in user space, of an SVG editor viewport.
   */
  viewbox?: string;
  /**
   * Integer string to round points coordinates
   */
  precision?: string;
  /**
   * Show helper points by default
   */
  showhelpers?: boolean;
}

React integration example

import 'svg-path-marker';
import type { SVGPathMarker, SVGPathMarkerProps } from 'svg-path-marker';
import { useEffect, useRef, useState } from 'react';

declare module 'react' {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace JSX {
    interface IntrinsicElements {
      'svg-path-marker': React.DetailedHTMLProps<React.HTMLAttributes<SVGPathMarker>, SVGPathMarkerProps> & Partial<SVGPathMarkerProps>;
    }
  }
}

export default function App() {
  const ref = useRef<SVGPathMarker>(null);
  useEffect(() => {
    const marker = ref.current;
    if (!marker) return;
    const onChange = () => setD(marker.d ?? '');
    marker.addEventListener('change', onChange);
    return () => marker.removeEventListener('change', onChange);
  }, []);

  const [d, setD] = useState('');
  return (
    <>
      <svg-path-marker d={d} ref={ref} style={{ width: '500px', height: '500px', border: '1px solid' }}></svg-path-marker>
      <div>Path: {d}</div>
    </>
  );
}