0

I have a weird problem where SVG circles don't show up anywhere from image viewer to firefox or chrome!

Here are the things I did:

  1. I have drawn a simple check mark with a circle: enter image description here

I also drew another one: enter image description here

  1. Now I am trying to put that in my webpage! But if I open my file manager, I see this:

enter image description here

On viewnior image viewer: enter image description here

And same thing on firefox:

enter image description here

What could be wrong with my art?

Edit: Code for the stroked check svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="147.41847mm"
   height="148.39937mm"
   viewBox="0 0 147.41847 148.39937"
   version="1.1"
   id="svg1915"
   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"
   sodipodi:docname="check.svg">
  <defs
     id="defs1909" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.49497475"
     inkscape:cx="277.80728"
     inkscape:cy="347.97113"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:document-rotation="0"
     showgrid="false" />
  <metadata
     id="metadata1912">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-54.802666,-51.28841)">
    <g
       id="g1894"
       transform="matrix(0.3527778,0,0,0.3527778,38.200788,35.176978)">
      <path
         style="fill:#00aa00;fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 369.16406,174.76913 c 7.8125,7.8125 7.8125,20.47656 0,28.28516 L 234.99219,337.23006 c -7.8125,7.80859 -20.47485,7.81078 -28.28516,0 l -63.87109,-63.87499 c -7.8125,-7.8086 -7.8125,-20.47266 0,-28.28125 7.80859,-7.8125 20.47265,-7.8125 28.28125,0 l 49.73047,49.73046 120.03125,-120.03515 c 7.8125,-7.80859 20.47656,-7.80859 28.28515,0 z"
         id="path7-6" />
      <circle
         style="fill:none;fill-rule:evenodd;stroke:#00aa00;stroke-width:37.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         id="path1867"
         sodipodi:type="arc"
         sodipodi:cx="256"
         sodipodi:cy="256"
         sodipodi:rx="190.25674"
         sodipodi:ry="191.69719"
         sodipodi:start="5.3377585"
         sodipodi:end="5.3377573"
         sodipodi:open="true"
         sodipodi:arc-type="arc"
         d="M 367.37571,100.58211 A 190.25674,191.69719 0 0 1 410.25009,368.21889 190.25674,191.69719 0 0 1 144.62438,411.41796 190.25674,191.69719 0 0 1 101.74984,143.7812 190.25674,191.69719 0 0 1 367.37552,100.58197" />
    </g>
  </g>
</svg>

Code for the filled svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="147.41847mm"
   height="148.39937mm"
   viewBox="0 0 147.41847 148.39937"
   version="1.1"
   id="svg1915"
   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"
   sodipodi:docname="check-filled.svg">
  <defs
     id="defs1909" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="331.79701"
     inkscape:cy="381.40473"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:document-rotation="0"
     showgrid="false" />
  <metadata
     id="metadata1912">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-54.802666,-51.28841)">
    <g
       id="g1894"
       transform="matrix(0.3527778,0,0,0.3527778,38.200788,35.176978)">
      <circle
         style="fill:#00aa00;fill-rule:evenodd;stroke:#00aa00;stroke-width:37.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;fill-opacity:1"
         id="path1867"
         sodipodi:type="arc"
         sodipodi:cx="256"
         sodipodi:cy="256"
         sodipodi:rx="190.25674"
         sodipodi:ry="191.69719"
         sodipodi:start="5.3377585"
         sodipodi:end="5.3377573"
         sodipodi:open="true"
         sodipodi:arc-type="arc"
         d="M 367.37571,100.58211 A 190.25674,191.69719 0 0 1 410.25009,368.21889 190.25674,191.69719 0 0 1 144.62438,411.41796 190.25674,191.69719 0 0 1 101.74984,143.7812 190.25674,191.69719 0 0 1 367.37552,100.58197" />
      <path
         style="fill:#ffffff;fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 369.16406,174.76913 c 7.8125,7.8125 7.8125,20.47656 0,28.28516 L 234.99219,337.23006 c -7.8125,7.80859 -20.47485,7.81078 -28.28516,0 l -63.87109,-63.87499 c -7.8125,-7.8086 -7.8125,-20.47266 0,-28.28125 7.80859,-7.8125 20.47265,-7.8125 28.28125,0 l 49.73047,49.73046 120.03125,-120.03515 c 7.8125,-7.80859 20.47656,-7.80859 28.28515,0 z"
         id="path7-6" />
    </g>
  </g>
