Repository: flutter
Issue: [flutter_svg] Image not show completely
Labels: package,p: flutter_svg

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

Original report by @omidraha on May 7, 2020

Hi,

I have this simple SVG file:

```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="375" height="407" viewBox="0 0 375 407">
  <defs>
    <clipPath id="clip-path">
      <rect id="Rectangle_2344" data-name="Rectangle 2344" width="375" height="407" transform="translate(0 177)" fill="#fff" stroke="#707070" stroke-width="1"/>
    </clipPath>
  </defs>
  <g id="_4" data-name="4" transform="translate(0 -177)" clip-path="url(#clip-path)">
    <g id="Polygon_19" data-name="Polygon 19" transform="translate(15 177)" fill="#fff">
      <path d="M 345.2359313964844 395.5 L 0.7640888690948486 395.5 L 173.0000152587891 1.248977780342102 L 345.2359313964844 395.5 Z" stroke="none"/>
      <path d="M 173.0000152587891 2.497894287109375 L 1.52813720703125 395 L 344.4718933105469 395 L 173.0000152587891 2.497894287109375 M 173.0000152587891 0 L 346 396 L 3.0517578125e-05 396 L 173.0000152587891 0 Z" stroke="none" fill="#707070"/>
    </g>
    <g id="Ellipse_659" data-name="Ellipse 659" transform="translate(42 269)" fill="#fff" stroke="#707070" stroke-width="1">
      <ellipse cx="147" cy="152" rx="147" ry="152" stroke="none"/>
      <ellipse cx="147" cy="152" rx="146.5" ry="151.5" fill="none"/>
    </g>
  </g>
</svg>
```
That looks like [this](https://i.ibb.co/THbcTLW/sample.png).

But when I show it with this code:

```
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Sample(),
    );
  }
}

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: SvgPicture.asset(
        'assets/images/sample.svg',
      ),
    );
  }
}
```

The result is just part of image:

https://i.ibb.co/Qjc2XWh/sample-result.png

I also try these attributes of `SvgPicture.asset`: 
`fit: BoxFit.cover`, `height`,  `width`,  `allowDrawingOutsideView`
But  still image not show completely.






---
Comment by @dnfield on May 7, 2020
There's some bug in the way the transforms are getting handled for that clip path.

Your SVG could be simplified as such:

```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="375" height="407" viewBox="0 0 375 407">
  <g id="_4" data-name="4" transform="translate(0 -177)">
    <g id="Polygon_19" data-name="Polygon 19" transform="translate(15 177)" fill="#fff">
      <path d="M 345.2359313964844 395.5 L 0.7640888690948486 395.5 L 173.0000152587891 1.248977780342102 L 345.2359313964844 395.5 Z" stroke="none"/>
      <path d="M 173.0000152587891 2.497894287109375 L 1.52813720703125 395 L 344.4718933105469 395 L 173.0000152587891 2.497894287109375 M 173.0000152587891 0 L 346 396 L 3.0517578125e-05 396 L 173.0000152587891 0 Z" stroke="none" fill="#707070"/>
    </g>
    <g id="Ellipse_659" data-name="Ellipse 659" transform="translate(42 269)" fill="#fff" stroke="#707070" stroke-width="1">
      <ellipse cx="147" cy="152" rx="147" ry="152" stroke="none"/>
      <ellipse cx="147" cy="152" rx="146.5" ry="151.5" fill="none"/>
    </g>
  </g>
</svg>
```

and should render correctly that way, as well as being more performant.  This is still a bug that should get fixed, but I'm not sure when I'll get to it right now.

---
Comment by @omidraha on May 7, 2020
This `SVG` example is its output from  `Adobe XD`,
I have many pictures to export automatically by export option of `Adobe XD` as `SVG`.
And I can't spend time on every `SVG` exported file that have many lines to simplify and I also don't now how to do it.
Thanks for your reply,