Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add an option to display a reference image behind the SVG #376

Closed
KittyMcTophat opened this issue Jan 10, 2024 · 7 comments
Closed

Add an option to display a reference image behind the SVG #376

KittyMcTophat opened this issue Jan 10, 2024 · 7 comments
Labels

Comments

@KittyMcTophat
Copy link

Limitation
I want to recreate a png image in svg format, but I want to trace over the original to get it right. Currently, I can't do that since it's not a feature.

How It Will Help
By adding the option for displaying a reference image, it will become much easier to recreate images in svg format, because they can be traced.

Implementation Details
My proposal is to add an option to load a reference image, which would be rendered behind the svg image at 50% transparency or something like that, allowing a much easier way to recreate raster images in svg format.

It would also be helpful if there were a button or a hotkey to toggle the visibility of the reference image, since that'd make it easy to quickly tell which parts of the image aren't done yet at a glance.

@MewPurPur
Copy link
Owner

MewPurPur commented Jan 10, 2024

I approve of the idea! But still haven't quite fleshed out the implementation details. I think this should be behind a new button on the top, which could also include other handles like the background pattern and an opacity for the image.

I'm not sure how to handle aspect ratios.

@Kiisu-Master
Copy link
Contributor

Should also add option for plain color
I had this idea a while ago but never talked about it 🙃

@MewPurPur MewPurPur pinned this issue Feb 8, 2024
@MewPurPur
Copy link
Owner

MewPurPur commented Mar 29, 2024

Some ideas for implementation details would help me a lot to approach this.

@vthilag
Copy link

vthilag commented Apr 20, 2024

Some ideas for implementation details would help me a lot to approach this.

Funnily enough, I wanted to vectorize a rasterized logo in godsvg and found this.
My idea would be a menu near the settings icon on top of the visual editor which has a sub menu called image reference that has the following options:

  1. Select Image
  2. Is Visible
  3. Overlay Image or Display behind
  4. Opacity
  5. Lock transform
  6. Edit: Maybe some transform inputs here as well and a toggle to lock aspect ratios when scaling.
    (Some of these can and probably should be separate items outside the menu for quick access)

When not locked you'd be able to click and transform the reference image and when it locks it'll no longer be selectable.

That's how I'd probably use it but they're definitely better ways.
Also edit: With how clunky this could be as a menu item, maybe it can be a floating window in the visual editor thats there as long as the reference image button is toggled on

@MewPurPur
Copy link
Owner

Thanks! This will help me (or others) get started.

@Qainguin
Copy link
Contributor

This should be implemented now by #728.

@MewPurPur
Copy link
Owner

Yeah. More advanced requirements can be discussed separately and implemented when the need for them becomes a priority.

@MewPurPur MewPurPur unpinned this issue May 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants