Adjusting a looped arrow SVG file to match the style with other arrows

Question

I'm using an SVG file to depict intra-regional migration flows of people in the Netherlands. Here's what I made so far:

The looped arrow is the only SVG image here, the other arrows are rendered by other means. As one can see, the looped arrow does not have a black outline (unlike the other arrows). I'd like to make the outline style and color of the arrows uniform.

To that end, I tried adjusting the code of the SVG file, which has been provided to me by Billy Ker (here) and Simbamangu (here). This is the latter's code, which resizes the former's in such a way that it is viewable in QGIS:

<svg width=".1mm" height=".1mm" version="1.1" viewBox="0 0 2.1694 2.1665" xmlns="http://www.w3.org/2000/svg">
     <g transform="matrix(.1 0 0 .1 .013859 .018301)" fill="none" image-rendering="auto" stroke="#d40000" stroke-width="2.5862">
      <path d="m26.8 13.9a12.8 12.8 0 0 1-10.6 12.6 12.8 12.8 0 0 1-14.3-8.22 12.8 12.8 0 0 1 5.6-15.5 12.8 12.8 0 0 1 16.2 2.81" stop-color="#000000"/>
      <path d="m24.7 0.472-0.434 5.65-5.58-0.401" stop-color="#000000" style="font-variation-settings:normal"/>
     </g>
    </svg>

This renders a static image of a loop. In order to make it dynamic, I used information from this GIS.SE question to make its colors and outlines modifiable in QGIS. Here's the adjusted code:

<svg width=".1mm" height=".1mm" version="1.1" viewBox="0 0 3.1694 3.1665" xmlns="http://www.w3.org/2000/svg">
 <g transform="matrix(.1 0 0 .1 .013859 .018301)" fill="none" image-rendering="auto" stroke="#d40000" stroke-width="3.0862">
  <path d="m26.8 13.9a12.8 12.8 0 0 1-10.6 12.6 12.8 12.8 0 0 1-14.3-8.22 12.8 12.8 0 0 1 5.6-15.5 12.8 12.8 0 0 1 16.2 2.81" stop-color="#000000" stroke-width="param(outline-width) 50" stroke="param(outline) #000" fill="param(fill) #FFF"/>
  <path d="m24.7 0.472-0.434 5.65-5.58-0.401" stop-color="#000000" fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"/>
 </g>
</svg>

However, this code creates the follow loop:

So then I removed the

fill="param(fill) #FFF"

parts of both paths, to obtain:

Unfortunately, I now can't change the color of the arrows anymore. So instead, I changed the code to:

<svg width=".1mm" height=".1mm" version="1.1" viewBox="0 0 3.1694 3.1665" xmlns="http://www.w3.org/2000/svg">
 <g transform="matrix(.1 0 0 .1 .013859 .018301)" fill="none" image-rendering="auto" stroke="#d40000" stroke-width="3.0862">
  <path d="m26.8 13.9a12.8 12.8 0 0 1-10.6 12.6 12.8 12.8 0 0 1-14.3-8.22 12.8 12.8 0 0 1 5.6-15.5 12.8 12.8 0 0 1 16.2 2.81"  stroke="param(outline) #000" stroke-width="param(outline-width) 40"/>
  <path d="m24.7 0.472-0.434 5.65-5.58-0.401" fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="1"/>
 </g>
</svg>

This is somewhat better. However, it's still not quite what I'm after, because when I now change the stroke color to black, this is what it looks like:

I can adjust the stroke width, but then I get a very thin arrow, instead of a thin outline of the arrow.

What I would like is to have code for the looped arrow that make it look similar to the other (non-looped) arrows in the image. So preferably, the loop would have:

• A thin black outline of the whole arrow;
• A modifiable arrow width that is proportionate with the size of the arrow head;
• The arrow starting off slightly less wide, and getting a bit wider towards the end, like the other arrows

Question do you know how I could change the code of the SVG file of the looped arrow in such a way that it satisfies the properties listed above? (The first two properties are the most important, the third one is perhaps somewhat more difficult and slightly less essential, but it would be nice to have.)

Answer 1

In Inkscape, you can select both paths, and do Path > Stroke to path.

This will convert the strokes to outlines, with a fill.

Next, do Path > Union. This is a boolean operation which will merge the two paths to one solid shape - i.e. a single closed path with a fill.

Now you can apply a coloured fill, and a thin black stroke to get the effect you want.

Here's an example of the cleaned up SVG

<?xml version="1.0" encoding="UTF-8"?>
<svg width="28.1mm" height="28mm" version="1.1" viewBox="0 0 28.1 28" xmlns="http://www.w3.org/2000/svg">
<g fill="#ff7f2a" stroke="#000" stroke-width=".159">
<path d="m13.9.08c-.747.00716-1.5.0746-2.24.203-1.58.274-3.14.828-4.6 1.67v-.00207c-5.85 3.39-8.42 10.5-6.09 16.9 2.31 6.35 8.88 10.1 15.5 8.93 6.65-1.16 11.5-6.95 11.5-13.7l-2.23-.0021c-.0041 5.68-4.08 10.5-9.68 11.5h-.0062c-5.61 1.01-11.1-2.15-13.1-7.5v-.0042c-1.97-5.34.187-11.3 5.11-14.2 4.27-2.48 9.53-1.98 13.2 1.05l-2.54-.181-.16 2.22 6.69.48.519-6.76-2.22-.17-.248 3.22c-2.65-2.43-6.09-3.7-9.56-3.67z" />
</g>
</svg>