SVG does not render properly

Question

I just started using Inkscape today and began making a logo for my robotics team.

The logo consists of a phoenix that has overlaid text reading "Project Phoenix", with various other descriptors around a circular path.

For some reason, the "Project Phoenix" text that is overlaid on top of the phoenix bird graphic does not properly show up when viewing the SVG in other programs or attempting to use the SVG in other uploads.

I am using a Mac running OS X El Capitain. When I render the SVG using Gapplin, the "Project Phoenix" text does not appear. However, when I attempt to upload the SVG to the t-shirt designer on The Graphic Edge, the "Project Phoenix" text appears as an orange block with various black blocks that form around it.

When I save the SVG to EPS and PDF formats from Inkscape, the rendered graphic appears to look as it should.

If anyone might be able to provide some insight as to why the SVG is not rendering correctly, and does so differently in different situations, I would greatly appreciate it!

Below are some screenshots of how the SVG is supposed to look (once rendered in EPS and PDF file formats) and what happens when rendered in Gapplin and on The Graphic Edge t-shirt designer.

Intended Graphics

Gapplin Rendering

The Graphic Edge Rendering

Answer 1

This is a common problem with poor rendering engines. I regularly encounter this problem with ristretto, an image viewer for Linux.

Problem

The problem occurs because text elements are rendered incomplete. Rendering text elements means loading a font, apply various operations (defined in XML attributes) to it and rendering them on the graphics grid (potentially with anti-aliasing). The point is: it is expensive to render it and some engines do not even try. They just show a filled square when text should occur and that's it. In comparison drawing paths is less complex and expensive.

Potential solutions

1. Ignore. You are good to go with tools which can correctly read SVG (AI/Inkscape/...).
2. You can convert text elements into paths. Converting to path (scroll down to corresponding section) can be done by selecting the text object and pressing Shift+Ctrl+C. Be aware that you lose any text-information and cannot edit it as text object any longer. This way your image is more likely to be rendered correctly in Graphic Edge, which I assume implements path drawing correctly. However, you should not distribute this modified SVG to the next graphic designer.