I have an SVG type file. I want to show it in my Flutter app using flutter_svg package. But when I imported it, the color turns into black.
According to this answer, I 'm using this software to clean it.
For some files, it's worked really well. But, I have an issue with this file.
When I'm trying to show it in my app, the stroke width decreased and my SVG becomes really thin.
This is what I want:
But, this is what I've got:
Does anyone have an idea how to solve this?
ATTACHMENT: This is the SVG file link
You need to create a path from the outline stroke line.
this is your svg: https://gist.github.com/kherel/02f288ecd73f0c29a04b1f2d9c5db3e3
I've used figma
Related
I have an SVG file, how can i interact with it and change color of different portions of SVG file.
I am trying this thing very first time, and i am confused how to achieve it. Any possible and step by step solutions?
TIA
When i am exporting svg images from figma, these images in flutter are not rendering and throwing error ? Even using flutter_svg package.
Try this package: jovial_svg. If it doesn't help, you will need to edit your svg (just deleting defs not always helps). Or to write your own render for it.
You will need to move your <defs> statements to the beginning of the file instead. Save your svg's as normally through Figma and open it with your text editor of choice. Find the <defs> </defs> statements and move them up as the first children of the <svg> element.
It is described in further detail here by the author of the flutter_svg package.
If everything else fails and you have a particular annoying svg, I've had success with using various svg optimizer tools found online.
I am trying to display on a flutter app (here on the desktop version) this kind of interactive svg:
Svg flame graph
The problem is that since Flutter doesn't support svg by default, they only a few solution to it. The flutter_svg package doesn't work in my case because it render a picture. So the interactivity will not work. We can't click on the svg and have the data changing according to where we clicked.
In addition, we have a potential search with text that is included in this svg. Finally, this svg provided is only an example but in my project a svg of this type will be generated depending on the user need. So, I can't "hard code" the svg in my project.
So, do you have any ideas how to display that kind of svg in an flutter app?
I'd like to add custom markers with text labels on my map. I can use MapViewPins for this, but they "tremble" when map is being moved. Even one MapViewPin behaves like this in official Here example, so it is probably not an optimization issue.
When i load PNG image and use it as a MapMarker, it works perfectly. But i don't know how to add text to a marker.
I am using Here SDK for Flutter (Navigate Edition) 4.12.4.0 with Flutter 3.3.2
GIF below is an example. Cyan circles are MapMarkers, markers with icons and label are MapViewPins. Is there any solution to this problem?
Unfortunately, the MapViewPins, being widgets embedded in the MapView surface, need to be relocated to the fixed coordinates every time the map is interacted with by gestures, which is why you notice this "strange" behavior.
However, what you mention about using MapMarkers would be the best solution but in this case instead of using PNG files, you could use SVG files in which you enter the text you want to display.
There is currently no other way available to do what you mention using the HERE SDK (Navigate Edition).
Here is a link to our most up-to-date HERE SDK (Navigate Edition) documentation: https://developer.here.com/documentation/flutter-sdk-navigate/dev_guide/index.html
I'm experimenting with .net maui. i'm using vs 17.3 preview 4. I'd like to change the spash screen. i would think that i would change the content of the spash.svg file. I've changed the content of the file. I've left the property of the file as mauispashscreen. I've created a simple png file and have converted it with an online svg converter. the file is viewable with msft edge browser. All i get is a purple screen without the text changes. I'm just trying to do something simple. what should i look for in the setup of the file or the project? any suggestions are appreciated.
Wally
At first, please double click your project and check if there is the code in your projectname.csproj file or not. It seems when you delete the splash.svg file and add a new one in the resources, the code will be auto deleted.
<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" />
And then, I have tried to convert a png to svg, but the picture can't show perfectly as the splash. So I download a svg from the svg picture website and it can work well.
It seems maui can't make all the svg show as the splash screen perfectly. You can also download one instead of converting the png.