Search code examples
pdfsvgbezierexport-to-pdf

SVG Bézier's curve always closes path in browser and PDF

I am drawing music slurs with Bézier's curves in SVG, in order to visualize them in the browser and allow a pdf export. It works fine. But if you zoom in you can see that there is a line connecting the two vertices: I need to get rid of that line. In Inkscape, the line is not there, but it does appear in all browsers (especially Chrome), even if it's practically invisible. My problem is that when you print it as a PFD (I just click ctrl+P and save the file) that line becomes much thicker, and the music sheet cannot be published like that!

Here is my path:

<svg height="150px" width="100%"><path d="M 28 39 q 15 29 40 -13 M 28 39 q 15 25 40 -13" stroke="black" stroke-width="0.5" fill="black" fill-rule="evenodd"></path></svg>

Could you please suggest any way to fix this?

curve in Chrome curve in pdf export

Solution

  • The problem is with the way you have created your shape.

    It consists of two individual shapes that you merged together into one path. See the example below where I have given the two subpaths different colours.

    <svg width="400px" viewBox="0 0 70 60">
  <path d="M 28 39 q 15 29 40 -13" fill="red" opacity="0.5"/>
  <path d="M 28 39 q 15 25 40 -13" fill="green" opacity="0.5"/>
</svg>

    Notice the top of the shape where the two sub-paths (red and green) share an edge? There is effectively an incredibly thin rectangle along that edge, formed by the edges of the two sub-paths. When the path is rendered to the screen, slight differences in the way the two shapes are drawn, can sometimes cause some pixels to be visible along that edge. That can give the appearence of a light grey line there.

    This is also why you needed to add fill-rule="evenodd"to your path. It is so that one sub-path makes a hole in the other. Otherwise they would both be drawn solid.

    <svg width="400px" viewBox="0 0 70 60">
  <path d="M 28 39 q 15 29 40 -13 M 28 39 q 15 25 40 -13" fill="black"/>
</svg>

    The fix is to make sure your shape is one path only. Not two sub-paths. The path should go around the boundary of your shape. From one side to the other and then back along the other side.

    <svg width="400px" viewBox="0 0 70 60">
  <path d="M 28 39 q 15 29 40 -13 q -25 38 -40 13 Z" fill="black"/>
</svg>

    So the fixed version of your original SVG would be as follows:

    <svg height="150px" width="100%"><path d="M 28 39 q 15 29 40 -13 q -25 38 -40 13 Z" stroke="black" stroke-width="0.5" fill="black" fill-rule="evenodd"></path></svg>