1

what tools are available for myself to fix the green from bleeding outside of the black bucket? Preferably free tools. I just want to get rid of this green border surrounding the bucket icon.

enter image description here

I hired a cheap (yes I got what I paid for) free-lance designer to create this SVG based off my PNG. The green highlight is very noticeable on black backgrounds, what are some ways I can fix this myself? I downloaded inkspace, haven't played around with it yet. But I would like to hear some recommendations from the graphic design experts in this stack exchange.

The end-state of the file needs to be in SVG, as this is for a responsive website.

I could also edit the SVG file myself if that's possible?

please let me know some of your thoughts.

Improve this question
7
  • Did the person send you the SVG files or PNG back to you? You could edit the SVG in Inkscape. It's hard to say what you need to do without seeing the layers panel. Basically you want to delete the current green background shape and draw a new one so the green is inset from the black bucket edge.
    – AndrewH
    Feb 3, 2021 at 17:45
  • Yes I have all the files needed. That's good to know, so basically from what you're saying I can achieve to remove that green background completely?
    – yung peso
    Feb 3, 2021 at 18:31
  • 2
    Not sure how to help you without knowing where you're getting stuck. But yes you can remove the green background completely or change the color, etc.
    – AndrewH
    Feb 3, 2021 at 20:47
  • 2
    Without knowing how this is constructed, not much I can tell you really. Upload the SVG to SVGshare.com and I'll take a look.
    – Billy Kerr
    Feb 3, 2021 at 20:48
  • 1
    Thank you for the help, I have uploaded the image here: svgshare.com/s/TiK
    – yung peso
    Feb 3, 2021 at 21:13

1 Answer 1

Reset to default
3

The following steps are to edit the SVG in Inkscape.

  1. Select the "Draw Bezier Curve" tool (B).
  2. Left-click and draw points around the money opening area.

Draw path

  1. With the object completed, select the "Pick colors from image" tool (D) and select the original green shape.

  2. Open the "View and edit XML tree" panel on the left side.

  3. Move the newly created object to the top of the tree.

  4. In the same XML tree window, delete "<svg:path id=“path291”>"

You're getting the green hairline around the bucket because the green shape is the same size as the black bucket.

Improve this answer
3
  • Thank you so much Andrew for helping me solve this issue!
    – yung peso
    Feb 4, 2021 at 17:13
  • 2
    @Dre This SVG could be improved further if you were to clone the money graphic instead of having each as a separate duplicated graphic. Doing that you can get the file size down from about 40kb to only 14kb. See example here
    – Billy Kerr
    Feb 4, 2021 at 20:27
  • Thank you for letting me know, I will give this a shot myself! many thanks!
    – yung peso
    Feb 5, 2021 at 2:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.