What happened?

When camera.viewFinder.zoom is larger than 1, the svg appears to be rendered in the unzoomed resolution and then scaled up:

What do you expect?

The svg should be rendered with native resolution regardless of zoom. Here is a quick fix I applied to the flame_svg package: 0be4940. I'm however unsure if it would play well with the pixelRatio parameter. I'd be glad to open a pr if this is considered the "proper" way.

How can we reproduce this?

Set game.camera.viewFinder.zoom to anything higher than 1, and add an SvgComponent to the world.

What steps should take to fix this?

The example is setup to have scroll zooming. Scroll up to zoom in, the heart should then appear pixellated without the patch.

Do have an example of where the bug occurs?

zapp seem to have outdated dart version and can't resolve the flame_svg package. Below is the singular main.dart that can be used to reproduce this behavior. Only the flame and flame_svg package is needed.

import 'dart:math' as math;

import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame/game.dart';
import 'package:flame_svg/flame_svg.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

final svgStr = '''
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 32 32"><path d="M26.996 12.898c-.064-2.207-1.084-4.021-2.527-5.13-1.856-1.428-4.415-1.69-6.542-.132-.702.516-1.359 1.23-1.927 2.168-.568-.938-1.224-1.652-1.927-2.167-2.127-1.559-4.685-1.297-6.542.132-1.444 1.109-2.463 2.923-2.527 5.13-.035 1.172.145 2.48.788 3.803 1.01 2.077 5.755 6.695 10.171 10.683l.035.038.002-.002.002.002.036-.038c4.415-3.987 9.159-8.605 10.17-10.683.644-1.323.822-2.632.788-3.804"/></svg>
''';

class SvgWorld extends World {
  final double svgScale;

  SvgWorld({this.svgScale = 1});

  @override
  Future<void> onLoad() async {
    super.onLoad();

    add(
      SvgComponent(
        anchor: Anchor.center,
        svg: await Svg.loadFromString(svgStr),
        position: Vector2(0, 0),
        size: Vector2(100 * svgScale, 100 * svgScale),
      ),
    );
  }

  @override
  void render(Canvas canvas) {
    canvas.drawRect(canvas.getLocalClipBounds(), Paint()..color = Colors.white);

    super.render(canvas);
  }
}

class MreGame extends FlameGame with ScrollDetector {
  MreGame({super.world});

  @override
  void onScroll(PointerScrollInfo info) {
    super.onScroll(info);
    camera.viewfinder.zoom *= math.max(
      1 - (info.scrollDelta.global.y.sign * 0.1),
      0.1,
    );
  }
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GameWidget(game: MreGame(world: SvgWorld()));
  }
}

Relevant log output

Execute in a terminal and put output into the code block below

[✓] Flutter (Channel stable, 3.29.3, on Arch Linux 6.14.7-zen2-1-zen, locale en_US.UTF-8) [231ms]
• Flutter version 3.29.3 on channel stable at /home/vun/softwares/flutter/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ea121f8859 (7 weeks ago), 2025-04-11 19:10:07 +0000
• Engine revision cf56914b32
• Dart version 3.7.2
• DevTools version 2.42.3

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.1) [340ms]
• Android SDK at /home/vun/Android/Sdk
✗ cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/to/linux-android-setup for more details.

[✓] Chrome - develop for the web [183ms]
• CHROME_EXECUTABLE = /usr/bin/chromium

[✓] Linux toolchain - develop for Linux desktop [494ms]
• clang version 19.1.7
• cmake version 4.0.2-dirty
• ninja version 1.12.1
• pkg-config version 2.4.3

[✓] Android Studio (version 2024.3) [180ms]
• Android Studio at /home/vun/softwares/android-studio
• Flutter plugin version 85.2.3
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 21.0.6+-13355223-b631.42)

[✓] IntelliJ IDEA Community Edition (version 2025.1) [17ms]
• IntelliJ at /usr/share/idea
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] Connected device (2 available) [292ms]
• Linux (desktop) • linux • linux-x64 • Arch Linux 6.14.7-zen2-1-zen
• Chrome (web) • chrome • web-javascript • Chromium 137.0.7151.40 Arch Linux

[✓] Network resources [852ms]
• All expected network resources are available.

! Doctor found issues in 1 category

Affected platforms

All

Other information

No response

Are you interested in working on a PR for this?

• I want to work on this