SVG Path Visualizer & Anchor Point Inspector
Visualize SVG path commands, inspect Bézier curve control points, and examine anchor coordinates in real time.
Vector Path Input & Setup
Vector Inspection Canvas
Anatomical Guide to SVG Path Commands and Syntax
The Scalable Vector Graphics (SVG) d attribute defines the outline geometry of paths through a compact, micro-syntax series of commands and coordinates. In the SVG 2.0 specification, every command is represented by a single alphabetic letter. An uppercase letter denotes absolute coordinates positioned directly in the canvas coordinate system, whereas a lowercase letter defines relative offsets evaluated from the terminal position of the preceding command.
| Command | Name | Arguments | Geometric Behavior |
|---|---|---|---|
| M / m | MoveTo | (x y)+ | Repositions the pen cursor without drawing. Subsequent coordinates imply a LineTo. |
| L / l | LineTo | (x y)+ | Draws a straight linear vector from the current pen location to target coordinates. |
| H / h | Horizontal LineTo | x+ | Draws a perfectly horizontal line, leaving the current Y coordinate unchanged. |
| V / v | Vertical LineTo | y+ | Draws a perfectly vertical line, leaving the current X coordinate unchanged. |
| C / c | Cubic Bézier | (x1 y1 x2 y2 x y)+ | Draws a cubic curve using two independent control handles for tangent acceleration. |
| S / s | Smooth Cubic Bézier | (x2 y2 x y)+ | Draws a continuous cubic curve; the first control point reflects the preceding handle. |
| Q / q | Quadratic Bézier | (x1 y1 x y)+ | Draws a parabolic curve utilizing a single shared control point. |
| T / t | Smooth Quadratic | (x y)+ | Smoothly chains quadratic curves by reflecting the previous control handle. |
| A / a | Elliptical Arc | (rx ry rot laf sf x y)+ | Draws an elliptical arc segment defined by radii, tilt angle, and sweep flags. |
| Z / z | ClosePath | none | Closes current subpath by drawing a straight segment back to the initial MoveTo origin. |
Mathematical Formulation of Parametric Bézier Curves
Vector rendering engines generate smooth curved outlines by evaluating Bernstein polynomials over a normalized interval $t \in [0, 1]$. Understanding how control handles pull the curve enables precise anchor positioning and eliminates unwanted inflection spikes during vector design and CSS animation.
Quadratic Curve Formulation (Degree 2)
A quadratic curve interpolates between start anchor $P_0$, control point $P_1$, and end anchor $P_2$:
Evaluates faster in memory and produces symmetric parabolic arcs commonly used in font glyphs.
Cubic Curve Formulation (Degree 3)
A cubic curve introduces two independent handles ($P_1$ and $P_2$) between $P_0$ and $P_3$:
Provides complete freedom to model asymmetrical S-curves, acute inflection points, and organic silhouettes.
Decoding the SVG Elliptical Arc Command (A)
The Elliptical Arc command (A rx ry x-axis-rotation large-arc-flag sweep-flag x y) is the most versatile yet complex instruction in vector graphics. Because two points on an ellipse can be connected by four distinct arcs, the boolean flags determine the exact trajectory:
Defines the horizontal and vertical semi-major and semi-minor radii of the ellipse. If equal, renders a circular arc.
The angular tilt in degrees by which the ellipse coordinate system is rotated relative to the canvas X-axis.
Value 0 selects the smaller arc (angular span ≤ 180°); value 1selects the larger arc (> 180°).
Value 0 renders counter-clockwise ("negative angle"); value 1 renders clockwise ("positive angle").
Production Best Practices: Optimization & Morphing Readiness
Coordinate Precision Truncation
Standard vector exports from Illustrator or Figma often include floating-point decimals with 6+ decimal places. Limiting precision to 1 or 2 decimals reduces SVG file size by up to 60% without perceptible visual quality loss.
Consistent Winding & Direction
Compound vector shapes rely on the Non-Zero Winding Rule (fill-rule="nonzero"). Outer contours must run clockwise while interior cutouts must run counter-clockwise to render clean transparent holes.
MorphSVG Interpolation Parity
When animating shapes using GreenSock MorphSVG or Framer Motion, shapes interpolate cleanest when both source and destination paths contain identical command counts and origin anchor orientations.
Frequently Asked Questions
What is the SVG path d attribute and how is it structured?
The SVG path d attribute defines the geometry of a vector outline using a serialized sequence of alphanumeric drawing commands and coordinate parameters. Standard commands include MoveTo (M/m), LineTo (L/l), Horizontal/Vertical LineTo (H/h, V/v), Cubic Bézier (C/c, S/s), Quadratic Bézier (Q/q, T/t), Elliptical Arc (A/a), and ClosePath (Z/z). Uppercase commands use absolute canvas coordinates, while lowercase commands use relative coordinates from the current cursor position.
What is the difference between Cubic (C) and Quadratic (Q) Bézier curves?
A cubic Bézier curve (C) utilizes two independent control handles to calculate tangent acceleration and direction at both the start and endpoints, defined by parametric polynomials of degree three. A quadratic Bézier curve (Q) utilizes only a single shared control point between start and end anchors, generating a parabolic curve of degree two that requires less calculation overhead.
How do Smooth Bézier commands (S and T) calculate missing control points?
The Smooth Cubic (S) and Smooth Quadratic (T) commands maintain continuous curvature (G1 continuity) by automatically calculating the first control point as the exact point-reflection of the preceding command's final control point across the current anchor. If the preceding command was not a curve of matching degree, the current anchor point is used directly as the first control handle.
How does the SVG Elliptical Arc command (A) define arc curvature?
The Elliptical Arc command accepts seven distinct parameters: rx (horizontal radius), ry (vertical radius), x-axis-rotation (elliptical tilt angle in degrees), large-arc-flag (0 for arcs ≤ 180°, 1 for arcs > 180°), sweep-flag (0 for counter-clockwise, 1 for clockwise), and the target end coordinates (x, y).
Why is interactive path inspection essential for vector animation and optimization?
Vector morphing libraries (like GSAP MorphSVG or Framer Motion) require matching command topologies and identical sub-path point distributions between source and target shapes to prevent shape distortion. Visual anchor inspection enables developers to verify clockwise winding rules, point densities, and control tangent alignments before deployment.
Related & Complementary Utilities
Explore more privacy-first client-side web tools.
PNG to JPG & Format Converter Suite
Convert PNG images to JPG, WebP, or PNG with batch processing, custom transparency fill colors, and real-time canvas compression. 100% client-side execution.
Favicon Generator & Multi-Resolution App Icon Suite
Generate standard browser favicons, Apple touch icons, and Android PWA manifest icon suites client-side.
Next-Gen HEIC & AVIF Image Converter
Batch convert Apple HEIC, HEIF, and AVIF images to standard JPG or PNG formats instantly and securely in your browser with zero server uploads.