Inkscape drawn SVG circle isn't rendered on firefox or image viewers

Question

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:

I have drawn a simple check mark with a circle:

I also drew another one:

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

On viewnior image viewer:

And same thing on firefox:

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>

Mainly because of your namespace definition. I mean your svg has all sorts of nonvalid svg in it — joojaa, Commented May 23, 2021 at 10:17
Yeah you shouldnt just save the file you should export it without inkscape code. Simply the circle isnt valid svg — joojaa, Commented May 23, 2021 at 10:58
Or just use the plain svg option, i wouldnt convert circles to paths honestly. Just dont save inkscape svg. — joojaa, Commented May 23, 2021 at 11:05
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, Commented May 23, 2021 at 11:25
@S.Goswami: Could you please report this issue here gitlab.com/inkscape/inbox/-/issues? I am pretty sure this will get fixed. — s.ouchene, Commented May 23, 2021 at 21:59

SIMBIOSIS surl · Accepted Answer · 2022-06-23 00:20:33Z

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.

edited Jun 23, 2022 at 0:20

answered Jun 22, 2022 at 13:35

SIMBIOSIS surl

1365 bronze badges

I just edited the answer to provide an optimized unique path svg.
– SIMBIOSIS surl
Commented Jun 23, 2022 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
Commented Jun 23, 2022 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" />
– SIMBIOSIS surl
Commented Jun 23, 2022 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.
– SIMBIOSIS surl
Commented Jun 23, 2022 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
Commented Jun 23, 2022 at 13:32

| Show 2 more comments

Stack Exchange Network

Inkscape drawn SVG circle isn't rendered on firefox or image viewers

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
inkscape
render-settings
or ask your own question.

Hot Network Questions

Inkscape drawn SVG circle isn't rendered on firefox or image viewers

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged inkscaperender-settings or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
inkscape
render-settings
or ask your own question.