Lightweight Kotlin Multiplatform SVG Rendering Library

Vekt (from German/Norwegian "vector") provides runtime SVG parsing and rendering for Compose Multiplatform, Kuikly Compose, and Android native Views.

• Pure Kotlin - No native dependencies, works on all Kotlin targets
• Compose Multiplatform - JVM, iOS, JS/WASM support
• Kuikly Compose - Tencent Kuikly framework support (Android, iOS, H5)
• 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

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

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

import io.aimei.wk.kuikly.SvgImage

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

Note: vekt-kuikly uses compileOnly for Kuikly dependencies. Your project must explicitly add Kuikly dependencies:

implementation("com.tencent.kuikly-open:core:$kuiklyVersion")
implementation("com.tencent.kuikly-open:compose:$kuiklyVersion")

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"/>

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")
        // ...
    }
}

• 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

• Kuikly iOS: radialGradient supported via native CanvasContext API
• Kuikly Android/H5: radialGradient falls back to first gradient stop color as solid fill (Kuikly's Brush API only supports linearGradient)
• Kuikly H5: Transform rendering uses manual coordinate transformation for compatibility

Each platform has an independent demo module. SVG samples are centralized in demo-shared module.

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

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

# Build Kuikly Android demo
./gradlew :kuikly:androidApp:assembleDebug

# Build Kuikly H5 demo
./gradlew :kuikly:shared:jsBrowserProductionWebpack

# Build Kuikly iOS framework (then open kuikly/iosApp in Xcode)
./gradlew :kuikly:shared:podInstall

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

vekt/
├── vekt-core/          # Pure Kotlin parsing, no UI dependencies
│   ├── model/          # SVG data models (SvgDocument, PathCommand, etc.)
│   ├── parser/         # Parsers (SvgParser, SvgPathParser, TransformParser)
│   └── loader/         # Platform-specific SVG file loaders
├── vekt-compose/       # Compose Multiplatform adapter
├── vekt-kuikly/        # Kuikly Compose adapter (compileOnly dependencies)
├── vekt-android/       # Android native View adapter
├── demo-shared/        # Shared SVG samples and test files
├── demo-compose/       # Compose Multiplatform demo (Desktop, WASM)
├── demo-android/       # Android native demo app
└── kuikly/             # Kuikly demo apps
    ├── shared/         # Shared Kuikly Compose code
    ├── androidApp/     # Android app
    ├── iosApp/         # iOS app (Xcode project)
    └── h5App/          # H5 web app

Vekt is designed for efficient runtime parsing.

• 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
• Benchmark tests: 23 tests across path parsing, synthetic SVG, sample files, and real-world files

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

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

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

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.