tomayac / svgcode

Convert color bitmap images to color SVG vector images.

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.

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 [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

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:

• VTracer (source code)

License

GNU General Public License v2.0

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

svgcode's Issues

Change link in repo description?

https://svgco.de/dist/ should probably be https://svgco.de/ in the About description 😋

Panning and zooming needs improvement

Better on desktop, but still not feels 100% natural. It's worse on mobile.

Does the site store configured settings?

Hi,

I have been using the site for a little bit and it has been extremely useful. I have configured the settings specifically for the specific style of images I need to convert and this works perfectly however all values are reset upon closure of the site. I was wondering if something is going wrong here or if this is just not currently a feature?

Thanks.

DRY in language files

Currently all translations repeat the same list of countries. Outsource this to one file that all translations import.

Change speckles default?

Current default: 2px "suppress speckles" seems not to give a really good result?

2px:

20px:

Parallel potracing doesn't work with terminating Worker

Since switching to a lazily-instantiated Worker that gets aggressively terminated if new jobs happen, parallel potracing doesn't work anymore. See

SVGcode/src/js/colorworker.js

Line 85 in f6f00b1

const chunkSize = 1; // 2 * navigator.hardwareConcurrency || 16;

and change it back to anything > 1 and you'll notice that only the first promise

SVGcode/src/js/colorworker.js

Line 45 in f6f00b1

let svg = await potrace(newImageData, params);

of the chain fires.

Add maskable icon

https://web.dev/maskable-icon/

Provide text-only copy option

Ubuntu 20.04,

On "Copy SVG" click with default image (or any image):

• crashes in Chromium 88
• shows "ClipboardItem is not defined" in Firefox 94.0

Is copying broken?

Need to investigate. It stops at “optimizing SVG”.

Add window controls overlay

https://web.dev/window-controls-overlay/

Hamburger menu close button refinements

• It gets rendered outside of the menu on iOS.
• It should remain at a fixed position when scrolling.

Investigate better SVG code parsing

Maybe use https://github.com/WebReflection/linkedom for

SVGcode/src/js/colorworker.js

Lines 69 to 88 in 1def07e

	svg = svg.replace(
	'fill="#000000" stroke="none"',
	`fill="rgb(${r},${g},${b})" stroke="rgb(${r},${g},${b})"${
	a === '255'
	? ''
	: ` fill-opacity="${alpha}" stroke-opacity="${alpha}"`
	} stroke-width="${params.strokeWidth}px"`,
	);
	const pathRegEx = /<path\s*d="([^"]+)"\/>/g;
	let matches;
	const shortPaths = [];
	while ((matches = pathRegEx.exec(svg)) !== null) {
	const path = matches[1];
	if (path.split(' ').length < params.minPathSegments) {
	shortPaths.push(matches[0]);
	}
	}
	shortPaths.forEach((path) => {
	svg = svg.replace(path, '');
	});

.

For positioned elements, use `inset-inline-start/end` instead of `left/right`

Once #72 and #67 are merged.

Show progress

• Progress bar
• Show SVG color-by-color

I got the Arabic version when open it on Safari both iPhone and MacOS

Nice work @tomayac, happy to see the Bahasa Indonesia also included in this project. I tried opening the svgco.de with my iPhone and somehow I got the Arabic version by default. As your request, I open it on my Macbook Air with Safari and see an error log in the console like this:

It seems the en-CA locale is not supported on my side and fallback to Arabic.

I hope this helps.

Add badging support

https://web.dev/badging-api/

Handle too large images

Right now it just fails:

colorworker.893f8723.js:1 Uncaught (in promise) RangeError: offset is out of bounds
    at Int8Array.set (<anonymous>)
    at colorworker.893f8723.js:1:3204
    at array (colorworker.893f8723.js:1:3213)
    at JA (colorworker.893f8723.js:1:3311)
    at E (colorworker.893f8723.js:1:71498)
    at eA (colorworker.893f8723.js:1:71745)
    at async colorworker.893f8723.js:1:72579

Ideally we catch this and retry with a reduced image size.

Add file handling support

https://web.dev/file-handling/

Add web share support

https://web.dev/web-share/

Console error and loader keeps spinning

Hi,

When I upload a PNG file, the loader keeps spinning and I see the following error in the console :
Uncaught ReferenceError: CanvasFilter is not defined at getFilter...
Tested in Chrome latest on OSX.

Add to home screen on mobile triggers widget addition

Chrome 96.0.4664.45 on Android 12, Pixel 5. Add to home screen triggers home screen widget addition as opposed to install. Appears to work fine on ChromeOS desktop though.

Link to this GitHub repo from the website/app

It doesn't seem that the app links back to this repo.

Users many might want to report or contribute, it would be better to link back to this repo

Add responsive layout

Add tabbed application mode

https://web.dev/tabbed-application-mode/

Componentize the UI

All the sliders and toggles should be components really.

Submit this to AppScope and other PWA stores

Parallelize color extraction

https://github.com/tomayac/SVGcode/blob/main/src/js/colorworker.js

changing the settings doesn't maintain canvas position

Steps:

1. zoom a lot
2. change suppress speckles
3. after the image resolves, you're scrolled away

RGBA alpha incorrectly passed as 255 instead of 1

I thought, "let's test this out on a simple image I find on google"

But, not matter what I do in the settings, I get this... or worse..

Anyone got an idea of what either "I am doing wrong" or "the app is doing wrong"..

or is my idea of what a "simple image" is wrong?

multiply viewBox by 10 to get rid of decimal notation

Not sure if this is a SVGMO option.

