2

Currently, I'm trying to apply the things I've learned from this GIS.SE question to include an SVG marker of a looped arrow in my map. Here is the code for the SVG file in question:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="27.9mm" height="27.9mm" version="1.1" viewBox="0 0 27.9 27.9" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="#d40000" stroke-width="2.23">
<path d="m26.8 13.9a12.8 12.8 0 01-10.6 12.6 12.8 12.8 0 01-14.3-8.22 12.8 12.8 0 015.6-15.5 12.8 12.8 0 0116.2 2.81" stop-color="#000000"/>
<path d="m24.7.472-.434 5.65-5.58-.401" stop-color="#000000" style="font-variation-settings:normal"/>
</g>
</svg>

which has been provided to me by Billy Kerr. This is what it normally looks like (in a slightly different color scheme) :

enter image description here

Although I'm content with how the SVG looks, I'm having trouble getting the placement right in QGIS. When I load it as a marker, this is what I see:

enter image description here

As one can see in the top left corner of the image, only a part of the SVG file can be discerned properly. It seems to show the beginning and the end of the loop.

I've tried correcting the placement of the SVG by adjusting the rotation and offset parameters, but that does not help much. I always get to see only a part of the looped arrow.

How can I improve the placement of the SVG of the looped arrow, so as to make it visible as a whole?

Improve this question

1 Answer 1

Reset to default
6

Looks like the SVG is scaled for a larger view area size - 27.9mm x 27.9mm - which is larger than what QGIS will render (and it doesn't scale it automatically).

A quick fix is to open the SVG in Inkscape and scale it down, then resize the page size and save as an optimised SVG, giving for example:

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

You'll certainly get better help on graphicdesign.se for properly resizing.

Improve this answer

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.