</svg>

13
  • 2
    Mainly because of your namespace definition. I mean your svg has all sorts of nonvalid svg in it
    – joojaa
    May 23, 2021 at 10:17
  • 2
    Yeah you shouldnt just save the file you should export it without inkscape code. Simply the circle isnt valid svg
    – joojaa
    May 23, 2021 at 10:58
  • 2
    Or just use the plain svg option, i wouldnt convert circles to paths honestly. Just dont save inkscape svg.
    – joojaa
    May 23, 2021 at 11:05
  • 3
    When saving from Inkscape use the file type "Plain SVG", or "Optimized SVG". An Inkscape SVG contains Inkscape specific markup which isn't required, and could potentially cause problems.
    – Billy Kerr
    May 23, 2021 at 11:25
  • 1
    @S.Goswami: Could you please report this issue here gitlab.com/inkscape/inbox/-/issues? I am pretty sure this will get fixed.
    – s.ouchene
    May 23, 2021 at 21:59

1 Answer 1

1

The problem here is that, for some weird reason, the svg circle is wrong. I converted to path and I have obtained a two concentric circles conforming the circle. Just as if it was made out of two concentric circles using the exclusion option.

This svg code is correctly shown on Viewnior and Firefox:

<svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="147mm" height="149mm" viewBox="0 0 147 149">

<path style="fill:#00aa00;" d="M 74.1,0 C 33.1,0 0,33.4 0,74.8 0,116 33.1,149 74.1,149 114,149 147,116 147,74.8 147,33.4 114,0 74.1,0 Z m 0,13.2 C 107,13.2 134,40.5 134,74.8 134,108 107,136 74.1,136 40.1,136 13.2,108 13.2,74.8 13.2,40.5 40.1,13.2 74.1,13.2 Z M 113,45.8 c 3,2.8 3,7 0,10 L 66.1,103 c -3,3 -7,3 -10,0 L 33.8,80.8 c -2.8,-3 -2.8,-7 0,-10 2.8,-3 7,-3 9.9,0 l 17.4,17 42.9,-42 c 2,-2.8 7,-2.8 9,0 z"/>
</svg>

Hope this help.

7
  • I just edited the answer to provide an optimized unique path svg. Jun 23 at 0:21
  • 1
    I don't think this is the actual source of the problem. You don't have to convert SVG circles or ellipses to paths. I think the problem is that you are trying to use the Inkscape SVG, i.e. the one with the sodipodi in the XML. This can cause problems. Also there's no need for that thick stroke, just do a circle with a fill and no stroke. Save as Optimized SVG instead. You'll get something like this: svgshare.com/i/iXK.svg - the SVG circle renders perfectly fine in Firefox.
    – Billy Kerr
    Jun 23 at 9:41
  • @BillyKerr I just noticed this circle code, on the posted question, is completely wrong, then tried to find a solution. This is the wrong code: <circle style="fill:none;fill-rule:evenodd;stroke:#00aa00;stroke-width:37.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" d="M 367.37571,100.58211 A 190.25674,191.69719 0 0 1 410.25009,368.21889 190.25674,191.69719 0 0 1 144.62438,411.41796 190.25674,191.69719 0 0 1 101.74984,143.7812 190.25674,191.69719 0 0 1 367.37552,100.58197" /> Jun 23 at 12:21
  • You may leave or delete the sodopodi part as it is irrelevant for browser rendering. But need to change the tag circle for path as the properties provided in there are those for path and not for circle. That sintax is wrong. Jun 23 at 12:29
  • 1
    yes the code is wrong, it's a path. But Inkscape should generate a properly formed SVG circle. See the SVG I linked to. This was generated by Inkscape. I redrew the circle. I wonder if the code you have wasn't actually made in Inkscape?
    – Billy Kerr
    Jun 23 at 13:32

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.