Skip to content

[TEST] Image to SVG tool #43

Description

@jbaddley

Route

/image-to-svg

Scenarios to test

Upload

  • Dropzone visible on load
  • Uploading a PNG loads the image
  • Uploading a JPEG loads the image
  • The left panel shows the original image and the right panel shows the SVG output

Tracing output

  • An SVG element appears in the right panel after upload
  • The SVG visually resembles the input image
  • The palette swatches are extracted and displayed

Quality / color presets

  • Quality or color count presets are visible (e.g. 8, 16, 32, 64 colors)
  • Selecting a higher color count produces a more detailed SVG
  • Selecting a lower color count produces a simpler SVG with fewer paths
  • Switching presets updates the SVG output without crashing

Simplification

  • A simplification slider or preset is present
  • Increasing simplification reduces the number of SVG path nodes/complexity

Flip transforms

  • "Flip horizontal" button mirrors the SVG horizontally
  • "Flip vertical" button mirrors the SVG vertically

Crop within SVG tool

  • A crop tool is accessible from the action bar
  • Selecting the crop tool shows a crop overlay on the canvas
  • Applying the crop updates the SVG output to the cropped region
  • Cropping the full image (no real crop) shows an informational message rather than silently failing

Color picker (eyedropper)

  • Selecting a palette color with the eyedropper tool changes the selected color
  • Changing a palette color updates the SVG paths of that color

Download

  • "Download SVG" downloads a .svg file
  • "Download PNG" downloads a .png file
  • The downloaded PNG reflects the current SVG state (including any filters or crops applied)

Acceptance criteria

  • SVG output renders after upload
  • All preset changes re-render the SVG
  • Both SVG and PNG downloads succeed

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions