Build and edit SVGs in the browser http://jxnblk.com/paths

 

Paths

 

jxnblk.com

 

SVG Path Commands

The path element is used to create complex shapes based on a series of commands. Each command begins with a letter and is followed by numbers representing x/y coordinates according to the SVG’s viewBox attribute. Uppercase letters represent absolute coordinate movements, and lowercase letters represent relative movements. For simplicity, the Paths app only supports absolute movements.

For a more in-depth introduction, see the MDN Path Tutorial.

M x y

The Moveto command moves the current point without drawing. Paths must begin with a Moveto command to determine where the drawing starts.

L x y

The Lineto command draws a straight line from the previous command to its x/y coordinates.

H x

The Horizontal Lineto command draws a horizontal line.

V y

The Vertical Lineto command draws a vertical line.

C x1 y1 x2 y2 x y

The Curveto command draws a cubic Bézier curve with control points for the beginning and end of the curve. The final x/y coordinate pair determines where the line ends.

S x2 y2 x y

The Shorthand/Smooth Curveto command draws a cubic Bézier curve with a control point for the end of the curve. The first control point is a reflection of the control point from the previous command.

Q x1 y1 x y

The Quadratic Bézier Curveto command draws a quadratic Bézier curve with a single control point for both points on the curve.

T x y

The Shorthand/Smooth Quadratic Bézier Curveto command draws a quadratic Bézier curve, using a reflection of the previous command’s control point.

Z

The Closepath command draws a line to the intial point to close a path.

A rx ry x-axis-rotaion large-arc-flag sweep-flag x y

Note: The Arc command is currently not supported in the Paths app

The Elliptical Arc command draws an elliptical arc to the x/y coordinates.

How-To Use the App

Unlike other vector drawing applications, Paths has no tool palette or modes. Instead it exposes the path command syntax in a reactive user interface.

  • Use the form to the right to manually adjust the type and parameters for each command.
  • Add new points with the button below the form.
  • Remove points with the × button next to the command.
  • Click to select points on the canvas.
  • Click and drag to move points.
  • Use the arrow keys to nudge points.
  • Click anywhere on the canvas to add a new point after the selected point.
  • Click the blue × button to the right of the command syntax tooltip to remove a point.
  • Click outside of the canvas to deselect all points.
  • Use the toolbar below the canvas to toggle the following:
    • Grid visibility
    • Snap to grid
    • Path preview mode
  • Use the Download link to save the SVG.
  • Use the + & - buttons to zoom in and out.
  • Copy and paste the URL (along with the parameters) to share links with others.

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요