Skip to content
/ Vekt Public

🎨 A lightweight, pure Kotlin SVG path renderer for Compose Multiplatform. No Skia. No dependencies. Just vectors.

13 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

xuwakao/Vekt

BranchesTags

Repository files navigation

Vekt

Vekt (from German/Norwegian "vector") is a lightweight, pure Kotlin Multiplatform SVG rendering library. It provides runtime SVG parsing and rendering for Compose Multiplatform, Kuikly Compose, and Android native Views.

Features

  • Pure Kotlin - No native dependencies, works on all Kotlin targets
  • Compose Multiplatform - JVM, iOS, JS/WASM support
  • Kuikly Compose - Tencent Kuikly framework support
  • Android View - Native Android View for non-Compose projects
  • Full SVG Path Support - M, L, H, V, C, S, Q, T, A, Z commands
  • Basic Shapes - rect, circle, ellipse, line, polygon, polyline
  • Groups & Transforms - g elements with translate, scale, rotate, skew, matrix
  • Styles - fill, stroke, opacity, stroke-width, linecap, linejoin
  • Gradients - linearGradient, radialGradient with stops and spread methods
  • Defs & Symbols - use, defs, symbol elements for reusable graphics
  • Text Support - text and tspan elements with font properties and alignment
  • ClipPath - clipPath rendering for element clipping
  • Image - Embedded base64 data URI images
  • Advanced Parsing - mask, filter, pattern elements (rendering planned)
  • viewBox - Proper viewport and scaling support
  • Tinting - Apply tint color to override fill colors

Installation

Add the dependency to your project:

// build.gradle.kts

// For Compose Multiplatform
implementation("io.aimei:vekt-compose:0.1.0")

// For Kuikly Compose
implementation("io.aimei:vekt-kuikly:0.1.0")

// For Android native View
implementation("io.aimei:vekt-android:0.1.0")

// Core only (parsing without rendering)
implementation("io.aimei:vekt-core:0.1.0")

Usage

Compose Multiplatform

import io.aimei.wk.compose.SvgImage

@Composable
fun MyIcon() {
    val svgContent = """
        <svg viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="40" fill="red"/>
        </svg>
    """.trimIndent()

    SvgImage(
        svgContent = svgContent,
        modifier = Modifier.size(48.dp),
        tint = Color.Blue // Optional: override fill color
    )
}

Kuikly Compose

import io.aimei.wk.kuikly.SvgImage

@Composable
fun MyIcon() {
    SvgImage(
        svgContent = svgContent,
        modifier = Modifier.size(48.dp)
    )
}

Android Native View

import io.aimei.wk.android.SvgView

// In Activity/Fragment
val svgView = SvgView(context)
svgView.setSvgContent(svgString)
svgView.setTintColor(Color.BLUE) // Optional

// In XML layout
<io.aimei.wk.android.SvgView
    android:id="@+id/svgView"
    android:layout_width="48dp"
    android:layout_height="48dp"/>

Core API (Parsing Only)

import io.aimei.wk.parser.SvgParser
import io.aimei.wk.parser.SvgPathParser

// Parse complete SVG document
val document = SvgParser.parse(svgContent)
println("Width: ${document.width}, Height: ${document.height}")
println("Elements: ${document.elements.size}")

// Parse path data only
val pathCommands = SvgPathParser.parse("M10 20 L30 40 Z")
pathCommands.commands.forEach { cmd ->
    when (cmd) {
        is PathCommand.MoveTo -> println("Move to ${cmd.x}, ${cmd.y}")
        is PathCommand.LineTo -> println("Line to ${cmd.x}, ${cmd.y}")
        is PathCommand.Close -> println("Close path")
        // ...
    }
}

Supported SVG Features

Elements

Element Support
<path> ✅ Full
<rect> ✅ Full (with rx/ry)
<circle> ✅ Full
<ellipse> ✅ Full
<line> ✅ Full
<polyline> ✅ Full
<polygon> ✅ Full
<g> (group) ✅ Full
<text> ✅ Full (font-family, font-size, font-weight, text-anchor, tspan)
<tspan> ✅ Full (x, y, dx, dy, style inheritance)
<image> ✅ Basic (data URI base64, placeholder for external URLs)
<defs> ✅ Full
<symbol> ✅ Full
<use> ✅ Full (href and xlink:href)
<linearGradient> ✅ Full (stops, gradientUnits, spreadMethod)
<radialGradient> ✅ Compose/Android, ⚠️ Kuikly (fallback to solid)
<clipPath> ✅ Full (rendering with clipping)
<mask> ✅ Parsing (rendering planned)
<filter> ✅ Parsing (rendering planned)
<pattern> ✅ Parsing (rendering planned)

Path Commands

Command Description Support
M/m Move to ✅
L/l Line to ✅
H/h Horizontal line ✅
V/v Vertical line ✅
C/c Cubic Bezier ✅
S/s Smooth cubic ✅
Q/q Quadratic Bezier ✅
T/t Smooth quadratic ✅
A/a Elliptical arc ✅
Z/z Close path ✅

Transforms

