Hello!

I'm new to the forum, but I'm also new to Inkscape and the topic of vector drawings as well. I've been having a problem when drawing overlapping paths. I'll list the steps I took for this problem to occur:

1. I create a path 1 which is filled with a color and has no stroke.
2. I duplicate this path 1 (CTRL + D) and change the fill color (let's call it path 2). This path 2 overlaps the previous one, which makes sense.
3. If I add a background (with a rectangle or a new path) below everything, path 1 generates a border over path 2. I'll share an image. I only notice this when I add the background; without it, it's not noticeable.

Screenshot of the problem example

I've tried many things to solve it, but nothing worked. I'll mention a few in case they might help:

• I changed the unit type to pixels or others, but it didn't solve it.
• I tried exporting it and opening it in the browser; the problem still occurs (I suppose it's not just an Inkscape rendering issue).
• I checked the XML of the exported file; both paths are identical.
• I tried copying and pasting instead of duplicating; the same thing happens.
• I tried using the alignment tool in case they weren't in the same position, but it didn't solve it.
• I also used the magnet tool to align them manually, but it didn't solve it either.
• I tried changing the document's width and height, but nothing worked.

I'm using Inkscape v1.3.2 over Windows 10... But at this point, I'm not sure if it's actually an issue with the SVG format.

If you're wondering why I want to put one path over another, it's actually because I want to duplicate them twice, move it a bit, use the difference option, and create a kind of "shadow" for the original path. I add a ScreenShot -> Real Problem

Thank you very much in advance!

(and sorry if some of the terms I use aren't exact, I'm still getting used to them :P)

I attatch the XML (svg) file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="1024"
   height="1024"
   viewBox="0 0 270.93333 270.93333"
   version="1.1"
   id="svg1"
   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
   sodipodi:docname="Test.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:document-units="mm"
     inkscape:zoom="1.4142136"
     inkscape:cx="298.39906"
     inkscape:cy="494.62119"
     inkscape:window-width="1920"
     inkscape:window-height="1017"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs1" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="display:inline;fill:#494949;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.365001;stroke-linecap:round;paint-order:stroke markers fill"
       id="rect2"
       width="153.72292"
       height="108.47916"
       x="14.907457"
       y="83.60833" />
    <path
       id="path1"
       style="fill:#56dc4a;fill-opacity:1;fill-rule:nonzero;stroke-width:0.365;stroke-linecap:round;stroke-dasharray:none;paint-order:stroke markers fill"
       d="m 127.00194,131.72533 c -0.35315,26.88207 -6.14138,37.66647 -38.758329,37.96373 -25.73165,0.23451 -38.75832,-16.99694 -38.75832,-37.96373 0,-20.96679 17.35269,-37.963732 38.75832,-37.963732 21.405639,0 39.033749,16.998752 38.758329,37.963732 z"
       sodipodi:nodetypes="sssss"
       inkscape:label="path1" />
    <path
       id="path2"
       style="fill:#333333;fill-opacity:1;fill-rule:nonzero;stroke-width:0.365;stroke-linecap:round;stroke-dasharray:none;paint-order:stroke markers fill"
       d="m 127.00194,131.72533 c -0.35315,26.88207 -6.14138,37.66647 -38.758329,37.96373 -25.73165,0.23451 -38.75832,-16.99694 -38.75832,-37.96373 0,-20.96679 17.35269,-37.963732 38.75832,-37.963732 21.405639,0 39.033749,16.998752 38.758329,37.963732 z"
       sodipodi:nodetypes="sssss" />
  </g>
</svg>

What you describe is an antialiasing problem afflicting vector applications far beyond Inkscape and svg. Rendering a vector shape to a pixellated display or printer can create jaggies where high contrasts occur. These are undesirable in most situations so antialiasing is used to apply a slight blur to these sharp edges. This sacrifices some image accuracy to improve the visual appearance.

In your case, Inkscape (or rather the cairo graphics library within) renders the green circle with a narrow halo of green pixels blended with the background colour beneath. It then overlays the grey circle, calculating another halo of grey pixels blended with the green blur beneath. This combined grey-green halo is what you see on your screen.

This is incurable, as far as I know, but there is a solution for exported png images, though I haven't tested it myself.

Thanks! It's true that when exporting to PNG, the problem still persists. I'll try that extension.

Even so, I would like to know if there is a solution for SVGs or how to work correctly so that this doesn't happen, because in some cases I would like to be able to export to this format.

I wanted to add shading on top of the base layer to a face.

This ghost outline occurs only when two edges coincide over a contrasting background. It shouldn't be a problem adding lights and shadows to your image. There are plenty of examples in the Community Gallery.