Jetpack Compose中SVG图标使用.size()修饰符后被截断问题求助

我已成功渲染设备本地存储的SVG图标，但调整尺寸时遇到问题：使用.size()修饰符后图标会被截断（添加红色边框显示边界），尝试用Box组件包裹设置宽高也未解决。

代码片段 #

badge.iconImage?.localFilename?.also { iconUrl ->
                if (iconUrl.endsWith("svg")) {

                    FileInputStream(AppUtils.getFilesBaseDir() + iconUrl).use { stream ->
                        val painter: Drawable = PictureDrawable(
                            SVG.getFromInputStream(stream, null).renderToPicture()
                        )
                        Column {
                            Icon(
                                painter = rememberAsyncImagePainter(painter),
                                contentDescription = null,
                                modifier = Modifier
                                    .padding(6.dp, 2.dp, 0.dp, 2.dp)
                                    .border(1.dp, Color.Red)
                            )

                        }
                    }
                }
            }

效果截图 #

应用.size()修饰符后的效果（图标被截断）：

未使用修饰符的原始效果：

解决方案 #

核心问题

直接用PictureDrawable配合rememberAsyncImagePainter时，Compose的Icon组件不会自动缩放SVG内容，.size()修饰符仅会裁剪画布而非缩放图标本身，导致显示截断。

方法1：自定义SVG Painter（推荐）

创建自定义Painter来处理SVG的缩放逻辑，确保图标能适配指定尺寸：

// 自定义可缩放的SVG Painter
fun rememberSvgPainter(svg: SVG): Painter {
    return remember(svg) {
        object : Painter() {
            // 返回SVG的原始尺寸作为固有大小
            override val intrinsicSize: Size
                get() = Size(svg.documentWidth.toFloat(), svg.documentHeight.toFloat())

            override fun DrawScope.onDraw() {
                // 在DrawScope中绘制SVG，自动适配当前画布尺寸
                drawPicture(svg.renderToPicture())
            }
        }
    }
}

修改原代码中的Painter创建逻辑：

badge.iconImage?.localFilename?.also { iconUrl ->
    if (iconUrl.endsWith("svg")) {
        FileInputStream(AppUtils.getFilesBaseDir() + iconUrl).use { stream ->
            val svg = SVG.getFromInputStream(stream, null)
            Column {
                Icon(
                    painter = rememberSvgPainter(svg),
                    contentDescription = null,
                    modifier = Modifier
                        .padding(6.dp, 2.dp, 0.dp, 2.dp)
                        .size(24.dp) // 现在可以正常设置尺寸，图标会自动缩放
                        .border(1.dp, Color.Red)
                )
            }
        }
    }
}

方法2：使用ContentScale配合缩放修饰符

如果不想自定义Painter，可以通过contentScale和.scale()调整显示行为：

Icon(
    painter = rememberAsyncImagePainter(painter),
    contentDescription = null,
    contentScale = ContentScale.Fit, // 让图标适配容器尺寸
    modifier = Modifier
        .padding(6.dp, 2.dp, 0.dp, 2.dp)
        .size(24.dp)
        .scale(1f) // 可根据需要调整缩放比例，1f为原始大小
        .border(1.dp, Color.Red)
)

注意：这种方式可能存在适配精度问题，优先推荐方法1。

额外提示

• 检查SVG文件是否包含固定viewBox属性，若有异常可手动调整viewBox确保缩放兼容性；
• rememberAsyncImagePainter主要用于网络图片加载，本地SVG直接使用自定义Painter更高效适配。

内容的提问来源于stack exchange，提问作者Admir Husić