# `Yog.Render.SVG`
[🔗](https://github.com/code-shoily/yog_ex/blob/v1.0.0/lib/yog/render/svg.ex#L1)

Pure Elixir SVG visualization generator for graphs.

This module renders a graph and its associated 2D layout coordinates (computed
by `Yog.Layout` functions) into a raw XML/SVG string. The output can be written
to a file, rendered directly in Phoenix/LiveView templates, or displayed in Livebook
(by wrapping it in `Kino.HTML.new/1`).

## Styling Options

Customize elements by passing options:
- Node radius and color.
- Node stroke color and stroke width.
- Edge color and stroke width.
- Show/hide text labels inside nodes.

# `to_svg`

```elixir
@spec to_svg(
  Yog.Graph.t() | Yog.Multi.Graph.t(),
  %{required(Yog.Graph.node_id()) => {float(), float()}},
  keyword()
) :: String.t()
```

Generates a raw XML/SVG string representing the graph layout.

## Options

  * `:width` - The canvas pixel width (default: `600`).
  * `:height` - The canvas pixel height (default: `400`).
  * `:padding` - Bounding space padding around layout margins (default: `40`).
  * `:node_radius` - Radius of node circles (default: `12`).
  * `:node_color` - Fill color of nodes (default: `"#3b82f6"`).
  * `:node_stroke` - Stroke color of nodes (default: `"#1e3a8a"`).
  * `:node_stroke_width` - Node stroke width (default: `2`).
  * `:edge_color` - Stroke color of edges (default: `"#9ca3af"`).
  * `:edge_width` - Stroke width of edges (default: `2`).
  * `:show_labels` - Boolean indicating whether to show node ID text labels (default: `true`).
  * `:text_color` - Text color for node labels (default: `"white"`).
  * `:text_size` - Font size for node labels (default: `10`).

## Examples

    iex> graph = Yog.from_unweighted_edges(:undirected, [{1, 2}])
    iex> pos = Yog.Layout.circular(graph)
    iex> svg = Yog.Render.SVG.to_svg(graph, pos)
    iex> String.starts_with?(svg, "<svg")
    true

---

*Consult [api-reference.md](api-reference.md) for complete listing*