SVGMend

SVG path editor

Edit SVG path data visually

See what a d attribute actually draws: every command, anchor point and Bézier handle. Drag points into place, then round, transform and minify the result.

Runs in this tab. Nothing is uploaded.

Paste path data or try the sample

Canvas

Transform

Output


						

							
							
							
							
						

					

					

						
Commands 

						
    
					
    
				
    
			
    
		
    
	
    

	
    
		
    
			
    
				
    Reading and editing path data
    
				
    A path is a list of commands. Upper-case letters use absolute coordinates, lower-case ones are relative to the current point: M moves, L/H/V draw lines, C/S are cubic Bézier curves, Q/T quadratic ones, A draws an elliptical arc and Z closes the shape. Numbers after a command repeat it, so M0 0 10 10 is a move followed by a line; the list shows such implicit commands in a lighter colour.
    
				
      
					
    • Points: orange squares are anchors the path passes through; cyan circles are Bézier handles. Dashed handles are reflections implied by S and T. Drag a point, or Tab to it and use the arrow keys. Moving an anchor carries its handles along.
      • 
					
    • To absolute / To relative rewrite every command without changing the shape. Relative paths are often shorter and easier to move.
      • 
					
    • Move, Scale and Flip change the coordinates themselves, so no transform attribute is needed. Arcs are transformed exactly.
      • 
					
    • Round limits the decimals. Relative coordinates are rounded against the rounded position, so errors don’t add up along the path.
      • 
					
    • Minified output drops repeated letters, spaces and leading zeros, and picks absolute or relative per command, whichever is shorter.
      • 
				
    
			
    
			
		
    
	
    

	
    
		
    
			
    Questions
    
			
    
				
    Can I edit a path from a full SVG file?
    Yes. Open or paste the SVG and pick one of its paths from the list. Copy the result back as a d attribute or as a complete path element.
    
				
    Why do arc flags look squashed together?
    SVG lets the two arc flags be written without spaces, as in a5 5 0 1010 0. The parser understands that compact form; the output always separates them for readability and compatibility.
    
			
    
		
    
	
    

	
    

    

	
    
		
    
			
    
				
    More SVG tools