How to Create an SVG Pie Chart  Pure SVG and D3.js Guide
SVG pie charts use arc path commands  learn the math, build manually, or use D3.js for data-driven slice generation.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Pie Chart Arc Math
Each pie slice is an SVG `<path>` using the `A` (arc) command. Calculate the start and end coordinates of each arc from the percentage value: `x = cx + r * cos(angle)`, `y = cy + r * sin(angle)`.
- Arc command: M cx,cy L x1,y1 A r,r 0 largeArc,1 x2,y2 Z
- large-arc-flag: 1 if slice > 50%, 0 if ≤ 50%
- Convert percentage to radians: angle = percent * 2À
Pie Charts with D3.js
D3's `d3.pie()` and `d3.arc()` calculate paths from data arrays automatically. Pass your data, call arc.path(), and append the result as SVG `<path>` elements with color fills per slice.
- d3.pie()(data) → computes start/end angles per slice
- d3.arc().innerRadius(0).outerRadius(r) → path generator
- Set innerRadius > 0 for donut chart variation
Frequently Asked Questions
How do I add labels to an SVG pie chart?
Calculate the midpoint angle of each slice, then place a <text> element at cx + labelRadius * cos(midAngle), cy + labelRadius * sin(midAngle) for each slice label.
What is a donut chart in SVG?
A donut chart is a pie chart with a hollow center  set d3.arc().innerRadius(50).outerRadius(100) or manually calculate arcs with an inner radius greater than zero.
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