converting SVG HTML to SVG Paths issue

Question

I have a question mark svg that looks like this:

<svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29">
  <g id="Groupe_114" data-name="Groupe 114" transform="translate(-1503 -141)">
    <g id="Ellipse_35" data-name="Ellipse 35" transform="translate(1503 141)" fill="none" stroke="#D8D8D8" stroke-width="1">
      <circle cx="14.5" cy="14.5" r="14.5" stroke="none"/>
      <circle cx="14.5" cy="14.5" r="14" fill="none"/>
    </g>
    <text id="_" data-name="?" transform="translate(1512 163)" fill="#D8D8D8" font-size="20" font-family="Montserrat-Regular, Montserrat"><tspan x="0" y="0">?</tspan></text>
  </g>
</svg>

It is effectively an SVG of an info question mark inside a circle. What I needed to do was to convert it to SVG paths inside so I could bundle it directly inside my code. I followed the instructions over here using GIMP, but final path that I get is just of the outside circle, not of the inside question mark. This is what I get:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     width="0.322222in" height="0.322222in"
     viewBox="0 0 29 29">
  <path id="Imported Path"
        fill="none" stroke="black" stroke-width="1"
        d="M 28.50,14.50
           C 28.50,22.23 22.23,28.50 14.50,28.50
             6.77,28.50 0.50,22.23 0.50,14.50
             0.50,6.77 6.77,0.50 14.50,0.50
             22.23,0.50 28.50,6.77 28.50,14.50 Z
           M 29.00,14.50
           C 29.00,22.51 22.51,29.00 14.50,29.00
             6.49,29.00 0.00,22.51 0.00,14.50
             0.00,6.49 6.49,0.00 14.50,0.00
             22.51,0.00 29.00,6.49 29.00,14.50 Z" />
</svg>

I have used GIMP before for converting another SVG symbol, and it worked okay with that, so I am not sure why is GIMP returning the path of just the outside circle. Could anyone let me know how to best convert to paths so that I can get the path of the outer circle as well as the question mark inside? Thank you!

the code for the angular web-component I am working on needs to be compiled into a single bundle of javascript files, and it may not work if I add the svg as a file inside my assets folder, more neat to have a path embedding — QPTR, Mar 11 '22 at 07:36
It should. You may also try `svg{overflow:visible}` in css. And as an observation: Your path is drawing the circle twice with different radius. But this is not visible at stroke-width="1" — enxaneta, Mar 11 '22 at 07:48
Its still not visible :( I think it may be because the text field in the original svg is not being converted to a path? oh yeah I noticed that too!! I deleted the first circle and retained the second — QPTR, Mar 11 '22 at 08:03

score 2 · Accepted Answer · answered Mar 11 '22 at 08:54

In the SVG the question mark isn't a path, it is reference to the font so it could be in Gimp's blind spot.

This slightly more complex process seems to work:

Open the file in Inkscape
Path > Object to path (this converts the circles, and the questions mark)
Save as new SVG (at that point this SVG could be satisfactory otherwise:
Open SVG in Gimp as indicate in link, importing/merging the path
Export the path to SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     width="0.322222in" height="0.322222in"
     viewBox="0 0 29 29">
  <path id="Imported Path"
        fill="none" stroke="black" stroke-width="1"
        d="M 11.80,17.98
           C 11.80,17.98 11.80,17.44 11.80,17.44
             11.80,16.93 11.85,16.50 11.94,16.14
             12.05,15.77 12.22,15.41 12.46,15.08
             12.71,14.75 13.05,14.40 13.48,14.04
             14.00,13.60 14.40,13.23 14.68,12.94
             14.97,12.65 15.18,12.36 15.30,12.08
             15.42,11.80 15.48,11.46 15.48,11.06
             15.48,10.42 15.27,9.93 14.86,9.58
             14.45,9.23 13.85,9.06 13.06,9.06
             12.41,9.06 11.83,9.15 11.32,9.32
             10.81,9.48 10.33,9.67 9.86,9.90
             9.86,9.90 9.24,8.50 9.24,8.50
             9.77,8.22 10.36,7.99 11.00,7.80
             11.65,7.61 12.38,7.52 13.18,7.52
             14.45,7.52 15.43,7.83 16.12,8.46
             16.81,9.09 17.16,9.94 17.16,11.02
             17.16,11.62 17.06,12.13 16.86,12.56
             16.67,12.97 16.40,13.36 16.04,13.72
             15.69,14.07 15.28,14.44 14.80,14.84
             14.36,15.21 14.02,15.54 13.78,15.82
             13.55,16.10 13.40,16.38 13.32,16.66
             13.24,16.93 13.20,17.25 13.20,17.64
             13.20,17.64 13.20,17.98 13.20,17.98
             13.20,17.98 11.80,17.98 11.80,17.98 Z
           M 12.74,20.92
           C 12.74,20.43 12.85,20.08 13.08,19.88
             13.32,19.68 13.62,19.58 13.98,19.58
             14.31,19.58 14.60,19.68 14.84,19.88
             15.08,20.08 15.20,20.43 15.20,20.92
             15.20,21.40 15.08,21.75 14.84,21.96
             14.60,22.17 14.31,22.28 13.98,22.28
             13.62,22.28 13.32,22.17 13.08,21.96
             12.85,21.75 12.74,21.40 12.74,20.92
             12.74,20.92 12.74,20.92 12.74,20.92 Z
           M 28.50,14.50
           C 28.50,22.23 22.23,28.50 14.50,28.50
             6.77,28.50 0.50,22.23 0.50,14.50
             0.50,6.77 6.77,0.50 14.50,0.50
             22.23,0.50 28.50,6.77 28.50,14.50
             28.50,14.50 28.50,14.50 28.50,14.50 Z
           M 29.00,14.50
           C 29.00,22.51 22.51,29.00 14.50,29.00
             6.49,29.00 0.00,22.51 0.00,14.50
             0.00,6.49 6.49,0.00 14.50,0.00
             22.51,0.00 29.00,6.49 29.00,14.50
             29.00,14.50 29.00,14.50 29.00,14.50 Z" />
</svg>

Thank you so much for this! This is absolutely the correct answer, and it should work but for some reason when I create separate paths for each of the M and C elements it doesn't work. Like I separate it into one path for the outer circle, and one path for the inner question mark. I'll accept this as an answer tho, because it works when I open the file separately. — QPTR, Mar 14 '22 at 07:53
Do you know if there is any way to figure out which of the paths represent the dot of the question mark, that is the part that is missing for me. — QPTR, Mar 14 '22 at 08:19
Look at the point coordinates. As far as I can tell, each line above is a [triplet](https://www.gimp-forum.net/Thread-Paths-Basics) with the anchor in the middle. So you just search for the C with anchor coordinates close to (21,14). You can also count the anchors in a path editor and look for the C with an adequate count, but here the dot has two overlapping anchors(\*) so you could miss one. (\*) which could explain things. — xenoid, Mar 14 '22 at 09:12

converting SVG HTML to SVG Paths issue

1 Answers1