Flutter_svg: [Web, SKIA] SVGs no longer working on mobile browsers with flutter 1.26?
Flutter 1.26.0 was released to beta channel last week. With 1.26.0-17.3.pre and flutter_svg 0.20.0-nullsafety.2 my app did not show SVGs on mobile browsers (tested on latest Chrome on Android 10 and latest Safari on iOS 14.3 on an iPhone 12 Pro). SVGs did however show up in desktop browsers.
By reverting down to flutter 1.25.0-8.3.pre and no other changes in the app, everything works on mobile browsers again.
This is a pretty short description and I haven't had time to create a minimal repro example yet. I will continue to investigate this but wanted to log the issue if someone else runs into it too.
If someone has any idea on what could be wrong I'm more than happy to test something on my side to get flutter 1.26 working with SVGs in SKIA Web.
mikeesouth
All 9 comments
I have the same problem, my SVG works on desktop without any problem but on Android Chrome it's not rendering. It also throws an exception:
js_primitives.dart:30 ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
js_primitives.dart:30 The following UnimplementedError was thrown during paint():
js_primitives.dart:30 UnimplementedError
js_primitives.dart:30
js_primitives.dart:30 The relevant error-causing widget was:
js_primitives.dart:30 RawPicture
js_primitives.dart:30 file:///C:/Users/husar/AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/flutter_svg-0.20.0-nullsafety.3/lib/svg.dart:806:24
js_primitives.dart:30
js_primitives.dart:30 When the exception was thrown, this was the stack:
js_primitives.dart:30 C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49 throw_
js_primitives.dart:30 C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/html/canvas.dart 448:5 drawPicture
js_primitives.dart:30 packages/flutter_svg/src/render_picture.dart 195:12 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 588:14 pushTransform
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 2590:21 [_paintChildWithTransform]
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 2607:17 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/shifted_box.dart 72:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/box.dart 2805:14 defaultPaint
js_primitives.dart:30 packages/flutter/src/rendering/flex.dart 1079:7 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/box.dart 2805:14 defaultPaint
js_primitives.dart:30 packages/flutter/src/rendering/flex.dart 1079:7 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/shifted_box.dart 72:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/box.dart 2805:14 defaultPaint
js_primitives.dart:30 packages/flutter/src/rendering/flex.dart 1079:7 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/box.dart 2805:14 defaultPaint
js_primitives.dart:30 packages/flutter/src/rendering/stack.dart 629:5 paintStack
js_primitives.dart:30 packages/flutter/src/rendering/stack.dart 639:7 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/material/material.dart 551:11 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/custom_paint.dart 608:11 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 396:12 pushLayer
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 2024:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/shifted_box.dart 72:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/box.dart 2805:14 defaultPaint
js_primitives.dart:30 packages/flutter/src/rendering/flex.dart 1079:7 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/box.dart 2805:14 defaultPaint
js_primitives.dart:30 packages/flutter/src/rendering/custom_layout.dart 412:5 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/material/material.dart 551:11 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 396:12 pushLayer
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 1925:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/shifted_box.dart 72:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/widgets/layout_builder.dart 384:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 189:12 paintChild
js_primitives.dart:30 packages/flutter/src/rendering/proxy_box.dart 142:14 paint
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 2322:7 [_paintWithContext]
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 140:10 _repaintCompositedChild
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 100:5 repaintCompositedChild
js_primitives.dart:30 packages/flutter/src/rendering/object.dart 978:29 flushPaint
js_primitives.dart:30 packages/flutter/src/rendering/binding.dart 455:19 drawFrame
js_primitives.dart:30 packages/flutter/src/widgets/binding.dart 874:13 drawFrame
js_primitives.dart:30 packages/flutter/src/rendering/binding.dart 319:5 [_handlePersistentFrameCallback]
js_primitives.dart:30 packages/flutter/src/scheduler/binding.dart 1144:15 [_invokeFrameCallback]
js_primitives.dart:30 packages/flutter/src/scheduler/binding.dart 1082:9 handleDrawFrame
js_primitives.dart:30 packages/flutter/src/scheduler/binding.dart 998:5 [_handleDrawFrame]
js_primitives.dart:30 C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/platform_dispatcher.dart 896:13 invoke
js_primitives.dart:30 C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/platform_dispatcher.dart 145:5 invokeOnDrawFrame
js_primitives.dart:30 C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine.dart 259:45 <fn>
js_primitives.dart:30
js_primitives.dart:30 The following RenderObject was being processed when the exception was fired: RenderPicture#a052d:
js_primitives.dart:30 creator: RawPicture ← SizedBox ← FittedBox ← SizedBox ← Semantics ← SvgPicture ← AspectRatio ←
js_primitives.dart:30 Padding ← Container ← Row ← AppBarUserProfile ← Row ← ⋯
js_primitives.dart:30 parentData: <none> (can use size)
js_primitives.dart:30 constraints: BoxConstraints(w=676.0, h=676.0)
js_primitives.dart:30 size: Size(676.0, 676.0)
js_primitives.dart:30 This RenderObject has no descendants.
js_primitives.dart:30 ════════════════════════════════════════════════════════════════════════════════════════════════════
(2)js_primitives.dart:30 Another exception was thrown: UnimplementedError
leoshusar
on 10 Feb 2021
Is there any way to solve this exception, except to downgrade the flutter ,any solution ?
mirshahbazi
on 13 Feb 2021
This might be related to the used web renderer.
flutter_svg only supports the canvaskit web renderer, however the default renderer option is auto which chooses a renderer based on the client, i.e. HTML on mobile and CanvasKit on desktop
auto (default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and CanvasKit renderer when the app is running in a desktop browser.
https://flutter.dev/docs/development/tools/web-renderers#command-line-options
You can try forcing the usage of the CanvasKit renderer during build time:
flutter build web --web-renderer canvaskit
christxph
on 13 Feb 2021
Ah, I wonder if this has changed. I set canvaskit/SKIA using --dart-define=FLUTTER_WEB_USE_SKIA=true but it seems like the --web-renderer canvaskit is the important flag when building for web. Has this changed from --dart-define=FLUTTER_WEB_USE_SKIA=true or is it supposed to be one way of defining it when running the app and another flag when building the app?
mikeesouth
on 14 Feb 2021
Has this changed from
--dart-define=FLUTTER_WEB_USE_SKIA=trueor is it supposed to be one way of defining it when running the app and another flag when building the app?
Under the hood, the --web-renderer canvaskit flag is an alias for setting two flags, FLUTTER_WEB_USE_SKIA=true and FLUTTER_WEB_AUTO_DETECT=false.
If you are only setting FLUTTER_WEB_USE_SKIA to true, then the config gets overruled by FLUTTER_WEB_AUTO_DETECT, as this is true by default.
See the relevant code in the Flutter framework here:
https://github.com/flutter/flutter/blob/ce318b7b539e228b806f81b3fa7b33793c2a2685/packages/flutter_tools/lib/src/runner/flutter_command.dart#L149
Edit: In particular, this was the commit that introduced the change @mikeesouth is referring to: https://github.com/flutter/flutter/pull/69319/commits/816e5cdac841af2ef6942303c1bcc345d24db116
christxph
on 14 Feb 2021
@mikeesouth From 1.26 Flutter is no longer supporting SVGs in html renderer, so you must build the project using canvaskit renderer. I hope that @dnfield is working in the html renderer implementation, because canvas right now is not viable in production environments.
franarolas
on 15 Feb 2021
@franarolas thanks for the info. But why wouldn't canvas viable in production environments? I'm currently using it in production without any issues (at least none that I know of).
mikeesouth
on 15 Feb 2021
@franarolas thanks for the info. But why wouldn't canvas viable in production environments? I'm currently using it in production without any issues (at least none that I know of).
@mikeesouth The initial load time of canvaskit is way too slow, it takes about 2-3 seconds to load the website with canvas which is way too much.
franarolas
on 15 Feb 2021
@franarolas Ok. The initial load is not an issue at all for me and page refresh after the initial load of my app is about 350ms so that's more than fine for me.
I'm gonna go ahead and close this issue since it's been resolved (for me). The problem in my case was that I used --dart-define=FLUTTER_WEB_USE_SKIA=true instead of --web-renderer canvaskit.
Thanks for the help everyone!
mikeesouth
on 15 Feb 2021
Related issues
jeffersondarcy
·
3Comments
Skyost
·
3Comments
lennartschoch
·
4Comments
ChristianKleineidam
·
5Comments
Eddydpyl
·
6Comments
Most helpful comment
This might be related to the used web renderer.
flutter_svg only supports the canvaskit web renderer, however the default renderer option is
autowhich chooses a renderer based on the client, i.e. HTML on mobile and CanvasKit on desktophttps://flutter.dev/docs/development/tools/web-renderers#command-line-options
You can try forcing the usage of the CanvasKit renderer during build time:
flutter build web --web-renderer canvaskit