Git Product home page Git Product logo

svgcode's Introduction

SVGcode: A PWA to Convert Raster Images to SVG Vector Graphics

SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format. It uses the File System Access API, the Async Clipboard API, the File Handling API, and Window Controls Overlay customization. The app is available at SVGco.de. See what I did there? For more background, read the accompanying article or watch the video.

SVGcode application screenshot

Access from the Web or install from a store

Apart from using the Web app at svgco.de, you can also install SVGcode from the Play Store on Android (or Chrome OS) and the Microsoft Store on Windows.

Developing and/or contributing

  1. Fork this repository.
  2. Clone from your fork: git clone [email protected]:<your-github-account>/SVGcode.git
  3. Navigate into the application's directory: cd SVGcode
  4. Install the dependencies: npm i
  5. Start the application: npm start
  6. Open the application in your browser: http://localhost:3000
  7. Check out the available Issues or create a new Issue describing your plans.
  8. Start hacking. Vite automatically reloads the app upon changes.
  9. Lint your modifications: npm run lint
  10. Make sure your changes respect the code style: npm run fix
  11. Open a Pull Request that fixes the Issue (see 7. above).
  12. Have fun, and thanks for your interest in SVGcode!

Contributing translations

If SVGcode is not available in your language, consider contributing a translation. Therefore, make a copy of one of the files in src/i18n/ (most users will probably be most familiar with en-US.js) and translate the strings. Name the new file according to Tags for Identifying Languages ($language-$REGION like en-US). Then add the language code to the SUPPORTED_LANGUAGES array in src/js/i18n.js and the locale to SUPPORTED_LOCALES array in the same file. Danke!

Acknowledgements

With SVGcode, I just stand on the shoulders of a command line tool called Potrace by Peter Selinger that I have converted to Web Assembly, so it can be used in a Web app. The converted SVGs are automatically optimized via the amazing svgo library.

Bragging zone

SVGcode - A PWA to convert raster images to SVG vector graphics | Product Hunt

License

GNU General Public License v2.0

(This is due to Potrace choosing GNU General Public License v2.0.)

svgcode's People

Contributors

tomayac avatar georapbox avatar danjenkins avatar arufian avatar nhoizey avatar kurtextrem avatar liwuxi avatar acsy avatar lukaszscislowski avatar sifferhans avatar ronderksen avatar captainbrosset avatar mefody avatar maxart2501 avatar kenchris avatar hwii77 avatar andreban avatar shadeed avatar 0xflotus avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.