Transform Support
translate(x, y) ✅
scale(x, y) ✅
rotate(angle, cx, cy) ✅
skewX(angle) ✅
skewY(angle) ✅
matrix(a,b,c,d,e,f) ✅

Styles

Property Support
fill ✅ Hex, named colors, url(#gradient)
fill-opacity ✅
stroke ✅ Hex, named colors, url(#gradient)
stroke-width ✅
stroke-opacity ✅
stroke-linecap ✅ butt, round, square
stroke-linejoin ✅ miter, round, bevel
stroke-miterlimit ✅
opacity ✅
style (CSS inline) ✅

Text Properties

Property Support
font-family ✅
font-size ✅
font-weight ✅ normal, bold, 100-900
font-style ✅ normal, italic, oblique
text-anchor ✅ start, middle, end
dominant-baseline ✅ auto, middle, hanging, etc.

Filter Primitives (Parsing)

Primitive Support
<feGaussianBlur> ✅ Parsing
<feOffset> ✅ Parsing
<feFlood> ✅ Parsing
<feBlend> ✅ Parsing
<feComposite> ✅ Parsing
<feMerge> ✅ Parsing
<feColorMatrix> ✅ Parsing
<feDropShadow> ✅ Parsing

Not Supported (Yet)

  • CSS classes and external stylesheets
  • Mask rendering (parsing is supported)
  • Filter rendering (parsing is supported)
  • Pattern rendering (parsing is supported)
  • External image URLs (data URIs work)
  • Animations

Platform-Specific Limitations

  • Kuikly: radialGradient not supported (Kuikly's Brush API only has linearGradient). Falls back to first gradient stop color as solid fill.

Demo

Each platform has an independent demo module:

# Run Compose Desktop demo
./gradlew :demo-compose:run

# Build Android demo APK
./gradlew :demo-android:assembleDebug

# Build Kuikly demo (iOS framework)
./gradlew :demo-kuikly:linkDebugFrameworkIosSimulatorArm64

Demo modules showcase:

  • Basic SVG rendering
  • All supported shapes and paths
  • Linear and radial gradients
  • Transforms and groups
  • Text and tspan
  • ClipPath
  • Symbol and use references
  • Tint color override

Architecture

vekt/
├── vekt-core/          # Pure Kotlin parsing, no UI dependencies
│   ├── model/          # SVG data models (SvgDocument, PathCommand, etc.)
│   └── parser/         # Parsers (SvgParser, SvgPathParser, TransformParser)
├── vekt-compose/       # Compose Multiplatform adapter
├── vekt-kuikly/        # Kuikly Compose adapter
├── vekt-android/       # Android native View adapter
├── demo-compose/       # Compose Desktop demo app
├── demo-android/       # Android native demo app
└── demo-kuikly/        # Kuikly demo

Performance

Vekt is designed for efficient runtime parsing.

Benchmark Environment

  • JVM: OpenJDK 17+ (tested on OpenJDK 21)
  • OS: macOS 14.5 ARM64 (Apple M2 Pro)
  • Kotlin: 2.1.21
  • Warmup: 100 iterations (JIT optimization)
  • Benchmark: 1000 iterations per test
  • Tests: 404 tests, 100% pass rate

Run benchmarks: ./gradlew :vekt-core:jvmTest --tests "*.ParserBenchmark*"

Synthetic Test Results

Test Case Description Average Median Ops/sec
Simple path M10 20 L30 40 L50 20 Z (4 commands) 2.5µs 2.4µs 398,340
Medium path 2 subpaths with cubic curves (~15 commands) 8.2µs 7.5µs 122,161
Complex path 10+ cubic curves, 8-decimal precision 20.8µs 17.9µs 48,079
Path with scale Complex path with scale=2x, offset=(10,10) 5.8µs 5.9µs 171,296
Simple SVG 104 bytes, 1 path 10.4µs 10.4µs 95,862
Medium SVG 390 bytes, group + shapes 38.4µs 37.5µs 26,021
Complex SVG 782 bytes, multiple paths with transforms 55.9µs 54.6µs 17,875

Real-World SVG Files

File Size Elements Average Median Ops/sec
boy.svg 35KB 23 paths, 23 transforms 683µs 676µs 1,463
confetti-ball.svg 43KB 21 paths, 21 transforms 912µs 891µs 1,096
maps.svg 56KB 19 paths, 19 transforms 919µs 916µs 1,088
swimming-pool.svg 55KB 20 paths, 20 transforms 1.04ms 1.04ms 958
woman.svg 36KB 19 paths, 19 transforms 648µs 638µs 1,543

Performance Characteristics

  • Sub-millisecond parsing: Even complex 50KB+ SVGs parse in under 1ms
  • Memory efficient: Minimal allocations during parsing
  • Cached rendering: Use remember {} in Compose to cache parsed documents
// Recommended: Cache parsed document
val document = remember(svgContent) {
    SvgParser.parse(svgContent)
}

SvgImage(document = document, modifier = Modifier.size(48.dp))

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

License

MIT License

Copyright (c) 2024-2025 xuwakao

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

About

🎨 A lightweight, pure Kotlin SVG path renderer for Compose Multiplatform. No Skia. No dependencies. Just vectors.

Resources

Readme
Activity

Stars

13 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages