1

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

enter image description here

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:

enter image description here

So then I removed the

fill="param(fill) #FFF"

parts of both paths, to obtain:

enter image description here

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:

enter image description here

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.)

5
  • Can you not merely draw the arrow you want in Inkscape and save it as SVG? Why must you edit an existing SVG? And more over.. why must you edit the XML of the SVG?
    – Scott
    Nov 17 '20 at 12:45
  • @Scott I could try, but I have never used Inkscape or a comparable program. I'm afraid it would take me a long time.
    – Max Muller
    Nov 17 '20 at 12:47
  • Might take you longer to try and suss out the edits in XML.
    – Scott
    Nov 17 '20 at 12:47
  • @Scott Maybe. I just hope this is a relatively easy task - either by changing the XML or drawing the arrow - for someone over here with a lot of experience and knowledge of SVG files and/or Inkscape. I will also give credits to the people who gave answers to this question and related ones in the article I intend to write about it. My background in graphic design is very limited. It's probably a good idea for me to learn more about it for future projects, but for now I hope someone could help me out.
    – Max Muller
    Nov 17 '20 at 13:00
  • @Scott Also: my version of Inkscape keeps breaking down on my (Mac) computer. And XML code snippets like * fill="param(fill) #FFF" * allow the image to be modifiable in QGIS.
    – Max Muller
    Nov 17 '20 at 13:10
2

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

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

enter image description here

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.

enter image description here

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

enter image description here

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>
9
  • Thank you yet again!
    – Max Muller
    Nov 17 '20 at 15:51
  • Is there -- in this case -- also an XML-parameter that can control for the thickness of the arrow and the arrow head?
    – Max Muller
    Nov 17 '20 at 17:07
  • No, not after you have outlined the arrow. It's no longer a stroke, but a path with an outside stroke, and a fill inside.
    – Billy Kerr
    Nov 17 '20 at 17:26
  • This edit is destructive, so if you need to do it, make a copy of the original should you ever need a thicker arrow.
    – Billy Kerr
    Nov 17 '20 at 17:32
  • @MaxMuller - sorry, forgot to add your name to these comments.
    – Billy Kerr
    Nov 17 '20 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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