# SVG


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

``` python
from nbdev.showdoc import show_doc
```

You can create SVGs directly from strings, for instance (as always, use
`NotStr` or `Safe` to tell FastHTML to not escape the text):

``` python
svg = '<svg width="50" height="50"><circle cx="20" cy="20" r="15" fill="red"></circle></svg>'
show(NotStr(svg))
```

<svg width="50" height="50"><circle cx="20" cy="20" r="15" fill="red"></circle></svg>

You can also use libraries such as
[fa6-icons](https://www.fastht.ml/docs/fa6-icons/).

To create and modify SVGs using a Python API, use the FT elements in
`fasthtml.svg`, discussed below.

**Note**: `fasthtml.common` does NOT automatically export SVG elements.
To get access to them, you need to import `fasthtml.svg` like so

``` python
from fasthtml.svg import *
```

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L34"
target="_blank" style="float:right; font-size:smaller">source</a>

### Svg

>  Svg (*args, viewBox=None, h=None, w=None, height=None, width=None,
>           xmlns='http://www.w3.org/2000/svg', **kwargs)

*An SVG tag; xmlns is added automatically, and viewBox defaults to
height and width if not provided*

To create your own SVGs, use `SVG`. It will automatically set the
`viewBox` from height and width if not provided.

All of our shapes will have some convenient kwargs added by using
[`ft_svg`](https://www.fastht.ml/docs/api/svg.html#ft_svg):

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L43"
target="_blank" style="float:right; font-size:smaller">source</a>

### ft_svg

>  ft_svg (tag:str, *c, transform=None, opacity=None, clip=None, mask=None,
>              filter=None, vector_effect=None, pointer_events=None,
>              target_id=None, hx_vals=None, hx_target=None, id=None, cls=None,
>              title=None, style=None, accesskey=None, contenteditable=None,
>              dir=None, draggable=None, enterkeyhint=None, hidden=None,
>              inert=None, inputmode=None, lang=None, popover=None,
>              spellcheck=None, tabindex=None, translate=None, hx_get=None,
>              hx_post=None, hx_put=None, hx_delete=None, hx_patch=None,
>              hx_trigger=None, hx_swap=None, hx_swap_oob=None, hx_include=None,
>              hx_select=None, hx_select_oob=None, hx_indicator=None,
>              hx_push_url=None, hx_confirm=None, hx_disable=None,
>              hx_replace_url=None, hx_disabled_elt=None, hx_ext=None,
>              hx_headers=None, hx_history=None, hx_history_elt=None,
>              hx_inherit=None, hx_params=None, hx_preserve=None,
>              hx_prompt=None, hx_request=None, hx_sync=None, hx_validate=None,
>              hx_on_blur=None, hx_on_change=None, hx_on_contextmenu=None,
>              hx_on_focus=None, hx_on_input=None, hx_on_invalid=None,
>              hx_on_reset=None, hx_on_select=None, hx_on_submit=None,
>              hx_on_keydown=None, hx_on_keypress=None, hx_on_keyup=None,
>              hx_on_click=None, hx_on_dblclick=None, hx_on_mousedown=None,
>              hx_on_mouseenter=None, hx_on_mouseleave=None,
>              hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
>              hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
>              hx_on__after_on_load=None, hx_on__after_process_node=None,
>              hx_on__after_request=None, hx_on__after_settle=None,
>              hx_on__after_swap=None, hx_on__before_cleanup_element=None,
>              hx_on__before_on_load=None, hx_on__before_process_node=None,
>              hx_on__before_request=None, hx_on__before_swap=None,
>              hx_on__before_send=None, hx_on__before_transition=None,
>              hx_on__config_request=None, hx_on__confirm=None,
>              hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
>              hx_on__history_cache_miss_error=None,
>              hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
>              hx_on__before_history_save=None, hx_on__load=None,
>              hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
>              hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
>              hx_on__oob_error_no_target=None, hx_on__prompt=None,
>              hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
>              hx_on__response_error=None, hx_on__send_abort=None,
>              hx_on__send_error=None, hx_on__sse_error=None,
>              hx_on__sse_open=None, hx_on__swap_error=None,
>              hx_on__target_error=None, hx_on__timeout=None,
>              hx_on__validation_validate=None, hx_on__validation_failed=None,
>              hx_on__validation_halted=None, hx_on__xhr_abort=None,
>              hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
>              hx_on__xhr_progress=None)

*Create a standard `FT` element with some SVG-specific attrs*

## Basic shapes

We’ll define a simple function to display SVG shapes in this notebook:

``` python
def demo(el, h=50, w=50): return show(Svg(h=h,w=w)(el))
```

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L51"
target="_blank" style="float:right; font-size:smaller">source</a>

### Rect

>  Rect (width, height, x=0, y=0, fill=None, stroke=None, stroke_width=None,
>            rx=None, ry=None, transform=None, opacity=None, clip=None,
>            mask=None, filter=None, vector_effect=None, pointer_events=None,
>            target_id=None, hx_vals=None, hx_target=None, id=None, cls=None,
>            title=None, style=None, accesskey=None, contenteditable=None,
>            dir=None, draggable=None, enterkeyhint=None, hidden=None,
>            inert=None, inputmode=None, lang=None, popover=None,
>            spellcheck=None, tabindex=None, translate=None, hx_get=None,
>            hx_post=None, hx_put=None, hx_delete=None, hx_patch=None,
>            hx_trigger=None, hx_swap=None, hx_swap_oob=None, hx_include=None,
>            hx_select=None, hx_select_oob=None, hx_indicator=None,
>            hx_push_url=None, hx_confirm=None, hx_disable=None,
>            hx_replace_url=None, hx_disabled_elt=None, hx_ext=None,
>            hx_headers=None, hx_history=None, hx_history_elt=None,
>            hx_inherit=None, hx_params=None, hx_preserve=None, hx_prompt=None,
>            hx_request=None, hx_sync=None, hx_validate=None, hx_on_blur=None,
>            hx_on_change=None, hx_on_contextmenu=None, hx_on_focus=None,
>            hx_on_input=None, hx_on_invalid=None, hx_on_reset=None,
>            hx_on_select=None, hx_on_submit=None, hx_on_keydown=None,
>            hx_on_keypress=None, hx_on_keyup=None, hx_on_click=None,
>            hx_on_dblclick=None, hx_on_mousedown=None, hx_on_mouseenter=None,
>            hx_on_mouseleave=None, hx_on_mousemove=None, hx_on_mouseout=None,
>            hx_on_mouseover=None, hx_on_mouseup=None, hx_on_wheel=None,
>            hx_on__abort=None, hx_on__after_on_load=None,
>            hx_on__after_process_node=None, hx_on__after_request=None,
>            hx_on__after_settle=None, hx_on__after_swap=None,
>            hx_on__before_cleanup_element=None, hx_on__before_on_load=None,
>            hx_on__before_process_node=None, hx_on__before_request=None,
>            hx_on__before_swap=None, hx_on__before_send=None,
>            hx_on__before_transition=None, hx_on__config_request=None,
>            hx_on__confirm=None, hx_on__history_cache_error=None,
>            hx_on__history_cache_miss=None,
>            hx_on__history_cache_miss_error=None,
>            hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
>            hx_on__before_history_save=None, hx_on__load=None,
>            hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
>            hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
>            hx_on__oob_error_no_target=None, hx_on__prompt=None,
>            hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
>            hx_on__response_error=None, hx_on__send_abort=None,
>            hx_on__send_error=None, hx_on__sse_error=None,
>            hx_on__sse_open=None, hx_on__swap_error=None,
>            hx_on__target_error=None, hx_on__timeout=None,
>            hx_on__validation_validate=None, hx_on__validation_failed=None,
>            hx_on__validation_halted=None, hx_on__xhr_abort=None,
>            hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
>            hx_on__xhr_progress=None)

*A standard SVG `rect` element*

All our shapes just create regular `FT` elements. The only extra
functionality provided by most of them is to add additional defined
kwargs to improve auto-complete in IDEs and notebooks, and re-order
parameters so that positional args can also be used to save a bit of
typing, e.g:

``` python
demo(Rect(30, 30, fill='blue', rx=8, ry=8))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><rect width="30" height="30" fill="blue" rx="8" ry="8"></rect></svg>

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L58"
target="_blank" style="float:right; font-size:smaller">source</a>

### Circle

>  Circle (r, cx=0, cy=0, fill=None, stroke=None, stroke_width=None,
>              transform=None, opacity=None, clip=None, mask=None, filter=None,
>              vector_effect=None, pointer_events=None, target_id=None,
>              hx_vals=None, hx_target=None, id=None, cls=None, title=None,
>              style=None, accesskey=None, contenteditable=None, dir=None,
>              draggable=None, enterkeyhint=None, hidden=None, inert=None,
>              inputmode=None, lang=None, popover=None, spellcheck=None,
>              tabindex=None, translate=None, hx_get=None, hx_post=None,
>              hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
>              hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
>              hx_select_oob=None, hx_indicator=None, hx_push_url=None,
>              hx_confirm=None, hx_disable=None, hx_replace_url=None,
>              hx_disabled_elt=None, hx_ext=None, hx_headers=None,
>              hx_history=None, hx_history_elt=None, hx_inherit=None,
>              hx_params=None, hx_preserve=None, hx_prompt=None,
>              hx_request=None, hx_sync=None, hx_validate=None, hx_on_blur=None,
>              hx_on_change=None, hx_on_contextmenu=None, hx_on_focus=None,
>              hx_on_input=None, hx_on_invalid=None, hx_on_reset=None,
>              hx_on_select=None, hx_on_submit=None, hx_on_keydown=None,
>              hx_on_keypress=None, hx_on_keyup=None, hx_on_click=None,
>              hx_on_dblclick=None, hx_on_mousedown=None, hx_on_mouseenter=None,
>              hx_on_mouseleave=None, hx_on_mousemove=None, hx_on_mouseout=None,
>              hx_on_mouseover=None, hx_on_mouseup=None, hx_on_wheel=None,
>              hx_on__abort=None, hx_on__after_on_load=None,
>              hx_on__after_process_node=None, hx_on__after_request=None,
>              hx_on__after_settle=None, hx_on__after_swap=None,
>              hx_on__before_cleanup_element=None, hx_on__before_on_load=None,
>              hx_on__before_process_node=None, hx_on__before_request=None,
>              hx_on__before_swap=None, hx_on__before_send=None,
>              hx_on__before_transition=None, hx_on__config_request=None,
>              hx_on__confirm=None, hx_on__history_cache_error=None,
>              hx_on__history_cache_miss=None,
>              hx_on__history_cache_miss_error=None,
>              hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
>              hx_on__before_history_save=None, hx_on__load=None,
>              hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
>              hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
>              hx_on__oob_error_no_target=None, hx_on__prompt=None,
>              hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
>              hx_on__response_error=None, hx_on__send_abort=None,
>              hx_on__send_error=None, hx_on__sse_error=None,
>              hx_on__sse_open=None, hx_on__swap_error=None,
>              hx_on__target_error=None, hx_on__timeout=None,
>              hx_on__validation_validate=None, hx_on__validation_failed=None,
>              hx_on__validation_halted=None, hx_on__xhr_abort=None,
>              hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
>              hx_on__xhr_progress=None)

*A standard SVG `circle` element*

``` python
demo(Circle(20, 25, 25, stroke='red', stroke_width=3))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><circle r="20" cx="25" cy="25" stroke="red" stroke-width="3"></circle></svg>

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L64"
target="_blank" style="float:right; font-size:smaller">source</a>

### Ellipse

>  Ellipse (rx, ry, cx=0, cy=0, fill=None, stroke=None, stroke_width=None,
>               transform=None, opacity=None, clip=None, mask=None, filter=None,
>               vector_effect=None, pointer_events=None, target_id=None,
>               hx_vals=None, hx_target=None, id=None, cls=None, title=None,
>               style=None, accesskey=None, contenteditable=None, dir=None,
>               draggable=None, enterkeyhint=None, hidden=None, inert=None,
>               inputmode=None, lang=None, popover=None, spellcheck=None,
>               tabindex=None, translate=None, hx_get=None, hx_post=None,
>               hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
>               hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
>               hx_select_oob=None, hx_indicator=None, hx_push_url=None,
>               hx_confirm=None, hx_disable=None, hx_replace_url=None,
>               hx_disabled_elt=None, hx_ext=None, hx_headers=None,
>               hx_history=None, hx_history_elt=None, hx_inherit=None,
>               hx_params=None, hx_preserve=None, hx_prompt=None,
>               hx_request=None, hx_sync=None, hx_validate=None,
>               hx_on_blur=None, hx_on_change=None, hx_on_contextmenu=None,
>               hx_on_focus=None, hx_on_input=None, hx_on_invalid=None,
>               hx_on_reset=None, hx_on_select=None, hx_on_submit=None,
>               hx_on_keydown=None, hx_on_keypress=None, hx_on_keyup=None,
>               hx_on_click=None, hx_on_dblclick=None, hx_on_mousedown=None,
>               hx_on_mouseenter=None, hx_on_mouseleave=None,
>               hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
>               hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
>               hx_on__after_on_load=None, hx_on__after_process_node=None,
>               hx_on__after_request=None, hx_on__after_settle=None,
>               hx_on__after_swap=None, hx_on__before_cleanup_element=None,
>               hx_on__before_on_load=None, hx_on__before_process_node=None,
>               hx_on__before_request=None, hx_on__before_swap=None,
>               hx_on__before_send=None, hx_on__before_transition=None,
>               hx_on__config_request=None, hx_on__confirm=None,
>               hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
>               hx_on__history_cache_miss_error=None,
>               hx_on__history_cache_miss_load=None,
>               hx_on__history_restore=None, hx_on__before_history_save=None,
>               hx_on__load=None, hx_on__no_sse_source_error=None,
>               hx_on__on_load_error=None, hx_on__oob_after_swap=None,
>               hx_on__oob_before_swap=None, hx_on__oob_error_no_target=None,
>               hx_on__prompt=None, hx_on__pushed_into_history=None,
>               hx_on__replaced_in_history=None, hx_on__response_error=None,
>               hx_on__send_abort=None, hx_on__send_error=None,
>               hx_on__sse_error=None, hx_on__sse_open=None,
>               hx_on__swap_error=None, hx_on__target_error=None,
>               hx_on__timeout=None, hx_on__validation_validate=None,
>               hx_on__validation_failed=None, hx_on__validation_halted=None,
>               hx_on__xhr_abort=None, hx_on__xhr_loadend=None,
>               hx_on__xhr_loadstart=None, hx_on__xhr_progress=None)

*A standard SVG `ellipse` element*

``` python
demo(Ellipse(20, 10, 25, 25))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><ellipse rx="20" ry="10" cx="25" cy="25"></ellipse></svg>

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L69"
target="_blank" style="float:right; font-size:smaller">source</a>

### transformd

>  transformd (translate=None, scale=None, rotate=None, skewX=None,
>                  skewY=None, matrix=None)

*Create an SVG `transform` kwarg dict*

``` python
rot = transformd(rotate=(45, 25, 25))
rot
```

    {'transform': 'rotate(45,25,25)'}

``` python
demo(Ellipse(20, 10, 25, 25, **rot))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><ellipse transform="rotate(45,25,25)" rx="20" ry="10" cx="25" cy="25"></ellipse></svg>

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L82"
target="_blank" style="float:right; font-size:smaller">source</a>

### Line

>  Line (x1, y1, x2=0, y2=0, stroke='black', w=None, stroke_width=1,
>            transform=None, opacity=None, clip=None, mask=None, filter=None,
>            vector_effect=None, pointer_events=None, target_id=None,
>            hx_vals=None, hx_target=None, id=None, cls=None, title=None,
>            style=None, accesskey=None, contenteditable=None, dir=None,
>            draggable=None, enterkeyhint=None, hidden=None, inert=None,
>            inputmode=None, lang=None, popover=None, spellcheck=None,
>            tabindex=None, translate=None, hx_get=None, hx_post=None,
>            hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
>            hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
>            hx_select_oob=None, hx_indicator=None, hx_push_url=None,
>            hx_confirm=None, hx_disable=None, hx_replace_url=None,
>            hx_disabled_elt=None, hx_ext=None, hx_headers=None,
>            hx_history=None, hx_history_elt=None, hx_inherit=None,
>            hx_params=None, hx_preserve=None, hx_prompt=None, hx_request=None,
>            hx_sync=None, hx_validate=None, hx_on_blur=None, hx_on_change=None,
>            hx_on_contextmenu=None, hx_on_focus=None, hx_on_input=None,
>            hx_on_invalid=None, hx_on_reset=None, hx_on_select=None,
>            hx_on_submit=None, hx_on_keydown=None, hx_on_keypress=None,
>            hx_on_keyup=None, hx_on_click=None, hx_on_dblclick=None,
>            hx_on_mousedown=None, hx_on_mouseenter=None, hx_on_mouseleave=None,
>            hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
>            hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
>            hx_on__after_on_load=None, hx_on__after_process_node=None,
>            hx_on__after_request=None, hx_on__after_settle=None,
>            hx_on__after_swap=None, hx_on__before_cleanup_element=None,
>            hx_on__before_on_load=None, hx_on__before_process_node=None,
>            hx_on__before_request=None, hx_on__before_swap=None,
>            hx_on__before_send=None, hx_on__before_transition=None,
>            hx_on__config_request=None, hx_on__confirm=None,
>            hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
>            hx_on__history_cache_miss_error=None,
>            hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
>            hx_on__before_history_save=None, hx_on__load=None,
>            hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
>            hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
>            hx_on__oob_error_no_target=None, hx_on__prompt=None,
>            hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
>            hx_on__response_error=None, hx_on__send_abort=None,
>            hx_on__send_error=None, hx_on__sse_error=None,
>            hx_on__sse_open=None, hx_on__swap_error=None,
>            hx_on__target_error=None, hx_on__timeout=None,
>            hx_on__validation_validate=None, hx_on__validation_failed=None,
>            hx_on__validation_halted=None, hx_on__xhr_abort=None,
>            hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
>            hx_on__xhr_progress=None)

*A standard SVG `line` element*

``` python
demo(Line(20, 30, w=3))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><line x1="20" y1="30" stroke="black" stroke-width="3"></line></svg>

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L89"
target="_blank" style="float:right; font-size:smaller">source</a>

### Polyline

>  Polyline (*args, points=None, fill=None, stroke=None, stroke_width=None,
>                transform=None, opacity=None, clip=None, mask=None,
>                filter=None, vector_effect=None, pointer_events=None,
>                target_id=None, hx_vals=None, hx_target=None, id=None,
>                cls=None, title=None, style=None, accesskey=None,
>                contenteditable=None, dir=None, draggable=None,
>                enterkeyhint=None, hidden=None, inert=None, inputmode=None,
>                lang=None, popover=None, spellcheck=None, tabindex=None,
>                translate=None, hx_get=None, hx_post=None, hx_put=None,
>                hx_delete=None, hx_patch=None, hx_trigger=None, hx_swap=None,
>                hx_swap_oob=None, hx_include=None, hx_select=None,
>                hx_select_oob=None, hx_indicator=None, hx_push_url=None,
>                hx_confirm=None, hx_disable=None, hx_replace_url=None,
>                hx_disabled_elt=None, hx_ext=None, hx_headers=None,
>                hx_history=None, hx_history_elt=None, hx_inherit=None,
>                hx_params=None, hx_preserve=None, hx_prompt=None,
>                hx_request=None, hx_sync=None, hx_validate=None,
>                hx_on_blur=None, hx_on_change=None, hx_on_contextmenu=None,
>                hx_on_focus=None, hx_on_input=None, hx_on_invalid=None,
>                hx_on_reset=None, hx_on_select=None, hx_on_submit=None,
>                hx_on_keydown=None, hx_on_keypress=None, hx_on_keyup=None,
>                hx_on_click=None, hx_on_dblclick=None, hx_on_mousedown=None,
>                hx_on_mouseenter=None, hx_on_mouseleave=None,
>                hx_on_mousemove=None, hx_on_mouseout=None,
>                hx_on_mouseover=None, hx_on_mouseup=None, hx_on_wheel=None,
>                hx_on__abort=None, hx_on__after_on_load=None,
>                hx_on__after_process_node=None, hx_on__after_request=None,
>                hx_on__after_settle=None, hx_on__after_swap=None,
>                hx_on__before_cleanup_element=None, hx_on__before_on_load=None,
>                hx_on__before_process_node=None, hx_on__before_request=None,
>                hx_on__before_swap=None, hx_on__before_send=None,
>                hx_on__before_transition=None, hx_on__config_request=None,
>                hx_on__confirm=None, hx_on__history_cache_error=None,
>                hx_on__history_cache_miss=None,
>                hx_on__history_cache_miss_error=None,
>                hx_on__history_cache_miss_load=None,
>                hx_on__history_restore=None, hx_on__before_history_save=None,
>                hx_on__load=None, hx_on__no_sse_source_error=None,
>                hx_on__on_load_error=None, hx_on__oob_after_swap=None,
>                hx_on__oob_before_swap=None, hx_on__oob_error_no_target=None,
>                hx_on__prompt=None, hx_on__pushed_into_history=None,
>                hx_on__replaced_in_history=None, hx_on__response_error=None,
>                hx_on__send_abort=None, hx_on__send_error=None,
>                hx_on__sse_error=None, hx_on__sse_open=None,
>                hx_on__swap_error=None, hx_on__target_error=None,
>                hx_on__timeout=None, hx_on__validation_validate=None,
>                hx_on__validation_failed=None, hx_on__validation_halted=None,
>                hx_on__xhr_abort=None, hx_on__xhr_loadend=None,
>                hx_on__xhr_loadstart=None, hx_on__xhr_progress=None)

*A standard SVG `polyline` element*

``` python
demo(Polyline((0,0), (10,10), (20,0), (30,10), (40,0),
              fill='yellow', stroke='blue', stroke_width=2))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><polyline points="0,0 10,10 20,0 30,10 40,0" fill="yellow" stroke="blue" stroke-width="2"></polyline></svg>

``` python
demo(Polyline(points='0,0 10,10 20,0 30,10 40,0', fill='purple', stroke_width=2))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><polyline points="0,0 10,10 20,0 30,10 40,0" fill="purple" stroke-width="2"></polyline></svg>

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L96"
target="_blank" style="float:right; font-size:smaller">source</a>

### Polygon

>  Polygon (*args, points=None, fill=None, stroke=None, stroke_width=None,
>               transform=None, opacity=None, clip=None, mask=None, filter=None,
>               vector_effect=None, pointer_events=None, target_id=None,
>               hx_vals=None, hx_target=None, id=None, cls=None, title=None,
>               style=None, accesskey=None, contenteditable=None, dir=None,
>               draggable=None, enterkeyhint=None, hidden=None, inert=None,
>               inputmode=None, lang=None, popover=None, spellcheck=None,
>               tabindex=None, translate=None, hx_get=None, hx_post=None,
>               hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
>               hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
>               hx_select_oob=None, hx_indicator=None, hx_push_url=None,
>               hx_confirm=None, hx_disable=None, hx_replace_url=None,
>               hx_disabled_elt=None, hx_ext=None, hx_headers=None,
>               hx_history=None, hx_history_elt=None, hx_inherit=None,
>               hx_params=None, hx_preserve=None, hx_prompt=None,
>               hx_request=None, hx_sync=None, hx_validate=None,
>               hx_on_blur=None, hx_on_change=None, hx_on_contextmenu=None,
>               hx_on_focus=None, hx_on_input=None, hx_on_invalid=None,
>               hx_on_reset=None, hx_on_select=None, hx_on_submit=None,
>               hx_on_keydown=None, hx_on_keypress=None, hx_on_keyup=None,
>               hx_on_click=None, hx_on_dblclick=None, hx_on_mousedown=None,
>               hx_on_mouseenter=None, hx_on_mouseleave=None,
>               hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
>               hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
>               hx_on__after_on_load=None, hx_on__after_process_node=None,
>               hx_on__after_request=None, hx_on__after_settle=None,
>               hx_on__after_swap=None, hx_on__before_cleanup_element=None,
>               hx_on__before_on_load=None, hx_on__before_process_node=None,
>               hx_on__before_request=None, hx_on__before_swap=None,
>               hx_on__before_send=None, hx_on__before_transition=None,
>               hx_on__config_request=None, hx_on__confirm=None,
>               hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
>               hx_on__history_cache_miss_error=None,
>               hx_on__history_cache_miss_load=None,
>               hx_on__history_restore=None, hx_on__before_history_save=None,
>               hx_on__load=None, hx_on__no_sse_source_error=None,
>               hx_on__on_load_error=None, hx_on__oob_after_swap=None,
>               hx_on__oob_before_swap=None, hx_on__oob_error_no_target=None,
>               hx_on__prompt=None, hx_on__pushed_into_history=None,
>               hx_on__replaced_in_history=None, hx_on__response_error=None,
>               hx_on__send_abort=None, hx_on__send_error=None,
>               hx_on__sse_error=None, hx_on__sse_open=None,
>               hx_on__swap_error=None, hx_on__target_error=None,
>               hx_on__timeout=None, hx_on__validation_validate=None,
>               hx_on__validation_failed=None, hx_on__validation_halted=None,
>               hx_on__xhr_abort=None, hx_on__xhr_loadend=None,
>               hx_on__xhr_loadstart=None, hx_on__xhr_progress=None)

*A standard SVG `polygon` element*

``` python
demo(Polygon((25,5), (43.3,15), (43.3,35), (25,45), (6.7,35), (6.7,15), 
             fill='lightblue', stroke='navy', stroke_width=2))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><polygon points="25,5 43.3,15 43.3,35 25,45 6.7,35 6.7,15" fill="lightblue" stroke="navy" stroke-width="2"></polygon></svg>

``` python
demo(Polygon(points='25,5 43.3,15 43.3,35 25,45 6.7,35 6.7,15',
             fill='lightgreen', stroke='darkgreen', stroke_width=2))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><polygon points="25,5 43.3,15 43.3,35 25,45 6.7,35 6.7,15" fill="lightgreen" stroke="darkgreen" stroke-width="2"></polygon></svg>

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L103"
target="_blank" style="float:right; font-size:smaller">source</a>

### Text

>  Text (*args, x=0, y=0, font_family=None, font_size=None, fill=None,
>            text_anchor=None, dominant_baseline=None, font_weight=None,
>            font_style=None, text_decoration=None, transform=None,
>            opacity=None, clip=None, mask=None, filter=None,
>            vector_effect=None, pointer_events=None, target_id=None,
>            hx_vals=None, hx_target=None, id=None, cls=None, title=None,
>            style=None, accesskey=None, contenteditable=None, dir=None,
>            draggable=None, enterkeyhint=None, hidden=None, inert=None,
>            inputmode=None, lang=None, popover=None, spellcheck=None,
>            tabindex=None, translate=None, hx_get=None, hx_post=None,
>            hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
>            hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
>            hx_select_oob=None, hx_indicator=None, hx_push_url=None,
>            hx_confirm=None, hx_disable=None, hx_replace_url=None,
>            hx_disabled_elt=None, hx_ext=None, hx_headers=None,
>            hx_history=None, hx_history_elt=None, hx_inherit=None,
>            hx_params=None, hx_preserve=None, hx_prompt=None, hx_request=None,
>            hx_sync=None, hx_validate=None, hx_on_blur=None, hx_on_change=None,
>            hx_on_contextmenu=None, hx_on_focus=None, hx_on_input=None,
>            hx_on_invalid=None, hx_on_reset=None, hx_on_select=None,
>            hx_on_submit=None, hx_on_keydown=None, hx_on_keypress=None,
>            hx_on_keyup=None, hx_on_click=None, hx_on_dblclick=None,
>            hx_on_mousedown=None, hx_on_mouseenter=None, hx_on_mouseleave=None,
>            hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
>            hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
>            hx_on__after_on_load=None, hx_on__after_process_node=None,
>            hx_on__after_request=None, hx_on__after_settle=None,
>            hx_on__after_swap=None, hx_on__before_cleanup_element=None,
>            hx_on__before_on_load=None, hx_on__before_process_node=None,
>            hx_on__before_request=None, hx_on__before_swap=None,
>            hx_on__before_send=None, hx_on__before_transition=None,
>            hx_on__config_request=None, hx_on__confirm=None,
>            hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
>            hx_on__history_cache_miss_error=None,
>            hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
>            hx_on__before_history_save=None, hx_on__load=None,
>            hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
>            hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
>            hx_on__oob_error_no_target=None, hx_on__prompt=None,
>            hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
>            hx_on__response_error=None, hx_on__send_abort=None,
>            hx_on__send_error=None, hx_on__sse_error=None,
>            hx_on__sse_open=None, hx_on__swap_error=None,
>            hx_on__target_error=None, hx_on__timeout=None,
>            hx_on__validation_validate=None, hx_on__validation_failed=None,
>            hx_on__validation_halted=None, hx_on__xhr_abort=None,
>            hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
>            hx_on__xhr_progress=None)

*A standard SVG `text` element*

``` python
demo(Text("Hello!", x=10, y=30))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><text x="10" y="30">Hello!</text></svg>

## Paths

Paths in SVGs are more complex, so we add a small (optional) fluent
interface for constructing them:

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L111"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT

>  PathFT (tag:str, cs:tuple, attrs:dict=None, void_=False, **kwargs)

*A ‘Fast Tag’ structure, containing `tag`,`children`,and `attrs`*

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L159"
target="_blank" style="float:right; font-size:smaller">source</a>

### Path

>  Path (d='', fill=None, stroke=None, stroke_width=None, transform=None,
>            opacity=None, clip=None, mask=None, filter=None,
>            vector_effect=None, pointer_events=None, target_id=None,
>            hx_vals=None, hx_target=None, id=None, cls=None, title=None,
>            style=None, accesskey=None, contenteditable=None, dir=None,
>            draggable=None, enterkeyhint=None, hidden=None, inert=None,
>            inputmode=None, lang=None, popover=None, spellcheck=None,
>            tabindex=None, translate=None, hx_get=None, hx_post=None,
>            hx_put=None, hx_delete=None, hx_patch=None, hx_trigger=None,
>            hx_swap=None, hx_swap_oob=None, hx_include=None, hx_select=None,
>            hx_select_oob=None, hx_indicator=None, hx_push_url=None,
>            hx_confirm=None, hx_disable=None, hx_replace_url=None,
>            hx_disabled_elt=None, hx_ext=None, hx_headers=None,
>            hx_history=None, hx_history_elt=None, hx_inherit=None,
>            hx_params=None, hx_preserve=None, hx_prompt=None, hx_request=None,
>            hx_sync=None, hx_validate=None, hx_on_blur=None, hx_on_change=None,
>            hx_on_contextmenu=None, hx_on_focus=None, hx_on_input=None,
>            hx_on_invalid=None, hx_on_reset=None, hx_on_select=None,
>            hx_on_submit=None, hx_on_keydown=None, hx_on_keypress=None,
>            hx_on_keyup=None, hx_on_click=None, hx_on_dblclick=None,
>            hx_on_mousedown=None, hx_on_mouseenter=None, hx_on_mouseleave=None,
>            hx_on_mousemove=None, hx_on_mouseout=None, hx_on_mouseover=None,
>            hx_on_mouseup=None, hx_on_wheel=None, hx_on__abort=None,
>            hx_on__after_on_load=None, hx_on__after_process_node=None,
>            hx_on__after_request=None, hx_on__after_settle=None,
>            hx_on__after_swap=None, hx_on__before_cleanup_element=None,
>            hx_on__before_on_load=None, hx_on__before_process_node=None,
>            hx_on__before_request=None, hx_on__before_swap=None,
>            hx_on__before_send=None, hx_on__before_transition=None,
>            hx_on__config_request=None, hx_on__confirm=None,
>            hx_on__history_cache_error=None, hx_on__history_cache_miss=None,
>            hx_on__history_cache_miss_error=None,
>            hx_on__history_cache_miss_load=None, hx_on__history_restore=None,
>            hx_on__before_history_save=None, hx_on__load=None,
>            hx_on__no_sse_source_error=None, hx_on__on_load_error=None,
>            hx_on__oob_after_swap=None, hx_on__oob_before_swap=None,
>            hx_on__oob_error_no_target=None, hx_on__prompt=None,
>            hx_on__pushed_into_history=None, hx_on__replaced_in_history=None,
>            hx_on__response_error=None, hx_on__send_abort=None,
>            hx_on__send_error=None, hx_on__sse_error=None,
>            hx_on__sse_open=None, hx_on__swap_error=None,
>            hx_on__target_error=None, hx_on__timeout=None,
>            hx_on__validation_validate=None, hx_on__validation_failed=None,
>            hx_on__validation_halted=None, hx_on__xhr_abort=None,
>            hx_on__xhr_loadend=None, hx_on__xhr_loadstart=None,
>            hx_on__xhr_progress=None)

*Create a standard `path` SVG element. This is a special object*

Let’s create a square shape, but using
[`Path`](https://www.fastht.ml/docs/api/svg.html#path) instead of
[`Rect`](https://www.fastht.ml/docs/api/svg.html#rect):

- M(10, 10): Move to starting point (10, 10)
- L(40, 10): Line to (40, 10) - top edge
- L(40, 40): Line to (40, 40) - right edge
- L(10, 40): Line to (10, 40) - bottom edge
- Z(): Close path - connects back to start

M = Move to, L = Line to, Z = Close path

``` python
demo(Path(fill='none', stroke='purple', stroke_width=2
         ).M(10, 10).L(40, 10).L(40, 40).L(10, 40).Z())
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><path d=" M10 10 L40 10 L40 40 L10 40 Z" fill="none" stroke="purple" stroke-width="2"></path></svg>

Using curves we can create a spiral:

``` python
p = (Path(fill='none', stroke='purple', stroke_width=2)
     .M(25, 25)
     .C(25, 25, 20, 20, 30, 20)
     .C(40, 20, 40, 30, 30, 30)
     .C(20, 30, 20, 15, 35, 15)
     .C(50, 15, 50, 35, 25, 35)
     .C(0, 35, 0, 10, 40, 10)
     .C(80, 10, 80, 40, 25, 40))
demo(p, 50, 100)
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 50" height="50" width="100"><path d=" M25 25 C25 25 20 20 30 20 C40 20 40 30 30 30 C20 30 20 15 35 15 C50 15 50 35 25 35 C0 35 0 10 40 10 C80 10 80 40 25 40" fill="none" stroke="purple" stroke-width="2"></path></svg>

Using arcs and curves we can create a map marker icon:

``` python
p = (Path(fill='red')
     .M(25,45)
     .C(25,45,10,35,10,25)
     .A(15,15,0,1,1,40,25)
     .C(40,35,25,45,25,45)
     .Z())
demo(p)
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><path d=" M25 45 C25 45 10 35 10 25 A15 15 0 1 1 40 25 C40 35 25 45 25 45 Z" fill="red"></path></svg>

Behind the scenes it’s just creating regular SVG path `d` attr – you can
pass `d` in directly if you prefer.

``` python
print(p.d)
```

     M25 45 C25 45 10 35 10 25 A15 15 0 1 1 40 25 C40 35 25 45 25 45 Z

``` python
demo(Path(d='M25 45 C25 45 10 35 10 25 A15 15 0 1 1 40 25 C40 35 25 45 25 45 Z'))
```

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" height="50" width="50"><path d="M25 45 C25 45 10 35 10 25 A15 15 0 1 1 40 25 C40 35 25 45 25 45 Z"></path></svg>

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L117"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT.M

>  PathFT.M (x, y)

*Move to.*

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L121"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT.L

>  PathFT.L (x, y)

*Line to.*

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L125"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT.H

>  PathFT.H (x)

*Horizontal line to.*

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L129"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT.V

>  PathFT.V (y)

*Vertical line to.*

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L133"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT.Z

>  PathFT.Z ()

*Close path.*

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L137"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT.C

>  PathFT.C (x1, y1, x2, y2, x, y)

*Cubic Bézier curve.*

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L141"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT.S

>  PathFT.S (x2, y2, x, y)

*Smooth cubic Bézier curve.*

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L145"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT.Q

>  PathFT.Q (x1, y1, x, y)

*Quadratic Bézier curve.*

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L149"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT.T

>  PathFT.T (x, y)

*Smooth quadratic Bézier curve.*

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L153"
target="_blank" style="float:right; font-size:smaller">source</a>

### PathFT.A

>  PathFT.A (rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, x, y)

*Elliptical Arc.*

## HTMX helpers

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L167"
target="_blank" style="float:right; font-size:smaller">source</a>

### SvgOob

>  SvgOob (*args, **kwargs)

*Wraps an SVG shape as required for an HTMX OOB swap*

When returning an SVG shape out-of-band (OOB) in HTMX, you need to wrap
it with [`SvgOob`](https://www.fastht.ml/docs/api/svg.html#svgoob) to
have it appear correctly.
([`SvgOob`](https://www.fastht.ml/docs/api/svg.html#svgoob) is just a
shortcut for `Template(Svg(...))`, which is the trick that makes SVG OOB
swaps work.)

------------------------------------------------------------------------

<a
href="https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L172"
target="_blank" style="float:right; font-size:smaller">source</a>

### SvgInb

>  SvgInb (*args, **kwargs)

*Wraps an SVG shape as required for an HTMX inband swap*

When returning an SVG shape in-band in HTMX, either have the calling
element include `hx_select='svg>*'`, or `**svg_inb` (which are two ways
of saying the same thing), or wrap the response with
[`SvgInb`](https://www.fastht.ml/docs/api/svg.html#svginb) to have it
appear correctly.
([`SvgInb`](https://www.fastht.ml/docs/api/svg.html#svginb) is just a
shortcut for the tuple
`(Svg(...), HtmxResponseHeaders(hx_reselect='svg>*'))`, which is the
trick that makes SVG in-band swaps work.)