Is there a way to display SVG in Canvas and changi...

# compose

[Hachemi Hamadi]

Is there a way to display SVG in Canvas and changing the SVG properties ?

[Dominaezzz]

Yes, there's an SVG composable iirc.

[Dominaezzz]

Vector to be more specific

[Hachemi Hamadi]

@Dominaezzz Vector Assets ? my problem is i am fetching SVG from the server, and i need w way to show it and manipulate it.

[Dominaezzz]

Oh no, you'll need to parse it and then render it using the vector composable API. I think it's called Group and Path .

[Hachemi Hamadi]

Yeah, that’s what i am doing now, i thought maybe there is someone who worked on it before, or some library to help.
But I guess I have to draw it and manipulate it manually. Thanks 👍

[Vsevolod Ganin]

There is a great tool to convert svg to compose vector code: https://github.com/DevSrSouza/svg-to-compose

It can be hooked to gradle build process very easily. Here is an idea

// generate_icons.gradle.kts
import br.com.devsrsouza.svg2compose.Svg2Compose
import br.com.devsrsouza.svg2compose.VectorType

buildscript {
    repositories {
        google()
        mavenCentral()
        maven { url = uri("<https://jitpack.io>") }
    }
    dependencies {
        classpath("com.github.DevSrSouza:svg-to-compose:0.7.0")
    }
}

val inputDir = file("src/main/svg")
val outputDir = file("build/generated/icons_gen")

tasks.register("generateIcons") {
    inputs.dir(inputDir)
    outputs.dir(outputDir)
    doLast {
        Svg2Compose.parse(
            applicationIconPackage = ...,
            accessorName = ...,
            vectorsDirectory = inputDir,
            outputSourceDirectory = outputDir,
            type = VectorType.SVG,
            allAssetsPropertyName = "AllIcons"
        )
    }
}

// build.gradle
apply from: 'generate_icons.gradle.kts'

android {
    ...
    sourceSets {
        main {
            java.srcDirs += file("build/generated/icons_gen")
        }
    }
}

preBuild.dependsOn 'generateIcons'

[Hachemi Hamadi]

thanks @Vsevolod Ganin I already look at it, what i am trying to achieve is :
1- fetch SVG from the backend, and then display it in the application.
2- give the user the ability to drag, rotate, scale the SVG element, beside changing its color, stroke color / width .....

Guess I have to build it from scratch

[Vsevolod Ganin]

Ah, all at runtime, I see. Then yeah, no libraries for that afaik

[Nader Jawad]

I recommend parsing the SVG into an ImageVector and drawing that by passing it to a VectorPainter

[Hachemi Hamadi]

@Nader Jawad I tried playing with VectorPainter but AS gave me this error :

Cannot access '<init>': it is internal in 'VectorPainter'

[Nader Jawad]

You want the function constructor which is rememberVectorPainter

[Hachemi Hamadi]

Thanks @Nader Jawad it worked