2

I've downloaded an SVG image of a looped arrow from a website. It looks like this:

enter image description here

I'd like to adjust the code of this SVG so as to make the fill color, stroke color, and stroke width modifiable in QGIS. (QGIS is an open-source geographic information software system.) It is explained how this can be done in this GIS SE question.

Unfortunately, I am having trouble applying the methods in jgrocha's answer. He states one ought to replace the style attribute of the path element with the following code:

fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"

However, upon opening the SVG file in Inkscape, I cannot find the style attribute. Here's what the code looks like in the XML editor:

enter image description here

Although the path element is there, I don't see the the style attribute anywhere. I've also tried viewing the SVG code in a regular text editor. When I open it up, I obtain the following code:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" id="Layer_1" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><polygon points="43.1,13.3 31.3,12.4 31.6,8.5 39.6,9.2 40.2,1.2 44,1.5   "/>

Over here, I cannot even discern the path id anymore.

Questions

  1. How -- if at all -- can I change the code of the SVG file of the looped arrow in such a way that the stroke/fill color and stroke width is modifiable in QGIS?
  2. Should this be done in the XML editor of Inkscape, or can it also be done in a “regular” text editor?
  3. Why can I not see the path id of this SVG file in the regular text editor?
Improve this question
5
  • This may be better answered over at GIS.SE.. not sure why you posted this here. However, yes a plain text editor should show all the XML code. I can't elucidate on Inkscape... never use it.
    – Scott
    Nov 14, 2020 at 17:05
  • 1
    @Scott I posted here because I thought people on this SE are generally more knowledgeable about Inkscape and SVG files than those at GIS.SE
    – Max Muller
    Nov 14, 2020 at 17:19
  • 1
    Fair enough ... 😀
    – Scott
    Nov 14, 2020 at 18:38
  • The XML-code looks sloppy, There are two g-tags (groups), which aren't closed and even the svg-tag isn't closed properly. If you don't refer to the path elsewhere, you don't need an ID. I guess Inkscape uses the default color (black) if no color is specified, similar for the other, missing informations. However, if I save your code snippet, inkscape only displays the pin of the arrow, not the round part, and I can't see in your code, where the round part should be specified. Using the fill params has no effect (I changed the color to AAA to check, if there is an effect. Changing it to just …
    – user unknown
    Nov 15, 2020 at 13:33
  • … fill="#AAA" stroke="#333" stroke-width="3" before the closing XML tag of polygon (values AAA, 333 and 3 just to check for an effect) works like a charm. However, the round part of the arrow is, of course, still missing.
    – user unknown
    Nov 15, 2020 at 13:36

1 Answer 1

Reset to default
1

I think part of the problem here is that the SVG wasn't generated in Inkscape. Messing around with other people's or other applications' SVGs in Inkscape can get really messy sometimes.

Personally, I'd just recreate it in Inkscape since it's a very simple design. It would certainly be easier than trying to edit it. Then save using the Optimised SVG option in the file type dropdown. You can use that option to remove most of the XML that isn't actually required.

So, you'll end up with something like this below, which can then easily be edited in a plain text editor

<?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>
Improve this answer
4
  • 1
    Thank you! I will try to edit this SVG file to fit the purpose I have in mind for QGIS
    – Max Muller
    Nov 14, 2020 at 17:43
  • @MaxMuller Also note you can remove the stop-color and style attributes, since these aren't required. I don't know why Inkscape adds them.
    – Billy Kerr
    Nov 14, 2020 at 19:42
  • I'm currently trying to incorporate the SVG file in QGIS. While I can load it as a marker, I'm having some trouble getting the placement right. This is what I see when I load it: imgur.com/iXVgITv . Do you have any ideas on how to fix that?
    – Max Muller
    Nov 15, 2020 at 15:33
  • @MaxMuller - sorry but I have zero experience in QGIS. Maybe time to find a QGIS forum?
    – Billy Kerr
    Nov 15, 2020 at 18:00

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.