Not able to save inkscape file correctly

Question

I made an inkscape file for an Olympics poster and saved it as svg but the circle in Japan's flag isn't showing up. When I open the svg in inkscape, everything is fine but in chrome and any other image viewer it just disappears. I have attached a screenshot of how it must look and the svg file

screenshot

Olympics svg file

Answer 1

Try this.

Select the red circle in the flag and do Path > Object to Path. Then save the SVG again. Might also be better to choose "Plain SVG" as the format when saving to remove the Inkscape specific XML.

I tested this solution, and viewed the results in Chrome, Firefox and Edge. All working fine.

As to why this happened, that's harder to explain. A guess would be that you imported the graphics from somewhere else and that they weren't created natively in Inkscape, but some other software. It certainly doesn't look like a native Inkscape construct. In any case however it happened, something got messed up somewhere, somehow.

After examining the SVG code, I can see there's something up with the SVG Circle element. It contains a path which shouldn't be there. Here's the problematic code after stripping away the Inkscape XLM, and styles.

<circle
       id="path1302"
       d="m 51.75,93.794792 a 1.75,1.75 0 0 1 -1.743576,1.749988 1.75,1.75 0 0 1 -1.756377,-1.73714 1.75,1.75 0 0 1 1.730682,-1.762742 1.75,1.75 0 0 1 1.769082,1.7242"/>

A properly formed SVG Circle element should instead look like this

<circle cx="41.1" cy="68.5" r="20"/>

This is how Inkscape normally codes circles, and why I suspect the circle was not originally created in Inkscape. The values cx and cy are the co-ordinates of the centre of the circle, and r is the radius.

Converting to paths works because it turns the SVG circle element into a properly formed path element, thus physically removing the problematic circle element. The original code is still visible in Inskcape even though it's malformed because Inkscape is generally more forgiving that a browser, it sees the path and renders it. A browser just sees bad code, and simply ignores it and doesn't render it.