AndroidSvg with Jetpack Compose

The most straightforward way to render AndroidSvg images inside Jetpack Compose is to wrap a SvgImageView in an AndroidView, similar to this example:

@Composable
fun Svg(modifier: Modifier, svg: SVG) {
    AndroidView (
        factory = { context ->
            SVGImageView(context)
        },
        modifier = modifier,
        update = { svgImageView ->
            svgImageView.setSVG(svg)
        }
    )
}

However, AndroidViews seem to have significant overhead. So a better way to achieve the same result is to render the SVG into a compose Canvas, similar to this:

@Composable
fun Svg(modifier: Modifier, svg: SVG) {
   val bounds = remember {
       mutableStateOf(RectF(0f, 0f, 48f, 48f))
   }
   Canvas(
       modifier = modifier.onGloballyPositioned {
       bounds.value = RectF(
           0f, 
           0f,
           it.size.width.toFloat(),
           it.size.height.toFloat())
        }
    ) {
        drawIntoCanvas {
            svg.renderToCanvas(
                it.nativeCanvas, bounds.value)
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *