Search code examples
htmlcsssvggimp

converting SVG HTML to SVG Paths issue


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!


Solution

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

    1. Open the file in Inkscape
    2. Path > Object to path (this converts the circles, and the questions mark)
    3. Save as new SVG (at that point this SVG could be satisfactory otherwise:
    4. Open SVG in Gimp as indicate in link, importing/merging the path
    5. 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>