sharjeelyunus/github-issues-dataset huggingface dataset:
Repository: flutter
Issue: [flutter_svg] Strange result when rendering complex svg
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/630_

Original report by @Ionaru on Dec 10, 2021

Hi, I am not sure if this is the correct place to discuss my issue, because I am not sure it is flutter_svg related.

**Description**

I'm trying to display an SVG in my application, but the result is not correct.
The SVG contains a series of `<defs>` and `<use>` elements where I think the problem lies.

The original SVG: https://evemaps.dotlan.net/svg/Solitude.svg
I am aware this SVG contains `<style>` , `<script>`, which are not supported by flutter_svg. So I used [svgo](https://github.com/svg/svgo) to clean up the file and got rid of elements I do not need, this is the result: https://gist.github.com/Ionaru/52f1c321c4587c05e512fabe8d0bb26d.

The cleaned up SVG seems to render correctly in browsers and GitHub, but when I pass that file to flutter_svg, it renders like this:

![image](https://user-images.githubusercontent.com/3472373/145636563-f18151b3-20d1-4c6a-a0e8-6442f9c6a663.png)

My flutter code for this widget is extremely simple, with the file hosted on a local webserver.
```dart
Center(
    child: SvgPicture.network(
        'http://127.0.0.1:8080/Solitude.min.svg',
    ),
),
```

What's going wrong here? Is the modified SVG not valid or is there something in it that flutter_svg cannot parse?


**Additional info**

Flutter doctor output:
```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.0, on Microsoft Windows [Version 10.0.19044.1387], locale en-NL)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop for Windows (Visual Studio Build Tools 2019 16.10.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.3)
[✓] VS Code (version 1.63.0)
[✓] Connected device (3 available)

• No issues found!
```

flutter_svg version: 1.0.0

---
Comment by @dnfield on Dec 19, 2021
This one is relatively complicated and I'm sure there are bugs here. There are likely issues in the way the `use` and `symbol` are getting processed.

---
Comment by @Ionaru on Dec 22, 2021
I'm going to open some separate issues with reproducible behaviour, I'll attempt to make the SVG code as small as possible.

---
Comment by @zaif-bsol on Jan 5, 2022
is my issue #641  related to this? Sorry I don't know much about how SVGs work.


---
Comment by @Ionaru on Jan 5, 2022
I don't think so, see my comment on your issue.

---
Comment by @dnfield on Jan 11, 2022
Looks like there's still one more issue with the way fonts are rendered. I don't know when I'll be able to get back to that, but if you can create a smaller repro again it helps.

---
Comment by @Ionaru on Jan 13, 2022
I'll see if I can isolate the issue.
Repository: flutter
Issue: [flutter_svg] No fit BoxFit prevent an error "A RenderFlex overflowed by 854 pixels on the right." if specific height is not specified
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/651_

Original report by @VladimirSrednikh on Jan 15, 2022

https://github.com/VladimirSrednikh/flutter_test
I have a Container with specific height and a Row inside it
when i put an SvgPicture inside that Row without specifing height, i got an error 
> The following assertion was thrown during layout:
> A RenderFlex overflowed by 818 pixels on the right.

```
    return new Material(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          new Container(
            decoration: const BoxDecoration(
              color: Colors.grey,
              border: Border(
                bottom: BorderSide(width: 1.0, color: Color(0xFFFFFFFF)),
              ),
            ),
            height: 27,
            child: Row(children: <Widget>[
              SvgPicture.asset('assets/images/logo.svg', fit: BoxFit.fitHeight,
                //height: 27
              ),
```
but it gone if i specify exact height of the container
and none value of fit parameter can fix it


I believe, there must be some way to not specify height and allow image to fit it container without an error
be it fitHeight or fitWidth
Repository: flutter
Issue: [flutter_svg] Default font colour is white instead of black
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/653_

Original report by @Ionaru on Jan 20, 2022

**Description**
Any `<text>` element without a `fill` attribute displays white text instead of black.


**SVG code**
```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <path fill="#999" d="M0,0 L200,0 L200,200 L0,200 Z" />
    <text x="100" y="100">Test text</text>
</svg>
```


**Expected result (Chrome)**
![image](https://user-images.githubusercontent.com/3472373/150393523-cfa5fc5c-ccc6-499c-b87f-0ad800fcf728.png)




**Actual result (Flutter)**, ignore image size differences.
![image](https://user-images.githubusercontent.com/3472373/150393539-5427b77e-d2bf-4781-9dbd-b252153d0818.png)




**Version info**
- flutter_svg 1.0.1
- Flutter 2.8.0
- Dart 2.15.0
- Chrome 97
- Windows 10


**Additional info**

https://www.w3.org/TR/SVG2/painting.html#FillProperties
Repository: flutter
Issue: [flutter_svg] Wrong render SVG (use symbol)
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/657_

Original report by @sytungan on Jan 24, 2022

Hi Dan,
I get some wrong renders in my app when I try to render an SVG:
```dart
SvgPicture.asset('images/test_svg.svg')
```
**Output:**
![Screenshot_2](https://user-images.githubusercontent.com/43126874/150758748-e5ffc64d-64c9-46b5-9bba-e679f1933baf.png)
**Expected:**
![Screenshot_1](https://user-images.githubusercontent.com/43126874/150758806-0856c89b-cffe-436f-99c4-9131a2b3e998.png)
------------------
### The SVG source:
```xml
<svg width="240" height="240" fill="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="svg_1" viewBox="0 0 105 105">
            <path d="M104.613 50.8914C105.019 51.8715 105.019 52.9728 104.613 53.9529L90.4677 88.1017C90.0618 89.0819 89.2831 89.8605 88.3029 90.2665L54.1541 104.411C53.174 104.817 52.0727 104.817 51.0926 104.411L16.9438 90.2665C15.9637 89.8605 15.185 89.0819 14.779 88.1017L0.634084 53.9529C0.228109 52.9728 0.228109 51.8715 0.634084 50.8914L14.779 16.7426C15.185 15.7625 15.9637 14.9838 16.9438 14.5778L51.0926 0.432876C52.0728 0.0269005 53.174 0.0269008 54.1541 0.432877L88.303 14.5778C89.2831 14.9838 90.0618 15.7625 90.4677 16.7426L104.613 50.8914Z" fill="#C4C4C4"/>
        </symbol>
    </defs>
    <rect x="120" y="120" width="60" height="60" fill="#C4C4C4" transform="rotate(51.82871827259324, 150.0,  150.0)"/>
    <g>
        <use x="100" y="50" width="60" height="60" xlink:href="#svg_1"/>
    </g>
</svg>
```
### Version info:
- flutter_svg `1.0.3`
- Flutter `2.8.1`
- Dart `2.15.1`
- On mobile devices (both Android and iOS)
Repository: flutter
Issue: [flutter_svg] svg not rendering well
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/659_

Original report by @gbbest15 on Jan 28, 2022

i have a problem rending svg to my project... I have already post question in stackoverflow which i will be paste the link here

[https://stackoverflow.com/questions/70894249/flutter-svg-not-rendering-properly](link to the stackoverflow)
Repository: flutter
Issue: [flutter_svg] Flutter - how add custom font for svg image?
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/680_

Original report by @FetFrumos on Mar 11, 2022

I have svg image(export from Adobe Xd). For the correct display of this file, I need to install an additional font in the system(MAC or Windows) - then the picture is displayed correctly, without this font it is incorrect. but I need to display this drawing in application. I using [flutter_svg](https://pub.dev/packages/flutter_svg) plugin. I download ttf of font, add in assets and pubspec. But after that it doesn't work either. how add custom font for svg image(with flutter_svg)?

---
Comment by @dnfield on Mar 13, 2022
I'd find it helpful if you shared a small but complete example of the issue.

Some places where this could possibly go wrong:

- The font isn't getting included in the pubspec correctly (see https://docs.flutter.dev/cookbook/design/fonts).
- The font is getting included as a plain asset and you need to use font loading API to load it (https://api.flutter.dev/flutter/dart-ui/loadFontFromList.html).
- For some reason the SVG is getting parsed and rendered to a picture before the font is loaded.
- The SVG is not specifying the correct font family information to resolve to your custom font.
- The flutter_svg package is not making the right use of font rendering attributes to get the custom font to be used.

Obviously if it's that last point, there's a bug in this package. A reproduction case would be able to narrow this down.

---
Comment by @L4hibYoussef on Mar 15, 2023
Is there any updates on this. I am appearing to have the same issue. Font is loaded before image is rendered and font is available for use in the app. I am building the app for web using canvaskit.

---
Comment by @devalev on Jul 12, 2023
> Is there any updates on this. I am appearing to have the same issue. Font is loaded before image is rendered and font is available for use in the app. I am building the app for web using canvaskit.

You need to load the font when executing the application.
```
void main() async {
  runApp(const MyApp());
}

void loadFont() async {
  var fontLoader = FontLoader("FontName");
  fontLoader.addFont(rootBundle.load('fonts/FontName.ttf'));
  await fontLoader.load();
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    loadFont();
    return Container();
  }
}
```

Please note that sometimes the font-family is specified in extra quotes in the svg file

```
font-family="FontName"
```
and 
```
font-family="'FontName'"
```
these are different things, and, accordingly, you need to import different fonts
```
var fontLoader = FontLoader("FontName");

var fontLoader = FontLoader("'FontName'");
```
Repository: flutter
Issue: [flutter_svg] SVG Images from network once fails never load again
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/682_

Original report by @Khushboo141 on Mar 16, 2022

SvgPicture.network(..) if its once fails when you try with making internet off, it will never load again,
Even if you on the network.
Anyone knows how to fix it?

---
Comment by @dupovalo on Aug 11, 2022
In case it helps someone, here is a fix for the issue: https://github.com/dupovalo/flutter_svg/commit/d128fa5d065eb730a2ba1c5d23084da0bbcf8fe5

Take it as a reference since I'm not sure that is 100% correct solution. The main idea is to remove a failed image from pictures cache. This way the image will be reloaded from network, not from cache, on the next widget rebuild.

---
Comment by @Wahab-Khan on Jul 28, 2024
@dupovalo I tried your solution ... it reloads the image every single time regardless of whether the network once fails or it successfully loads the image.  that causes glitching every time...
Repository: flutter
Issue: [flutter_svg] Flutter Web on iOS: Icons randomly turning into blot
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/684_

Original report by @PawlikMichal25 on Mar 18, 2022

In the screen below all green tiles should display exactly same icon, but after a moment of using the page (it's a memory game) some icons randomly render into "blot":
![bug](https://user-images.githubusercontent.com/15315707/158966683-120e9732-370d-4662-85ed-4b6164c75e0c.jpg)

Also even the simple back icon in top-left corner turned into blot, even though I'm not rebuilding it as user plays the game and AppBar is not scrollable.

I'm using:
```
flutter_svg: 1.0.3
Flutter: 2.10.3
iOS: 15.4, happens on both Safari and Chrome
```

Here are the raw SVG icons, but it also happens with other ones:
![ic_done_circle](https://user-images.githubusercontent.com/15315707/158967201-abab5419-80db-4142-bd83-c1ec0c76c4cb.svg)
![ic_back](https://user-images.githubusercontent.com/15315707/158967210-a2c9f949-b991-498e-83a1-4392cce46796.svg)

I wasn't able to extract minimal reproducible code :(
Perhaps it's related to https://github.com/dnfield/flutter_svg/issues/603 ?

---
Comment by @dnfield on Mar 18, 2022
Does this still happen on the head commit of this repository? There've been a few bug fixes I don't think I've released yet but I should :)

---
Comment by @bigparksh on Apr 8, 2022
I am facing the same issue on the iOS. Android works well.
So, as your advice, I tested against the head commit of the repository.
Unfortunately, the issue still happen.

---
Comment by @crimsonvspurple on May 16, 2022
Hi. We are facing the same issue.

SVG that looks fine and works totally OK in all browsers (desktop, phone, windows, linux etc), get corrupted randomly in _safari_ for MacOS only. Have not noticed this issue on Chrome on MacOS.

---
Comment by @niklaesAtMonta on Jan 26, 2023
~~We are facing the same issues, any updates @dnfield? 🙂~~

~~Only on iOS btw.~~

**Update**
I actually found [this issue report](https://github.com/dnfield/flutter_svg/issues/809) more in line with what we are experiencing.
Sorry for tagging you **dnfield**.
Repository: flutter
Issue: [flutter_svg] CERTIFICATE_VERIFY_FAILED
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/685_

Original report by @xiaomaxuetu on Mar 21, 2022

Handshake error in client (OS Error: 
	CERTIFICATE_VERIFY_FAILED: unable to get local issuer certificate(handshake.cc:359))
Repository: flutter
Issue: [flutter_svg] FEATURE REQUEST: Some way to set ParagraphStyle default
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/688_

Original report by @espresso3389 on Apr 1, 2022

We have several SVG files that have Japanese texts.
And, on Android, the current implementation renders the text with incorrect locale. The Japanese text is rendered with Chinese locale/glyphs.

The ultimate cause of it is that [lib/src/svg/parsers.dart(195)](https://github.com/dnfield/flutter_svg/blob/1e923a3a04be1c5ea71bcdcfcf10b4e02d96751e/lib/src/svg/parsers.dart#L195) always uses the default `ParagraphStyle` constructor.

So, the fix is very easy for my case, I should add a locale for the constructor like the following fragment:

```dart
final ParagraphBuilder builder = ParagraphBuilder(ParagraphStyle(locale: const Locale('ja')))
````

And, with the modification, the rendering result is correct:

![font-j](https://user-images.githubusercontent.com/1311400/161180629-f26838b7-47c5-41eb-8c50-3c90a07cd2c0.png)

 
So, there should be some mechanism to set the `ParagraphStyle` for such cases.

For the testing purpose, I attached the SVG file:

![dp-evacuation](https://user-images.githubusercontent.com/1311400/161180132-28ffdafb-4ebb-4261-8cb9-cc97ac050076.svg)



---
Comment by @espresso3389 on Apr 1, 2022
One more note, basically, the font specified for the text may be missing on the viewer's machine and it may be the cause of this. But it should safely fallback to some appropriate font with the specified locale anyway.

---
Comment by @dnfield on Apr 1, 2022
Thanks for the detailed report.

I'm not sure about the right way to resolve this. We could add something like `locale` to `SvgTheme`, which I think would make sense. I'm just not sure how it would sensibly be set - I guess the application could set it in a way that it knows makes sense? But there's no `DefaultLocale.of` or anything in Flutter. 

/cc @jonahwilliams who might find this interesting

/cc @goderbauer we were talking recently about the framework/text system not having a good way to control this in a widget tree.

---
Comment by @dnfield on Apr 1, 2022
I guess I could just read `PlatofrmDispatcher.instance.locale` and rebuild if it changes?

---
Comment by @jonahwilliams on Apr 1, 2022
Maybe we should add `DefaultLocale.of`? I think the problem with local is that the dart intl package actually uses global state which makes it hard/impossible to override at the subtree level. Requires more research

---
Comment by @jonahwilliams on Apr 1, 2022
What about `Localizations.localeOf`?

---
Comment by @espresso3389 on Apr 1, 2022
I've created PR #689 to discuss how to support such cases. The PR implementation is enough for my purpose but I may not the optimum solution for other cases.

---
Comment by @goderbauer on Apr 1, 2022
> What about Localizations.localeOf?

+1 to that. This sounds like the right hook for the issue.
Repository: flutter
Issue: [flutter_svg] Opacity not support
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/691_

Original report by @conall1995 on Apr 7, 2022

hey 
i am trying to use a svg file have opacity its loaded but without opacity

simple svg  for test 

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="237" height="70" fill="none" viewBox="0 0 237 70">
  <g opacity=".3">
    <path fill="#1F0987" d="M232.04-2.308L237-7.275v9.927l-4.96-4.96zM232.04 12.556l4.96-4.96v9.927l-4.96-4.967zM232.04 27.427l4.96-4.96v9.92l-4.96-4.96zM232.04 42.298l4.96-4.96v9.92l-4.96-4.96zM232.04 57.17l4.96-4.96v9.919l-4.96-4.96zM232.04 72.04l4.96-4.96V77l-4.96-4.96z"/>
    <g>
      <path fill="#1F0987" d="M216.851 12.556l4.96-4.96v9.927l-4.96-4.967zM216.851 27.427l4.96-4.96v9.92l-4.96-4.96zM216.851 42.298l4.96-4.96v9.92l-4.96-4.96zM216.851 57.17l4.96-4.96v9.919l-4.96-4.96z"/>
    </g>
    <g>
      <path fill="#1F0987" d="M201.661 27.427l4.967-4.96v9.92l-4.967-4.96zM201.661 42.298l4.967-4.96v9.92l-4.967-4.96z"/>
    </g>
    <g>
      <path fill="#1F0987" d="M224.01 5.124l4.959-4.96v9.92l-4.959-4.96zM224.01 19.995l4.959-4.96v9.92l-4.959-4.96zM224.01 34.866l4.959-4.96v9.92l-4.959-4.96zM224.01 49.737l4.959-4.96v9.92l-4.959-4.96zM224.01 64.609l4.959-4.96v9.92l-4.959-4.96z"/>
    </g>
    <g>
      <path fill="#1F0987" d="M209.26 19.995l4.959-4.96v9.92l-4.959-4.96zM209.26 34.866l4.959-4.96v9.92l-4.959-4.96zM209.26 49.737l4.959-4.96v9.92l-4.959-4.96z"/>
    </g>
    <g>
      <path fill="#1F0987" d="M193.547 34.866l4.959-4.96v9.92l-4.959-4.96z"/>
    </g>
  </g>
  <path fill="#1F0987" d="M85.176 34.525a3 3 0 00-4.231 0l-12.21 12.15a3 3 0 01-4.231 0l-12.218-12.15a3 3 0 00-4.232 0l-12.208 12.15a3 3 0 01-4.232 0L19.407 34.526a3 3 0 00-4.233 0L1.78 47.864a1.283 1.283 0 101.81 1.818l11.584-11.535a3 3 0 014.233 0l12.207 12.147a3 3 0 004.232 0l12.209-12.149a3 3 0 014.231 0l12.218 12.15a3 3 0 004.232 0l12.209-12.15a3 3 0 014.231 0l11.484 11.42a1.283 1.283 0 101.81-1.82l-13.294-13.22z"/>
</svg>
```


i cant use .with opacity for this file 
flutter ver: Channel stable, 2.10.3, on Mac OS X 10.15.7 
svg_flutter ver: ^1.0.3

---
Comment by @dnfield on Apr 7, 2022
I can't reproduce this. What platform are you using?
Repository: flutter
Issue: [flutter_svg] Shadows, layer blur aren't rendered.
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/705_

Original report by @SulabhShrestha on May 8, 2022

When I preview this svg inside vscode, shadow and layer blur are shown but not in flutter. 

link to svg: https://pastebin.com/c3DkgiA9
link to screenshot that flutter_svg rendered: https://imgur.com/a/hpkRsZ2


---
Comment by @jlyonsmith on May 13, 2022
I just discovered this too.  [It looks like Skia supports Gaussian blur](https://api.skia.org/classSkSVGFeGaussianBlur.html).  I definitely +1 support for this in the library.  Blur is really useful for adding depth effects to layered SVG's.
Repository: flutter
Issue: [flutter_svg] Svg seems to overlap when scrolling (Safari only)
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/716_

Original report by @Velliane on May 31, 2022

Hi there, 

I don't really know if the problem is really here, but with Safari(debug and release), when scrolling, the svg seems to overlap.

https://user-images.githubusercontent.com/44947503/171196682-0a4d775c-c073-4270-a040-9c8dace0d7ab.mov


https://user-images.githubusercontent.com/44947503/171196760-3661c16d-552d-4347-8b2c-689671ffd098.mov


I use `canvaskit` with `flutter_svg 1.1.0 `and `flutter 3.0.0`
Do you have any idea why this is happening?
Thanks in advance


---
Comment by @mminhlequang on Aug 20, 2022
same prob
Repository: flutter
Issue: [flutter_svg] svg render issues
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/733_

Original report by @AkhilSajiCodzoc on Jul 6, 2022

Svg doesnt renders on flutter version 3.0.3.It doesnt shows errors but have some warning about the height and width.here is my code
``` 
 SvgPicture.asset(
      color: Colors.black,
      height: 20.0,
      width: 20.0,
      allowDrawingOutsideViewBox: true,
      semanticsLabel: 'My SVG Picture',
      "assets/images/call.svg")
```


---
Comment by @dnfield on Jul 6, 2022
Please share the actual SVG
Repository: flutter
Issue: [flutter_svg] Using flutter_svg in tests
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/738_

Original report by @rgjurgens on Jul 21, 2022

I'm using `flutter_svg` throughout our project and it works just fine. However, if I'm running the app in an integration test, the app crashes on assets that cannot be found. The error message is as follows, I'm using the latest `flutter_svg` version: 

```
══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════
The following assertion was thrown resolving a single-frame picture stream:
Unable to load asset: assets/buttons/close_button.svg
```

This is the code in my test:

```
import '../main.dart' as app;

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('end-to-end test', () {
    testWidgets('tap on the floating action button, verify counter',
        (tester) async {
      app.main();
      await tester.pumpAndSettle();
```

---
Comment by @rgjurgens on Jul 25, 2022
Any thoughts, remarks? Do I need to provide more information?

---
Comment by @Momy93 on Jul 30, 2022
I had the [same issue](https://github.com/dnfield/flutter_svg/issues/676) SvgPicture.network, and I solved with [HttpOverrides](https://api.flutter.dev/flutter/dart-io/HttpOverrides-class.html).

In your case, you could [mock the AssetBundle](https://stackoverflow.com/questions/68653117/unable-to-load-asset-svg-during-widget-testing).

Another solution that I used in my code, is to convert the svg icons to a font pack. That way I can use them as `Icon` like I would do with a material icon, instead of Svg. 



---
Comment by @HelenaSewell on Jan 26, 2023
Realise this was a long time ago, but what folders do you have added to your pubspec.yaml? I saw this issue when I forgot to add the path to the containing folder, as well as the overall folder. ie 
```
assets:
  - assets/
  - assets/buttons/
```
How the assets loaded was actually not consistent between running the app and running the tests. Adding the subfolders made it work for both.