nwillc/ksvg

A Multiplatform Kotlin SVG image DSL.

nwillc: Code Monkey

Currently, working in Go and learning that ecosystem, focusing on generics.

Find my articles on:

My Recent Posts

• Go: Sometimes an ORM is a Bit Much (1 year ago)
• Go Panic and Recovery: Meet the Edge Case (1 year ago)
• Go Generics: Adopting a Couple of Known Patterns (1 year ago)
• Working Around a Limitation of Go Generics (1 year ago)
• A Couple of Interesting Go Syntax Nuances (1 year ago)

ksvg's Issues

add function to add raw SVG elements

having the option to insert "raw" child elements from string would be convenient

example:

fun generateSVG(
    shapeViewBox: String = "0 0 100 100",
    shapeContent: String = """<path d="M0 13.3333C0 5.96954 5.96954 0 13.3333 0H86.6667C94.0305 0 100 5.96954 100 13.3333V86.6667C100 94.0305 94.0305 100 86.6667 100H13.3333C5.96954 100 0 94.0305 0 86.6667V13.3333Z" fill="currentColor"/>"""
): String {
    val svg = SVG.svg {
        /* ...*/
        children += SVG.svg {
            id = "shape"
            width = "100%"
            height = "100%"
            attributes["x"] = "0"
            attributes["y"] = "0"
            viewBox = shapeViewBox
            body = "replace_shape"
        }
    }
    return buildString {
        svg.render(this, RenderMode.INLINE)
    }.replace("replace_shape", "\n" +shapeContent + "\n")
}

i recently came across a problem in which i was given raw svg paths and viewport of a SVG and had to assemble nested SVGs out of them

i solved it by assigning a "replace_thing" value to tthe body of the nested SVGs and did some string manipulation on the rendered output

regardless.. a nicer api would make this type of problem easier to solve

Request for multiplatform

Is it possible to package this for multiplatform?

for my own project i just copied your code into my commonMain

i use this with kotlin/js and react, but having it in common code leaves the option open to render stuff serverside too

seems like Chat.isUpperCase() does not exist on js so i solved it expect/actual, iirc this is the only problem i ran into

//common
expect val Char.isUpperCase: Boolean

// js
actual val Char.isUpperCase: Boolean
    get() = (this == this.toUpperCase() && this != this.toLowerCase())

// jvm
actual val Char.isUpperCase: Boolean
    get() = isUpperCase()

Please publish a version

master-SNAPSHOT is a little loose for my tastes. :)

[Question] How i can install?

I want to try your solution, but I don't know how to add to my project. Do you can to add info to the README.

Repository needs new host

With the closure of Bintray, the old repository at https://dl.bintray.com/nwillc/maven is no longer available. Install instructions in #8 are no longer accurate, but cannot be updated until a new repository url is available.

Update example code `SVG.RenderMode` should be just `RenderMode`

Since RenderMode is no longer contained in SVG the code example should reflect this.

Btw, great repo, just what I was looking for :)

nested SVGs will generate XML declaration in each SVG

nested SVGs are a easy way to group elements together and drawing a picture inside a picture

sadly it seems like RenderMode.FILE did not take this into account (also the x, y properties)

example:

val svg = SVG.svg {
    id = "s0"
    width = "256"
    height = "256"
    rect {
        id = "r0"
        width = "100%"
        height = "100%"
        x = "0"
        y = "0"
        stroke = "red"
        strokeWidth = "3"
        fill = "purple"
    }
    children += SVG.svg {
        id = "s1"
        width = "80%"
        height = "80%"
        attributes["x"] = "10%"
        attributes["y"] = "10%"
        rect {
            id = "r1"
            width = "100%"
            height = "100%"
            x = "0"
            y = "0"
            stroke = "red"
            strokeWidth = "3"
            fill = "blue"
        }
        children += SVG.svg {
            id = "s2"
            width = "80%"
            height = "80%"
            attributes["x"] = "10%"
            attributes["y"] = "10%"
            rect {
                id = "r2"
                width = "100%"
                height = "100%"
                x = "0"
                y = "0"
                stroke = "red"
                strokeWidth = "3"
                fill = "cyan"
            }
        }
    }
}
val borkedSVG = buildString {
    svg.render(this, RenderMode.FILE)
}.also {
    File("test_broken.svg").writeText(it)
    println(it)
}

broken output:

<?xml version="1.0" encoding="UTF-8" ?>
<svg height="256" id="s0" width="256" xmlns="http://www.w3.org/2000/svg">
<rect fill="purple" height="100%" id="r0" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
<?xml version="1.0" encoding="UTF-8" ?>
<svg height="80%" id="s1" width="80%" x="10%" xmlns="http://www.w3.org/2000/svg" y="10%">
<rect fill="blue" height="100%" id="r1" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
<?xml version="1.0" encoding="UTF-8" ?>
<svg height="80%" id="s2" width="80%" x="10%" xmlns="http://www.w3.org/2000/svg" y="10%">
<rect fill="cyan" height="100%" id="r2" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
</svg>
</svg>
</svg>

expected/fixed:

<?xml version="1.0" encoding="UTF-8" ?>
<svg height="256" id="s0" width="256" xmlns="http://www.w3.org/2000/svg">
<rect fill="purple" height="100%" id="r0" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
<svg height="80%" id="s1" width="80%" x="10%" y="10%">
<rect fill="blue" height="100%" id="r1" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
<svg height="80%" id="s2" width="80%" x="10%" y="10%">
<rect fill="cyan" height="100%" id="r2" stroke="red" stroke-width="3" width="100%" x="0" y="0"/>
</svg>
</svg>
</svg>