Skip to content

tomayac/SVGcode

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
October 12, 2023 12:30
October 12, 2023 12:30
April 28, 2022 15:23
src
October 12, 2023 12:30
February 10, 2022 14:21
February 24, 2022 13:15
April 9, 2021 11:20
April 25, 2022 18:18
April 10, 2021 19:08
April 10, 2021 19:12
November 24, 2021 11:59
November 24, 2021 11:18
October 13, 2023 19:02
October 12, 2023 12:30

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 ChromeOS) and the Microsoft Store on Windows.

Developing and/or contributing

  1. Fork this repository.
  2. Clone from your fork: git clone git@github.com:<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

Alternatives

Projects listed here must be Web-based, free to use with the option to save the SVG, open source, and not require the user to log in:

License

GNU General Public License v2.0

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