The lean-svg from upendra-web

lean-svg's Introduction

Lean-SVG is a tool, which is being made to optimize SVG and flatten the transforms which are present in SVG. This project is an experiment with Vue.js and SVGO.

Key Features • How to use? • Tutorial • Credits

Screenshot

Key Features

✂️ Cut down a lot of redundant and useless information from the SVG, like
- editor metadata
- comments
- hidden elements ... etc
Round of the numbers and minify styles
📦 Minify the SVG
Flatten transforms (💥 Keep in mind that the Flatten feature is experimental and works on paths. Text flatten is on the way.)
Flatten shapes

How to use?

You can use this project online by going to this link

locally by cloning and running this application [you'll need Git and Node.js (which comes with npm) installed on your computer]. From your command line:

# Clone this repository
$ git clone https://github.com/upendra-web/lean-svg

# Go into the repository
$ cd lean-svg

# Install dependencies
$ npm install

# Run the app
$ npm start

# Open your browser and goto 'localhost:8080'

Note: If you're using Linux Bash for Windows, see this guide or use node from the command prompt.

Tutorial

First input a SVG by
- uploading SVG or pasting markup
Then select or activate the options which you require
You can view the modified SVG and Code with the help of toggle present in Header
Finally you can download your optimized SVG or just copy the markup.
You change the background of SVG viewer by using background option in Header section.
For new SVG you can directly go to the '+' in the header section.

Credits

This projects uses

And

Great thanks to Jake Archibald, whose SVGOMG code has been a great help to make this project
And thanks to the Flatten code provided by Timo in his gist

Todo

🚀 Launch the site
✂️ Remove unused CSS using Purge CSS or something like that.
✂️ Make a stripped down version of site
Make a Chrome Extension

Made with ❤️ by U-Web

lean-svg's People

Contributors

Stargazers

Watchers

lean-svg's Issues

Any chance you can make a module of the simplifier?

This is an awesome tool, thank you very much. But I need to flatten transforms on several hundred SVG files.

Can you make a module of the simplifier so I can do so programmatically?

External links on https://lean-svg.netlify.app/ don't work

Hi! Thanks for a great app.

I've got an issue to report for the web app itself: many HTML links there don't work, including a link to this repo. They just open the same app web page in a new tab when clicked.