Single d Attribute Text Input and 3 Presets
The core of SVG shape drawing is the path data written in the d attribute of the path element. This editor specializes in single d attribute text input and visual previews.
When you enter commands and numbers in the left text area, the shape is rendered in real-time on the 500x400 pixel canvas on the right.
To assist with initial operations, the editor provides three preset shapes. The first is "Bezier curve (S-shape)", which uses a cubic Bezier curve (C command) and an S command to draw a smooth curve.
The second is "Triangle (closed path)", forming a polygon with straight lines (L command) and closing it with the Z command. The third is "Quadratic curve (lemon shape)", combining quadratic Bezier curves (Q command) to create a leaf-like shape.
Loading these samples lets you instantly see what trajectories each command draws. Parsing and rendering are executed entirely within the browser's memory, supporting inputs up to a 100,000-character limit.
The parser accurately processes commands like M, L, H, V, C, S, Q, T, A, and Z, including complex notations such as adjacent signs, decimals, exponents, repeated groups, and arc flags.
The entire d attribute is interpreted by the browser without sending data to external servers.
Differences in Absolute and Relative Coordinate Drawing
SVG path data has two notation methods: an absolute coordinate system based on the canvas origin (top left), and a relative coordinate system based on the previous current position.
Under W3C SVG specifications, uppercase commands (e.g., M, L, C) specify absolute coordinates, while lowercase commands (e.g., m, l, c) specify relative coordinates.
This tool parses the input path string and renders it using the browser's built-in SVG capabilities. During this process, any relative coordinates are automatically converted into absolute coordinates.
Additionally, horizontal (H) and vertical (V) line commands are transformed into standard L commands, and any additional coordinate groups following an initial M command are converted to L.
For instance, entering M 50 50 l 100 0 effectively becomes absolute coordinates drawing a line segment to (150, 50).
The visual handle generation logic creates control points for your paths, allowing you to interact with the shapes. Because relative values are converted to absolute ones during parsing, this avoids incorrect drag interpretations of relative coordinates, though modifying the shape itself is the intended goal of the dragging action.
Handles are generated for all coordinate groups across supported commands, rather than just the first set. For commands like M (move to) and L (line to), handles are provided for the end points.
For curve commands such as C (cubic Bezier), S (smooth cubic Bezier), and Q (quadratic Bezier), handles are provided for both the explicit control points and the end points.
For T (smooth quadratic Bezier) commands, a handle is provided for the end point. Note that for S and T commands, the reflected control points are calculated automatically by the browser and do not have manual drag handles.
For arc commands (A), a handle is provided exclusively for the end point, and Z commands close the path and have no handles at all.
This structured handle assignment ensures that users can modify the defined points of the path directly through the interface, manipulating the absolute coordinates to alter the SVG geometry.
Supported Range of Handles Editable on the Canvas
When a path is drawn on the canvas, blue circles (anchors) and white circles (control points) appear along the trajectory. These handles can be dragged with the mouse to adjust positions.
The editor comprehensively supports handle dragging for all argument groups across commands like move to start M, straight line L, quadratic Bezier link T, quadratic Bezier Q, cubic Bezier C, and cubic Bezier link S.
Repeated arguments generate handles for every coordinate group present in the path string. For arc commands (A), handles are provided for the end points, though arc radii do not have handles.
Z commands do not support dragging as they just close the path. Furthermore, horizontal (H) and vertical (V) line commands are converted to standard L commands during the parsing process to allow for two-dimensional dragging.
This unified handling of coordinate groups enables point manipulation across the entire length of complex SVG paths.
A parser running in a React hook reads the input values up to the 100,000-character limit. It processes SVG syntax, parsing adjacent signs (such as 10-5), decimals, and exponent notation (like 1e+2).
It interprets repeated coordinate groups and arc flags by checking the expected number of arguments, finite numbers, and specific flag constraints.
Because the data parameters are individually validated and normalized into absolute coordinates, any invalid or malformed input will be rejected during the parsing stage and cannot be output.
The internal generation relies strictly on safe numerical commands extracted from the string, preventing broken syntax from being exported or saved.
Precise Coordinate Acquisition via Mouse Dragging
Dragging a handle dynamically calculates new coordinate values from the pointer position and rewrites the d attribute text. The process utilizes the SVG's getScreenCTM().inverse() method to acquire coordinates by mapping the screen position back to the SVG coordinate system.
This approach applies the scale and transformation matrix corrections required to align the drag position with the actual path coordinates.
Furthermore, the coordinates are clamped to the allowed working range to prevent points from being dragged outside the designated canvas boundaries.
These extracted coordinate values are restricted to prevent the shape from jumping outside the canvas. Specifically, they are clamped using Math.max and Math.min functions so the X coordinate stays between 0 and the canvas width (500), and the Y coordinate stays between 0 and the canvas height (400).
Furthermore, when updating the parameter array and rebuilding the path string, all calculated coordinates maintain their decimal values based on standard JavaScript floating-point number precision rather than being rounded to integers.
While this preserves fractional coordinate data, you should be aware of JavaScript's inherent floating-point precision limits and the effects of clamping or dragging modifications.
Because there is still no Undo function available in this tool, it is highly recommended to keep a backup of your original path string before dragging points on complex paths, as any coordinate changes are immediately committed to the path data without a history state to revert to.
Line Color Differences When Copying and Saving SVG Files
Two buttons, "Save SVG file" and "Copy SVG code", are provided to use the path data externally. The output is safely generated from fully validated commands, meaning raw unescaped input is never used, and any invalid input cannot be output at all.
The "Copy SVG code" option conveniently preserves currentColor for its stroke, while the "Save SVG file" option uses a black stroke, maintaining a helpful distinction for different usage contexts.
Clicking "Save SVG file" generates file data within the browser using a Blob object and downloads it as custom_path.svg. The path in this file is exported with stroke="black", stroke-width="3", and fill="none" so the line is visible when opened as a standalone image.
Conversely, using the "Copy SVG code" button copies the SVG tag to the clipboard with stroke="currentColor". This allows the copied code to inherit the parent element's text color when pasted into HTML or React components.
The copy action operates using a Promise, triggering a success notification within the then handler once the text is successfully written to the clipboard, and it implements a catch handler to display a failure message if the clipboard operation is rejected.
This provides clear feedback on the status of your copy operation.
Unsupported Ranges and Operational Constraints in Complex Paths
Because this editor is intended for simple visual adjustments of a single path, it does not support complex processing like full-fledged drawing software.
The input target is exclusively the d attribute string; it cannot read or preview an entire SVG file containing multiple path elements or style definitions.
The internal parser checks the path syntax by verifying the correct number of arguments for supported commands, checking for finite numbers, and validating arc flags.
Relative coordinates are correctly converted to absolute ones during this parsing process. If invalid or fatal syntax errors are detected, the export functionality is disabled to prevent saving broken graphics.
However, there are no features to automatically correct tangent angles or provide full comprehensive vector SVG editing capabilities beyond point dragging.
The text input accommodates up to 100,000 characters for processing.
Directly editing the text area or loading a preset immediately overwrites the previous state, and there is no Undo function. Therefore, when attempting to edit complex existing path data, it is strongly recommended to save the original d attribute text in a separate text editor beforehand.