If this viewBox="0 0 160 160" is multiplied by 10, all path notations will be a lot shorter

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<path d="M27.2 145.7c4.8.2 12.9.2 18 0 5.1-.1 1.2-.3-8.7-.3-9.9 0-14.1.2-9.3.3zm86.5 0
c5.1.2 13.5.2 18.6 0 5-.1.9-.3-9.3-.3-10.2 0-14.3.2-9.3.3z" fill-opacity=".09"/>
<g stroke-width="0"><path d="M75 13.7c-6.2 3.2-7.8 10-3.5 15.2l2.6 3-3.3 2.5
c-1.8 1.4-6.1 4.6-9.5 7.1C47.3 51.8 40 63 40 74c0 7.3 2.2 12.3 9 20.9 5.7 6.9 5.9 8.5 2.9 
16.7-2.6 6.8-2.1 7.4 6.4 7.4 6.2 0 6.8.7 3.6 3.6-1.8 1.6-4.2 2-18.3 2.4-9.1.3-17 1.1-18.1 1.7-5.4 3-10.6 12-9.2 15.7.6 1.5 2.8 1.7 22.9 1.4 21.4-.3 22.5-.4 27.1-2.8 4.5-2.2 9.3-6.8 12.5-11.6 1.2-1.9 1.2-1.
9 2.5.1 3 4.9 10.6 11.3 15.2 12.9 7.2 2.4 46.3 2.4 47.2 0

Feature-detect SVG copy feature

puts this into my clipboard:

"Notes
Responsive SVG/container query
asset delivery strategy
color sync
Parallax (scroll timeline)
Animation
hosting
subdomain
web.dev
post explainer
link out on homepage
social share
meta
branding / images
tweets from Chromium accounts
instagram cross postss
cron job
runs daily to build site and reveal new item

Questions
Scroll focused or flashlike?
Types of content behind advent days?
Mobile or desktop first?

Action items
UI Architecture
accessible
print
Github Repo
Advent item component
visible or not
interacted with or not
Responsive advent grid
image pipeline
Stateful for users?
RSS / Push Notifications
Early and often audits from perf pros
Analytics
will effect ariane
"

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'resetAll')

I tested Edge Stable & Chrome Dev, and I can't get the website to work. It looks like this:

localStorage language entry is: "{"language":"de","locale":null}"

The error is triggered here:

SVGcode/src/js/i18n.js

Line 72 in f6f00b1

return this.translations[key];

right after this is called:

SVGcode/src/js/i18n.js

Lines 55 to 62 in f6f00b1

	async getTranslations() {
	const { language, locale } = this.currentLanguageAndLocale;
	this.translations = (
	await import(`../i18n/${language}${locale ? `-${locale}` : ''}.js`).catch(
	() => import(`../i18n/${this.defaultLocale}.js`),
	)
	).default;
	}

I'm not sure what the issue is, because if I call the loader fn manually (with '../i18n/de.js') my promise resolves correctly to a Module. But since de.js is empty... reading .default on it doesn't work?

Buttons in top menu partially hidden when menu height is becoming small.

Description

The height of the top menu element changes depending on the viewport dimensions and aspect ratio. This results in the buttons located in the menu to be partially hidden (see attached screenshot).

Steps to reproduce

One way to reproduce, is to resize the viewport vertically while leaving the viewport's width in full screen. Another case that this is easily reproducible, is when viewing in ultra wide screens.

Add tooltips

https://www.floating-ui.com/docs/tutorial

Add description and screenshots etc. to Manifest

Provide a way to easily close options panel

Description

In mobile views, when the options panel is open and options are expanded, it's a bit difficult for the user to close the panel. The panel can be closed if the user clicks outside, but It in order to achieve this they need to collapse one or more options, so that the panel's height becomes smaller and the clickable area increases.

Please see attached screenshot. Red rectangles represent the clickable areas.

Make “about”, “license” etc. footer translatable

Add social network preview image

Look great when being shared :-)

Pinch-zooming causes drift

Introduced in the fix for #16. It's still better than what we had before.

Add declarative link handling support

https://web.dev/declarative-link-handling/

Add web share target support

https://web.dev/web-share-target/

Add files on clipboard support

async function onPaste(e) {
  let file = e.clipboardData.files[0];
  let contents = await file.text();  
}

Need to properly deal with plural rules in `i18n.t()`

Looks like Intl.PluralRules() might help, or migrating to a proper I18N framework. I didn't find a lightweight one, but maybe by the pure nature they need to be heavy?

If an image is uploaded while a previous one is processing, and the 2nd image is fast, the 1st one will finish and stomp the 2nd upload

Use file name of opened file for suggested download name

(Via https://twitter.com/mischmerz/status/1465352091069665283)

Add keyboard shortcut support

Save: cmd+s

Copy: cmd+c
Paste: cmd+v
Cut: cmd+x

Undo: cmd+z
Redo: cmd+shift+z

Install button doesn't disappear after install

I installed the PWA on windows, but even after Install. I still see an "install" button in the top bar. I'd expect it to disappear once I have installed

Side menu width is fixed; content is hidden if exceeds this width

Description

The side menu has a fixed width. While this seems to work fine with content in English, in other languages where words might be longer, it can become problematic as the content is hidden (see attached screenshot). This is something I noticed while adding a translation in Greek (see related PR).

.

Steps to reproduce

An easy way to reproduce, would be to open Developer Tools and add some extra text content to one of the options located inside the side menu. The portion of the text content that does not fit is hidden.

Install button text and icon wrap

(via @kenchris)

Rotate image

Would be awesome to have this feature