Loading page
About this tool
Draw straight or curved annotation arrows on a quadratic Bezier path and export clean, editable SVG markup.
SVG Arrow Generator turns two points and a bow amount into a ready-to-paste annotation arrow drawn as a single quadratic Bezier curve (the SVG 'Q' path command) with a matching arrowhead. The head is rotated to the curve's tangent at the tip, so it always points along the path instead of along the straight line between the endpoints. Stroke and fill use currentColor, which means one file works on light and dark backgrounds without editing.
Open SVG Arrow Generator on AltFTool — it loads instantly in your browser.
Upload or drag in the file you want to work with.
Adjust the settings and preview the result.
Download the finished file to your device.
The arrowhead follows the curve's derivative at the tip, so it never looks glued on at the wrong angle.
currentColor lets one arrow inherit the surrounding text colour instead of shipping a baked-in hex value.
Output is a plain path plus one head element — easy to tweak in any text editor or paste into JSX.
Use a quadratic Bezier: M x1 y1 Q cx cy x2 y2, where the control point (cx, cy) sits off the straight line between the two ends. Because the curve passes halfway between the chord midpoint and the control point, offsetting the control point by twice your desired bow height gives exactly that bow.
A separate polygon or path is more portable. SVG markers scale with stroke width and are stripped or mis-rendered by several editors, email clients and design tools, whereas an explicit head shape survives copy-paste anywhere.
Because it was aligned to the straight line between the endpoints rather than to the curve. The correct direction is the Bezier's derivative at the tip: for a quadratic that is 2 x (P2 - C), the vector from the control point to the end point.
Set a CSS color on any parent element — the markup uses currentColor for both stroke and fill, so the arrow inherits it. To pin a fixed colour instead, replace currentColor with your own value in the stroke and fill attributes.