CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-org-jetbrains-compose-html--core

Compose Web HTML library for building reactive web user interfaces using Kotlin with type-safe HTML DSL, CSS styling, and event handling

—

Pending
Overview
Eval results
Files

svg-support.mddocs/

SVG Support

Complete SVG (Scalable Vector Graphics) element support for creating vector graphics, icons, illustrations, and interactive visual content. All SVG elements integrate with the same styling and event systems as HTML elements.

Capabilities

SVG Container

Root SVG element that defines the coordinate system and viewport for vector graphics.

/**
 * Root SVG element
 * @param viewBox Defines coordinate system and aspect ratio (format: "minX minY width height")
 * @param attrs Additional SVG attributes including width, height, preserveAspectRatio
 * @param content SVG content elements
 */
@ExperimentalComposeWebSvgApi
fun Svg(
    viewBox: String? = null,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

SVG Shape Elements

Geometric shapes for creating vector graphics.

/**
 * Circle shape element
 * @param cx Center X coordinate
 * @param cy Center Y coordinate  
 * @param r Radius
 * @param attrs Additional attributes including fill, stroke, etc.
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Circle(
    cx: Number,
    cy: Number,
    r: Number,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Rectangle shape element
 * @param x Left edge X coordinate
 * @param y Top edge Y coordinate
 * @param width Rectangle width
 * @param height Rectangle height
 * @param attrs Additional attributes including rx, ry for rounded corners
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Rect(
    x: Number,
    y: Number,
    width: Number,
    height: Number,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Ellipse shape element
 * @param cx Center X coordinate
 * @param cy Center Y coordinate
 * @param rx Horizontal radius
 * @param ry Vertical radius
 * @param attrs Additional attributes
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Ellipse(
    cx: Number,
    cy: Number,
    rx: Number,
    ry: Number,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Line element
 * @param x1 Start point X coordinate
 * @param y1 Start point Y coordinate
 * @param x2 End point X coordinate
 * @param y2 End point Y coordinate
 * @param attrs Additional attributes
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Line(
    x1: Number,
    y1: Number,
    x2: Number,
    y2: Number,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Path element for complex shapes using path data
 * @param d Path data string with drawing commands (M, L, C, Q, A, Z, etc.)
 * @param attrs Additional attributes
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Path(
    d: String,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Polygon element (closed shape with straight sides)
 * @param points Variable number of coordinate pairs
 * @param attrs Additional attributes
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Polygon(
    vararg points: Pair<Number, Number>,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Polyline element (open shape with straight sides)
 * @param points Variable number of coordinate pairs
 * @param attrs Additional attributes
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Polyline(
    vararg points: Pair<Number, Number>,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

SVG Text Elements

Text rendering within SVG graphics.

/**
 * SVG text element
 * @param text Text content to display
 * @param x X coordinate for text positioning
 * @param y Y coordinate for text positioning  
 * @param attrs Additional attributes including font properties, fill, etc.
 */
@ExperimentalComposeWebSvgApi
fun SvgText(
    text: String,
    x: Number? = null,
    y: Number? = null,
    attrs: AttrBuilderContext<SVGElement>? = null
)

/**
 * Text along a path element
 * @param href Reference to path element (e.g., "#pathId")
 * @param text Text content to display along path
 * @param attrs Additional attributes
 */
@ExperimentalComposeWebSvgApi
fun TextPath(
    href: String,
    text: String,
    attrs: AttrBuilderContext<SVGElement>? = null
)

/**
 * Text span element for styling portions of text
 * @param attrs Additional attributes including positioning and styling
 * @param content Text content or nested tspan elements
 */
@ExperimentalComposeWebSvgApi
fun Tspan(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

SVG Structure Elements

Organizational elements for grouping and defining reusable graphics.

/**
 * Group element for organizing and transforming multiple elements
 * @param attrs Additional attributes including transform, fill, stroke
 * @param content Group content elements
 */
@ExperimentalComposeWebSvgApi
fun G(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Definitions container for reusable elements
 * @param attrs Additional attributes
 * @param content Definition elements (gradients, patterns, symbols, etc.)
 */
@ExperimentalComposeWebSvgApi
fun Defs(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Use element for instantiating defined elements
 * @param href Reference to element to instantiate (e.g., "#symbolId")
 * @param attrs Additional attributes including positioning and transforms
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Use(
    href: String,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Symbol element for defining reusable graphics
 * @param id Unique identifier for referencing
 * @param attrs Additional attributes including viewBox
 * @param content Symbol content elements
 */
@ExperimentalComposeWebSvgApi
fun Symbol(
    id: String? = null,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Marker element for line endings and decorations
 * @param attrs Additional attributes including markerWidth, markerHeight, orient
 * @param content Marker content
 */
@ExperimentalComposeWebSvgApi
fun Marker(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

SVG Gradient Elements

Linear and radial gradients for advanced fill and stroke effects.

/**
 * Linear gradient definition
 * @param id Unique identifier for referencing
 * @param attrs Additional attributes including x1, y1, x2, y2, gradientUnits
 * @param content Stop elements defining gradient colors
 */
@ExperimentalComposeWebSvgApi
fun LinearGradient(
    id: String? = null,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Radial gradient definition
 * @param id Unique identifier for referencing
 * @param attrs Additional attributes including cx, cy, r, fx, fy, gradientUnits
 * @param content Stop elements defining gradient colors
 */
@ExperimentalComposeWebSvgApi
fun RadialGradient(
    id: String? = null,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Gradient stop element defining colors and positions
 * @param attrs Attributes including offset, stop-color, stop-opacity
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Stop(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

SVG Effects Elements

Visual effects including clipping, masking, filters, and patterns.

/**
 * Clipping path definition for masking content
 * @param id Unique identifier for referencing
 * @param attrs Additional attributes including clipPathUnits
 * @param content Shape elements defining clipping area
 */
@ExperimentalComposeWebSvgApi
fun ClipPath(
    id: String,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Mask definition for transparency effects
 * @param id Unique identifier for referencing
 * @param attrs Additional attributes including maskUnits, maskContentUnits
 * @param content Mask content elements
 */
@ExperimentalComposeWebSvgApi
fun Mask(
    id: String? = null,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Filter definition for visual effects
 * @param attrs Additional attributes including id, filterUnits, primitiveUnits
 * @param content Filter primitive elements
 */
@ExperimentalComposeWebSvgApi
fun Filter(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Pattern definition for repeating graphics
 * @param id Unique identifier for referencing
 * @param attrs Additional attributes including patternUnits, patternContentUnits, width, height
 * @param content Pattern content elements
 */
@ExperimentalComposeWebSvgApi
fun Pattern(
    id: String,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

SVG Animation Elements

Animation elements for creating dynamic SVG graphics.

/**
 * Animate element for animating attribute values
 * @param attrs Animation attributes including attributeName, values, dur, repeatCount
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Animate(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Animate motion element for path-based animation
 * @param attrs Animation attributes including path, dur, repeatCount
 * @param content Optional content including mpath
 */
@ExperimentalComposeWebSvgApi
fun AnimateMotion(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Animate transform element for transform animations
 * @param attrs Animation attributes including attributeName, type, values, dur
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun AnimateTransform(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Set element for setting attribute values at specific times
 * @param attributeName Name of attribute to set
 * @param to Value to set
 * @param attrs Additional animation attributes
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Set(
    attributeName: String,
    to: String,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

SVG Utility Elements

Additional utility elements for metadata and accessibility.

/**
 * Title element for accessibility and tooltips
 * @param text Title text content
 * @param attrs Additional attributes
 */
@ExperimentalComposeWebSvgApi
fun Title(
    text: String,
    attrs: AttrBuilderContext<SVGElement>? = null
)

/**
 * Description element for accessibility
 * @param content Description text content
 * @param attrs Additional attributes
 */
@ExperimentalComposeWebSvgApi
fun Desc(
    content: String,
    attrs: AttrBuilderContext<SVGElement>? = null
)

/**
 * Image element for embedding raster images in SVG
 * @param href Image source URL
 * @param attrs Additional attributes including x, y, width, height
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Image(
    href: String,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * Switch element for conditional rendering
 * @param attrs Additional attributes
 * @param content Conditional content elements
 */
@ExperimentalComposeWebSvgApi
fun Switch(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

/**
 * View element for defining viewports
 * @param id Unique identifier
 * @param viewBox Viewport definition
 * @param attrs Additional attributes
 */
@ExperimentalComposeWebSvgApi
fun View(
    id: String,
    viewBox: String,
    attrs: AttrBuilderContext<SVGElement>? = null
)

/**
 * Motion path element for animation paths
 * @param attrs Path attributes including href
 * @param content Optional content
 */
@ExperimentalComposeWebSvgApi
fun Mpath(
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

Generic SVG Element

For creating any SVG element by name.

/**
 * Generic SVG element creator
 * @param name SVG element name
 * @param attrs Additional attributes
 * @param content Element content
 */
@ExperimentalComposeWebSvgApi
fun SvgElement(
    name: String,
    attrs: AttrBuilderContext<SVGElement>? = null,
    content: ContentBuilder<SVGElement>? = null
)

Usage Examples:

import org.jetbrains.compose.web.svg.*
import org.jetbrains.compose.web.dom.*

// Basic SVG shapes
Div {
    Svg(viewBox = "0 0 200 200", {
        attr("width", "200")
        attr("height", "200")
        style { border(1.px, LineStyle.Solid, Color.black) }
    }) {
        // Circle with gradient fill
        Circle(cx = 50, cy = 50, r = 30, {
            attr("fill", "url(#redGradient)")
            attr("stroke", "blue")
            attr("stroke-width", "2")
        })
        
        // Rectangle with rounded corners
        Rect(x = 100, y = 20, width = 60, height = 60, {
            attr("rx", "10")
            attr("ry", "10")
            attr("fill", "green")
            attr("opacity", "0.7")
        })
        
        // Triangle using polygon
        Polygon(
            25 to 150, 75 to 150, 50 to 100,
            attrs = {
                attr("fill", "orange")
                attr("stroke", "red")
                attr("stroke-width", "2")
            }
        )
        
        // Complex path
        Path(d = "M 100 150 Q 150 100 200 150 T 250 150", {
            attr("fill", "none")
            attr("stroke", "purple")
            attr("stroke-width", "3")
        })
    }
}

// SVG with gradients and text
Div {
    Svg(viewBox = "0 0 300 200") {
        // Define gradients in defs
        Defs {
            LinearGradient(id = "blueGradient", {
                attr("x1", "0%")
                attr("y1", "0%")
                attr("x2", "100%")
                attr("y2", "100%")
            }) {
                Stop({ attr("offset", "0%"); attr("stop-color", "lightblue") })
                Stop({ attr("offset", "100%"); attr("stop-color", "darkblue") })
            }
            
            RadialGradient(id = "sunGradient", {
                attr("cx", "50%")
                attr("cy", "50%")
                attr("r", "50%")
            }) {
                Stop({ attr("offset", "0%"); attr("stop-color", "yellow") })
                Stop({ attr("offset", "100%"); attr("stop-color", "orange") })
            }
        }
        
        // Background rectangle
        Rect(x = 0, y = 0, width = 300, height = 200, {
            attr("fill", "url(#blueGradient)")
        })
        
        // Sun
        Circle(cx = 250, cy = 50, r = 30, {
            attr("fill", "url(#sunGradient)")
        })
        
        // Mountain using polygon
        Polygon(
            0 to 200, 100 to 120, 200 to 140, 300 to 200,
            attrs = { attr("fill", "brown") }
        )
        
        // Text
        SvgText("Beautiful Landscape", x = 50, y = 180, {
            attr("font-family", "serif")
            attr("font-size", "18")
            attr("fill", "white")
        })
    }
}

// Interactive SVG with events
var circleColor by remember { mutableStateOf("red") }

Div {
    Svg(viewBox = "0 0 200 200") {
        Circle(cx = 100, cy = 100, r = 50, {
            attr("fill", circleColor)
            attr("cursor", "pointer")
            
            onClick {
                circleColor = if (circleColor == "red") "blue" else "red"
            }
            
            onMouseEnter {
                // Could trigger hover effects
            }
        })
        
        SvgText("Click the circle!", x = 100, y = 180, {
            attr("text-anchor", "middle")
            attr("font-family", "sans-serif")
        })
    }
}

// SVG icon system using symbols
Div {
    // Define icons in hidden SVG
    Svg({
        attr("width", "0")
        attr("height", "0")
        style { display(DisplayStyle.None) }
    }) {
        Defs {
            Symbol(id = "homeIcon", {
                attr("viewBox", "0 0 24 24")
            }) {
                Path(d = "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z", {
                    attr("fill", "currentColor")
                })
            }
            
            Symbol(id = "userIcon", {
                attr("viewBox", "0 0 24 24")
            }) {
                Circle(cx = 12, cy = 7, r = 4, {
                    attr("fill", "currentColor")
                })
                Path(d = "M12 14c-4.42 0-8 1.79-8 4v2h16v-2c0-2.21-3.58-4-8-4z", {
                    attr("fill", "currentColor")
                })
            }
        }
    }
    
    // Use the icons
    P {
        Svg({
            attr("width", "24")
            attr("height", "24")
            style { color(Color.blue) }
        }) {
            Use(href = "#homeIcon")
        }
        Text(" Home")
    }
    
    P {
        Svg({
            attr("width", "24")
            attr("height", "24")
            style { color(Color.green) }
        }) {
            Use(href = "#userIcon")
        }
        Text(" User Profile")
    }
}

// Animated SVG
Div {
    Svg(viewBox = "0 0 200 200") {
        Circle(cx = 100, cy = 100, r = 20, {
            attr("fill", "red")
        }) {
            // Animate position
            AnimateMotion({
                attr("dur", "3s")
                attr("repeatCount", "indefinite")
                attr("path", "M 50 100 Q 100 50 150 100 Q 100 150 50 100")
            })
            
            // Animate radius
            Animate({
                attr("attributeName", "r")
                attr("values", "20;40;20")
                attr("dur", "2s")
                attr("repeatCount", "indefinite")
            })
        }
        
        // Rotating rectangle
        Rect(x = 80, y = 20, width = 40, height = 40, {
            attr("fill", "blue")
            attr("transform-origin", "100 40")
        }) {
            AnimateTransform({
                attr("attributeName", "transform")
                attr("type", "rotate")
                attr("values", "0;360")
                attr("dur", "4s")
                attr("repeatCount", "indefinite")
            })
        }
    }
}

Install with Tessl CLI

npx tessl i tessl/maven-org-jetbrains-compose-html--core

docs

css-styling.md

event-handling.md

forms-inputs.md

html-elements.md

index.md

svg-support.md

tile.json