Building an SVG Gantt Chart by Hand
A Gantt chart places one horizontal bar per task, positioned by start date and sized by duration along a shared time axis.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Mapping Dates to Horizontal Positions
A Gantt chart's x axis is a time scale, so each task's bar starts at the pixel position corresponding to its start date and extends to the position of its end date, with the bar's width simply being the difference between those two scaled coordinates.
- The x axis is a time scale mapping dates to pixel positions
- Each bar starts at its task's scaled start date coordinate
- Bar width is the difference between scaled end and start positions
Stacking Task Rows Vertically
Each task occupies its own horizontal row, with vertical position computed by multiplying the task's index by a fixed row height, and adding a small gap between rows keeps adjacent bars visually distinct without requiring any complex layout calculation.
- Each task's row y position is its index times a fixed row height
- A small gap between rows keeps adjacent bars visually distinct
- This index-based stacking needs no complex layout calculation
Frequently Asked Questions
How do I convert task dates into SVG x coordinates?
Build a time scale mapping the project's date range onto the chart's pixel width, then pass each task's start and end dates through it to get bar coordinates.
How can I show dependencies between Gantt tasks?
Draw path or line elements connecting the end of a predecessor bar to the start of its dependent bar, typically with an arrowhead marker at the target end.
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