Building an SVG Candlestick Chart
Each candlestick combines a rect body spanning open to close with a line wick spanning the period's high and low.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Body and Wick Geometry per Period
Each candle is composed of two elements: a rect whose vertical extent spans the open and close prices, and a line drawn through the rect's horizontal center spanning the period's high and low, with the line typically rendered first so the body draws over it.
- A rect spans vertically between the period's open and close prices
- A line through the rect's center spans the period's high and low
- Drawing the wick first lets the body render cleanly over it
Encoding Direction with Fill Color
The convention is to fill a candle one color when the close is above the open and a contrasting color when the close falls below, letting a reader scan a long series and immediately identify upward and downward periods without reading individual values.
- One fill color indicates the close finished above the open
- A contrasting color indicates the close finished below the open
- This lets readers scan long series and spot direction instantly
Frequently Asked Questions
What do the thin lines above and below a candlestick body represent?
They're the wicks, spanning the period's high and low prices, while the thicker body spans only the open and close values.
Why draw the wick line before the candle body?
Drawing the wick first means the body rect renders over its middle section, producing the clean silhouette where the wick appears only above and below the body.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG