SVG looks great in Inkscape, but not elsewhere

[aniamakes]

I have made an SVG in Inkscape.

Here's a PNG that I exported (see attachment cwf2.png).

Here's how it looks in Ubuntu preview (see attachment ending 12-57-07.png) - note the black box where the text is, and that the whole thing is ROUND and not hexagonal.

And this is how it looks in Chrome and Atom (code editor): (see attachment ending 12-57-29.png)

I've also attached the culprit svg itself.

What can I do to get the SVG file that looks and works throughout places like image preview and Chrome? I spent over an hour trying to figure it out, but can't figure out why Inkscape works, but not other programs which have no issues with SVGs like Chrome.

Any help would be appreciated.

[Moini]

1. You can update to the current version. See https://inkscape.org/en/release/0.92.3/gnulinux/
2. See FAQ for the text: https://inkscape.org/en/learn/faq/#flowed-text-doesnt-show-exported-file (Path > Object to Path)
3. Seems the browsers and the Ubuntu preview cannot deal with the multiple nested clips you used. Please use a hexagon instead (star/polygon tool) of clipping a blue rectangle. You can also remove several groups and the circle, and some more clips.

I've reduced your image to the necessary pieces, you may need to replace the text, because I didn't have your font installed:

[aniamakes]

Hi! thank you for your help! Would you have a moment to explain what you actually did? I tried moving background / stars / border / text into separate layers, but found that stars would randomly disappear (looking at the svg code, I think it's because they were mirrors of other stars). And where did the circle come from?

[Moini]

General procedure:

Select object -> Look into the status line:

- 'blahblah... clipped...' -> Object -> Clip -> Release
- 'blahblah... masked...' -> Object -> Mask -> Release
- 'group of ....' -> Object -> Ungroup
- 'clone of ...' -> Edit -> Clone -> Unlink clone
- 'flowed text' -> either: Text -> convert to text (next user must have the font available, and in your drawing, this displaces the text), or Path -> Object to Path (text is no longer editable, but will always look correct).

Repeat until there are no more groups, clones, clipped objects, masked objects, flowed texts etc. in your drawing. This way, you will get maximum compatibility with any and all applications out there that do only support a subset of the SVG standard, or when you cannot know if the user will have the font installed on their computer.