Skip to content

maheshwaran-p/samplesvg

Repository files navigation

How to Use

  1. Download any svg and goto svg2flutter tool (https://svg2widget.web.app/) to convert your svg as flutter code
  2. Then Choose svg from your system , after this action tool will provide you flutter code for your choosen svg .
  3. Come back here with tool provided code . Then you can use the tool provided code like this example/sample project flow.

Simple trick to use png as flutter code

  1. use this site to download png images (png images free to download) ------> https://www.flaticon.com/
  2. use this site to convert png to svg -----> https://convertio.co/png-svg/
  3. use this site to convert svg to flutter ----> https://svg2widget.web.app

  4. caution while using this trick some times (https://svg2widget.web.app) tool will provide the code with transparent color but no worries you can change the color . check the tool provided code and change the color as you want . (Paint()..color = Colors.black) <------ edit this line in tool provided code to change the svg color) .

feel free to share your suggestions or doubts here ---> #4 .

Contact Us using this mail

[email protected]

Performance Metrics

Normal SVG Rendering renders the svg in 4 FPS , But svg2path Rendering renders a svg in 15 FPS. Here I just compared with single svg . List of svg can create the huge difference .
For an instance , while using the svg in list view builder users can perceive the frame drop issue .

normal-svg-rendering svg2path-rendering

Result:

3.75x times faster than normal svg rendering method

svg2path-rendering

Normal Svg Rendering performance on mobile Raster max rendering 0.3 fps and Ui max 13.8 fps

photo_6192503643333309053_y

Svg2Path Rendering performance on mobile Raster max rendering 8.3 fps and Ui max 24.8 fps

photo_6192503643333309054_y

samplesvg

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter development, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published