ImageVector is blurry when used with `Image()` + `Modifier.scale()`

[alexstyl]

Describe the bug

When I use an Image holding an ImageVector and I scale it say x4, the end result is a blurry image instead of a scrip one.

Code:

Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Row {
            Image(Add, null, Modifier.scale(1f))
            Spacer(Modifier.width(40.dp))
            Image(Add, null, Modifier.scale(4f))
        }
    }

Affected platforms I tried on Desktop

Versions

• Libraries:
  • Compose Multiplatform version: 1.6.10

Screenshots

Additional context ImageVector I used:

val Add: ImageVector by lazy {
    ImageVector.Builder(name = "add", defaultWidth = 40.0.dp, defaultHeight = 40.0.dp, viewportWidth = 40.0f, viewportHeight = 40.0f).apply {
        path(fill = SolidColor(Color(0xFF212121)), fillAlpha = 1f, stroke = null, strokeAlpha = 1f, strokeLineWidth = 1.0f, strokeLineCap = StrokeCap.Butt, strokeLineJoin = StrokeJoin.Miter, strokeLineMiter = 1f, pathFillType = PathFillType.NonZero) {
            moveTo(20f, 31.458f)
            quadToRelative(-0.542f, 0f, -0.917f, -0.396f)
            quadToRelative(-0.375f, -0.395f, -0.375f, -0.937f)
            verticalLineToRelative(-8.833f)
            horizontalLineTo(9.875f)
            quadToRelative(-0.583f, 0f, -0.958f, -0.375f)
            reflectiveQuadTo(8.542f, 20f)
            quadToRelative(0f, -0.583f, 0.375f, -0.958f)
            reflectiveQuadToRelative(0.958f, -0.375f)
            horizontalLineToRelative(8.833f)
            verticalLineTo(9.833f)
            quadToRelative(0f, -0.541f, 0.375f, -0.916f)
            reflectiveQuadTo(20f, 8.542f)
            quadToRelative(0.542f, 0f, 0.938f, 0.375f)
            quadToRelative(0.395f, 0.375f, 0.395f, 0.916f)
            verticalLineToRelative(8.834f)
            horizontalLineToRelative(8.792f)
            quadToRelative(0.583f, 0f, 0.958f, 0.395f)
            quadToRelative(0.375f, 0.396f, 0.375f, 0.938f)
            quadToRelative(0f, 0.542f, -0.375f, 0.917f)
            reflectiveQuadToRelative(-0.958f, 0.375f)
            horizontalLineToRelative(-8.792f)
            verticalLineToRelative(8.833f)
            quadToRelative(0f, 0.542f, -0.395f, 0.937f)
            quadToRelative(-0.396f, 0.396f, -0.938f, 0.396f)
            close()
        }
    }.build()
}

[alexstyl]

There seems to be strong opinions on Slack whether this is a bug or not (discussion).

From my POV, I am using a vector, and I see a scale() modifier that doesn't scale the vector. the way image works internally sounds like an implementation detail to me.

The same scenario using html + css is trivial to achieve.

I'm happy to use an alternative API if available to achieve the same result.

[alexstyl]

Turns out the same behavior is present on Jetpack Compose. I was asked to open a new issue on Google's issue tracker.

Closing this one.

EDIT: Link to issue on GTracker: https://issuetracker.google.com/u/3/issues/342701234