# Imágenes SVG de cartas
`/v1/render/*` devuelve el mapa como SVG listo: rueda natal, bi‑ y tri‑rueda, compuesto, cartas védicas (norte, sur, este), cuadrícula de aspectos, cosmograma, fase de la Luna, línea de tiempo, biorritmos, banda de eclipse y carta estelar. Envías los datos de nacimiento, calculamos el mapa y lo dibujamos. Lista completa de rutas y parámetros en la [guía API](/docs/api/).
El mismo código de renderizado está publicado como paquete npm [`@astroway/render`](https://www.npmjs.com/package/@astroway/render): si ya tienes los datos del mapa, puedes dibujar la rueda en el navegador o en tu propio servidor, y coincidirá byte a byte con lo que devuelve la API. La versión del renderizado la devuelve la API en el encabezado `X-Render-Version`.
## Solicitud
```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"` devuelve el propio archivo, el `json` típico envuelve la cadena SVG en la respuesta normal de la API. Temas: `light`, `dark`, `console` y `css`.
## Tema css: colores de tu sitio
Con `theme: "css"` cada color en el SVG se escribe como una variable CSS con el color del tema claro como reserva, por ejemplo `var(--aw-ring, #222)`. Inserta el SVG en las páginas HTML (no en `![]()
`: allí no pasan las variables) y define las variables:
```css
.chart {
--aw-chart-bg: transparent;
--aw-ring: #444;
--aw-fg: currentColor;
--aw-aspect-tense: crimson;
}
```
Sin ninguna variable, el mapa se ve exactamente como `light`. La regla CSS de tu página tiene más prioridad que la variable, por lo que un elemento individual puede recolorarse con una clase.
| Variable | Qué colorea |
|---|---|
| `--aw-chart-bg` | fondo del mapa |
| `--aw-fg`, `--aw-muted` | glifos y etiquetas, texto secundario y marcas |
| `--aw-ring` | círculos y líneas de la cuadrícula |
| `--aw-houses-fill` | campo de la carta védica, disco de la carta estelar, mapa de eclipse |
| `--aw-benefic` | planetas del círculo externo, lagna en la carta védica, eventos de la línea de tiempo sin color propio |
| `--aw-malefic` | signo de retrogradación ℞, banda de eclipse |
| `--aw-aspect-harmonious`, `--aw-aspect-tense`, `--aw-aspect-neutral`, `--aw-aspect-minor`, `--aw-aspect-quintile` | líneas y símbolos de aspectos |
| `--aw-moon-shadow`, `--aw-moon-light` | fase de la Luna |
| `--aw-cycle-physical`, `--aw-cycle-emotional`, `--aw-cycle-intellectual` | biorritmos |
## Clases y atributos data
En el tema `css` las ruedas occidentales (`wheel-western`, `bi-wheel`, `tri-wheel`, `composite`) y la cuadrícula de aspectos tienen clases fijas. Los nombres solo se añaden, nunca se renombran, por lo que puedes escribir estilos y scripts sobre ellas.
- Rueda: `aw-bg`, `aw-ring`, `aw-sign aw-sign-leo`, `aw-sign-line`, `aw-tick`, `aw-house-cusp`, `aw-house-number`, ejes `aw-axis aw-asc` (`aw-dsc`, `aw-mc`, `aw-ic`), sus etiquetas `aw-label aw-axis-label`, título `aw-title`.
- Planeta: grupo ``, la retrograda tiene también `aw-retrograde`, planetas del círculo externo `aw-layer-1`. Dentro `aw-glyph`, `aw-retro` (símbolo ℞) y `aw-planet-tick`.
- Aspecto: línea `aw-aspect aw-aspect-trine`, línea entre dos cartas también `aw-cross-aspect`.
- Cuadrícula de aspectos: `aw-grid-header`, `aw-grid-cell`, `aw-aspect aw-aspect-square`, `aw-orb`.
El grupo de planeta tiene `data-planet` (`sun`, `north-node`, `lilith`; en el círculo externo `b-sun`, en el tercero `c-sun`) y `data-label` con el nombre y posición: `Mercury 8°00' Taurus, retrograde`. La línea de aspecto y la celda de la cuadrícula tienen `data-a` y `data-b`. Así se resaltan todos los aspectos del planeta al pasar el cursor:
```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));
}));
```
## Tus propias etiquetas: labels
Las ruedas occidentales aceptan `options.labels`: tus palabras para las etiquetas de los ejes, para `` y `<desc>` que leen los lectores de pantalla, y para los nombres en `data-label`. Las claves que no existan permanecen en inglés; nosotros no traducimos nada.
```json
"options": {
"theme": "css",
"labels": {
"asc": "Асц", "mc": "МС", "title": "Натальна карта",
"bodies": { "Sun": "Сонце", "Moon": "Місяць" },
"signs": ["Овен","Телець","Близнюки","Рак","Лев","Діва","Терези","Скорпіон","Стрілець","Козеріг","Водолій","Риби"],
"retrograde": "ретроградний"
}
}
```
`bodies` tiene claves en inglés (`Sun`, `North Node`), `signs` son exactamente doce nombres, comenzando por Aries, cada etiqueta hasta 40 caracteres.
## Aspectos entre dos cartas
`/v1/render/bi-wheel` con `options.crossAspects: true` dibuja con línea punteada los aspectos entre la carta interna y la externa, el mismo conjunto que `POST /v1/synastry` devuelve como `crossAspects`. El par donde uno de los cuerpos no está dibujado se omite. Desactivado por defecto.
## Carta lista en lugar de datos de nacimiento
Si ya tienes la carta, porque acabas de llamar a `POST /v1/chart`, envía su `data` en el campo `chart` en lugar de los datos de nacimiento, y solo la dibujaremos. Así funcionan `wheel-western`, `aspect-grid` y `bi-wheel` (allí `natal.chart` y `outer.chart`, ambas deben ser cartas listas). La imagen será byte a byte idéntica a la generada a partir de los datos de nacimiento.
```json
{ "chart": { "planets": [ ... ], "houses": { "cusps": [ ... ], "ascendant": 7.77, "mc": 277.12 }, "aspects": [ ... ] },
"options": { "theme": "css" } }
```
Los campos extra de la respuesta pueden dejarse sin recortar. Se valida lo que se dibuja: de 1 a 30 cuerpos, longitudes de 0 a 360, exactamente 12 cúspides. Un cuerpo que tenga tanto `chart` como datos de nacimiento genera un error 400.
## Costo
Llamar a `/v1/render/*` con datos de nacimiento cuesta 10 créditos, ya que el mapa se calcula. Con una carta lista `chart` las llamadas a `/v1/render/wheel-western`, `/v1/render/aspect-grid` y `/v1/render/bi-wheel` cuestan 1 crédito. El tema, las clases y las etiquetas no afectan el precio.