SVG

Simple SVG FT elements

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):

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

You can also use libraries such as 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

from fasthtml.svg import *

---

Svg

def Svg(
    *args, viewBox:NoneType=None, h:NoneType=None, w:NoneType=None, height:NoneType=None, width:NoneType=None,
    xmlns:str='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:

---

ft_svg

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

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

---

Rect

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

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

---

Circle

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

A standard SVG circle element

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

---

Ellipse

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

A standard SVG ellipse element

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

---

transformd

def transformd(
    translate:NoneType=None, scale:NoneType=None, rotate:NoneType=None, skewX:NoneType=None, skewY:NoneType=None,
    matrix:NoneType=None
):

Create an SVG transform kwarg dict

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

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

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

---

Line

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

A standard SVG line element

demo(Line(20, 30, w=3, stroke='black'))

demo(Svg(G(Line(0, 0, 100, 100), Line(100, 0, 0, 100), stroke='red', stroke_width=3)))

---

Polyline

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

A standard SVG polyline element

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

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

---

Polygon

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

A standard SVG polygon element

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))

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))

---

Text

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

A standard SVG text element

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

Paths

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

---

PathFT

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

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

---

Path

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

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

Let’s create a square shape, but using Path instead of 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

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

Using curves we can create a spiral:

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)

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

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)

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

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

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'))

---

PathFT.M

def M(
    x, y
):

Move to.

---

PathFT.L

def L(
    x, y
):

Line to.

---

PathFT.H

def H(
    x
):

Horizontal line to.

---

PathFT.V

def V(
    y
):

Vertical line to.

---

PathFT.Z

def Z():

Close path.

---

PathFT.C

def C(
    x1, y1, x2, y2, x, y
):

Cubic Bézier curve.

---

PathFT.S

def S(
    x2, y2, x, y
):

Smooth cubic Bézier curve.

---

PathFT.Q

def Q(
    x1, y1, x, y
):

Quadratic Bézier curve.

---

PathFT.T

def T(
    x, y
):

Smooth quadratic Bézier curve.

---

PathFT.A

def A(
    rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, x, y
):

Elliptical Arc.

HTMX helpers

---

SvgOob

def 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 to have it appear correctly. (SvgOob is just a shortcut for Template(Svg(...)), which is the trick that makes SVG OOB swaps work.)

---

SvgInb

def 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 to have it appear correctly. (SvgInb is just a shortcut for the tuple (Svg(...), HtmxResponseHeaders(hx_reselect='svg>*')), which is the trick that makes SVG in-band swaps work.)