# SVG chart images

`/v1/render/*` returns a chart as a ready SVG: natal wheel, bi- and tri-wheel, composite, Vedic charts (North, South, East), aspect grid, cosmogram, moon phase, timeline, biorhythm, eclipse path and star map. You send birth data, we compute the chart and draw it. Every route and parameter is in the [API reference](/en/docs/api/).

The same drawing code is published as the npm package [`@astroway/render`](https://www.npmjs.com/package/@astroway/render): if you already hold the chart data, draw the wheel in the browser or on your own server and it matches what the API returns, byte for byte. The API reports the drawing version in the `X-Render-Version` header.

## Request

```bash
curl -X POST https://api.astroway.info/v1/render/wheel-western \
  -H "X-Api-Key: $ASTROWAY_KEY" -H "Content-Type: application/json" \
  -d '{"date":"1990-05-15","time":"14:30:00","timezoneOffset":3,"latitude":50.45,"longitude":30.52,
       "options":{"theme":"css","format":"svg"}}' > wheel.svg
```

`format: "svg"` returns the file itself; the default `json` wraps the SVG string in the usual API response. Themes: `light`, `dark`, `console` and `css`.

## The css theme: your site's colours

With `theme: "css"` every colour in the SVG is a CSS variable with the light theme's colour as fallback, for example `var(--aw-ring, #222)`. Inline the SVG into the page's HTML (not an `<img>`: variables do not reach inside one) and set the variables:

```css
.chart {
  --aw-chart-bg: transparent;
  --aw-ring: #444;
  --aw-fg: currentColor;
  --aw-aspect-tense: crimson;
}
```

With no variable set the chart looks exactly like `light`. A CSS rule on your page beats the variable, so a single element can be recoloured by class.

| Variable | Paints |
|---|---|
| `--aw-chart-bg` | chart background |
| `--aw-fg`, `--aw-muted` | glyphs and labels, secondary text and ticks |
| `--aw-ring` | circles and grid lines |
| `--aw-houses-fill` | Vedic chart field, star map disc, eclipse map |
| `--aw-benefic` | outer-wheel planets, the lagna in Vedic charts, timeline events without their own colour |
| `--aw-malefic` | the retrograde mark ℞, the eclipse path |
| `--aw-aspect-harmonious`, `--aw-aspect-tense`, `--aw-aspect-neutral`, `--aw-aspect-minor`, `--aw-aspect-quintile` | aspect lines and symbols |
| `--aw-moon-shadow`, `--aw-moon-light` | moon phase |
| `--aw-cycle-physical`, `--aw-cycle-emotional`, `--aw-cycle-intellectual` | biorhythm |

## Classes and data attributes

In the `css` theme the Western wheels (`wheel-western`, `bi-wheel`, `tri-wheel`, `composite`) and the aspect grid carry stable classes. Names are only ever added, never renamed, so styles and scripts can rely on them.

- Wheel: `aw-bg`, `aw-ring`, `aw-sign aw-sign-leo`, `aw-sign-line`, `aw-tick`, `aw-house-cusp`, `aw-house-number`, axes `aw-axis aw-asc` (`aw-dsc`, `aw-mc`, `aw-ic`), their labels `aw-label aw-axis-label`, the title `aw-title`.
- Planet: a group `<g class="aw-planet aw-planet-sun">`, plus `aw-retrograde` when retrograde and `aw-layer-1` on the outer wheel. Inside: `aw-glyph`, `aw-retro` (the ℞ mark) and `aw-planet-tick`.
- Aspect: a line `aw-aspect aw-aspect-trine`; a line between the two charts also has `aw-cross-aspect`.
- Aspect grid: `aw-grid-header`, `aw-grid-cell`, `aw-aspect aw-aspect-square`, `aw-orb`.

A planet group has `data-planet` (`sun`, `north-node`, `lilith`; `b-sun` on the outer wheel, `c-sun` on the third) and `data-label` with the name and position: `Mercury 8°00' Taurus, retrograde`. Aspect lines and grid cells have `data-a` and `data-b`. Highlighting all of a planet's aspects on hover:

```js
svg.querySelectorAll('.aw-planet').forEach((g) => g.addEventListener('mouseenter', () => {
  const id = g.dataset.planet;
  svg.querySelectorAll('.aw-aspect').forEach((line) =>
    line.classList.toggle('is-on', line.dataset.a === id || line.dataset.b === id));
}));
```

## Your own words: labels

The Western wheels take `options.labels`: your words for the axis labels, the `<title>` and `<desc>` screen readers announce, and the names inside `data-label`. Absent keys stay in English; we translate nothing for you.

```json
"options": {
  "theme": "css",
  "labels": {
    "asc": "Asc", "mc": "MC", "title": "Birth chart",
    "bodies": { "Sun": "Soleil", "Moon": "Lune" },
    "signs": ["Bélier","Taureau","Gémeaux","Cancer","Lion","Vierge","Balance","Scorpion","Sagittaire","Capricorne","Verseau","Poissons"],
    "retrograde": "rétrograde"
  }
}
```

`bodies` is keyed by the English name (`Sun`, `North Node`), `signs` is exactly twelve names starting from Aries, every label up to 40 characters.

## Aspects between two charts

`/v1/render/bi-wheel` with `options.crossAspects: true` draws the aspects between the inner and the outer chart as dashed lines, the same set `POST /v1/synastry` returns as `crossAspects`. A pair with a body that is not drawn is skipped. Off by default.

## A chart you already hold instead of birth data

If you already have the chart because you just called `POST /v1/chart`, send its `data` as `chart` instead of birth data and we only draw it. This works on `wheel-western`, `aspect-grid` and `bi-wheel` (there `natal.chart` and `outer.chart`, both must be ready charts). The image comes out byte for byte the same as from birth data.

```json
{ "chart": { "planets": [ ... ], "houses": { "cusps": [ ... ], "ascendant": 7.77, "mc": 277.12 }, "aspects": [ ... ] },
  "options": { "theme": "css" } }
```

No need to strip the extra fields of the response. What gets drawn is checked: 1 to 30 bodies, longitudes 0 to 360, exactly 12 cusps. A body carrying both `chart` and birth data is refused with 400.

## Cost

A `/v1/render/*` call with birth data costs 10 credits, because the chart is computed. With a ready `chart`, `/v1/render/wheel-western`, `/v1/render/aspect-grid` and `/v1/render/bi-wheel` cost 1 credit. Theme, classes and labels do not change the price.