Skip to content

maheshwaran-p/samplesvg

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

hiphopofficialteam@gmail.com

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