I am unable to open certain svg files with flutter_svg package
example of file is this
I wanted to make sure there is nothing I am missing before I may be open an issue
I am getting no error back just an empty space
the code for loading the image
SvgPicture.asset(
"assets/svg/agaseke_logo.svg",
color: Color(0xFF0bd50b),
height: 45,
width: 25,
),
Related
image is not loading in output in my screen .soo plz anyone help me in solving this
Container(
decoration: const BoxDecoration(
image:DecorationImage(image: NetworkImage(''))
),
)
Check if you added your image into the pubspec.yaml file like this:
assets:
- images/image1.jpeg
- images/icon.png
I suggest use the child of the Container and not the decoration.
Also, you could use Image.Asset instead, specifing height or/and height:
Image.asset('images/icon.png', height: 20)
Documentation here and here
Generally, Network Images on flutter take time to appear.
But if it still continues then
Check Internet Permission setting in andoidmanifes.xml file
Using Asset image is not a good solution because it makes the app size larger..
The solution is that you need to use:
Container(
child: Image.network('') //your image source
)
And if that is not the case.. the image you are using is invalid but not exactly invalid. Meaning it does not end with an image format in the end.. like (.jpg,.png etc.)
I have added images on assets folder/images. So I'm trying to make a page with an image banner and this is my code:
Container(
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: const DecorationImage(
image: AssetImage("assets/images/drive.png"),
fit: BoxFit.fill,
),
),
),
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/
- images/a_dot_ham.jpeg
Make sure that extension of image in your project is exactly same with those images which you added in asset folders. (.jpeg,.jpg or .png)
Must check pubspec file. Then do run one time pub get command in pubspec file. Still you can't see an image in your app then go File -> Invalidate Caches / Restart.
(You can use Image.asset also instead of AssetImage too.)
I'm currently in the process of integrating a map into my app, which should highlight individual components in color. I use this map (https://simplemaps.com/resources/svg-de), which is already available in a well-designed SVG file. I am now trying to color the individual SVG paths using Flutter Code. I am building on the svg_path_parser package (https://pub.dev/packages/svg_path_parser) and have used the corresponding example. But I am unable to replace the paths from the example with those from my SVG file. This may be due to the fact that my SVG paths are significantly longer than the ones given in the example.
I would be very grateful if you would give me a little help or a suggestion for a better approach.
step 1.add dependency in your pubspec.yaml
dependencies:
flutter_svg: any
step 2.import the flutter svg package in your app
import 'package:flutter_svg/flutter_svg.dart';
step 3. just use like below
SvgPicture.asset(
'assets/images/bm-icon1.svg',
width: 18.0,
height: 18.0,
),
My designer has switched from PNG to SVG files, 'cause our icons are to pixelated.
How I can use a SVG as an ImageIcon?.
Previous I have used this for PNG files:
ImageIcon(AssetImage('assets/images/ic_home.png')
I'm using flutter_svg (SvgPicture.asset(item.icon, height: 24, width: 24))
Thank you in advance for your help!
You actually can't do it as mentioned here by Flutter SVG creator that PictureProvider and ImageProvider are incompatible and ImageIcon needs an ImageProvider.
However, you don't actually need to do it, and you probably won't as well. You can refactor your code to use:
SvgPicture.asset(item.icon, height: 24, width: 24)
And nothing else. That should be enough, no need for more complexity.
I am using the latest library update
dependencies:
flutter_svg: ^0.17.4
Container( height: 150, //color: Colors.blue, width: screenWidth * 0.80, child: SvgPicture.asset( "assets/logo-violeta-NVIAME-login.svg", color: Color(0xFF6327f8), ), ),
------------------------------------------------------------------------
My code worked but I did Hot Restart .. and well I get the following exception
The <style> element is not implemented in this library.
Style elements are not supported by this library and the requested SVG may not render as intended.
If possible, ensure the SVG uses inline styles and/or attributes (which are supported), or use a preprocessing utility such as svgcleaner to inline the styles for you.
Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#60537(), name: "assets/logo-violeta-NVIAME-login.svg", colorFilter: ColorFilter.mode(Color(0xff6327f8), BlendMode.srcIn))
════════════════════════════════════════════════════════════════════════════════
I/flutter (26058): unhandled element metadata; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#60537(), name: "assets/logo-violeta-NVIAME-login.svg", colorFilter: ColorFilter.mode(Color(0xff6327f8), BlendMode.srcIn))
It is actually the SVG image that you've used.
As mentioned in the error:
The <style> element is not implemented in this library.
Style elements are not supported by this library and the requested SVG may not render as intended.
If possible, ensure the SVG uses inline styles and/or attributes (which are supported), or use a preprocessing utility such as svgcleaner to inline the styles for you.
flutter_svg package does not support svg with internal css like:
<style>
.....
</style>
Here is an open GitHub issue that indicates it is not yet supported.
Some of the options that you can actually try:
Remove the internal css and write inline css
Use different svg picture
Use a preprocessing utility such as svgcleaner to inline the styles for you. Which is exactly the one you've found as mentioned in the comments. See also this SO post.
Use this tool https://jakearchibald.github.io/svgomg/
But the easiest way is to have your design tool not use CSS if possible.
My workaround: drag and drop the svg files to the Figma design tool and then export all of them to get the standard error-free svg files.
I faced this issue too, then I used 'SVG Cleaner' app to clean and inline SVG code.
By the end it worked properly ^_*