Missing objects or black boxes

Failure to convert these objects appropriately, which is often not user error, may lead to incorrect Z-ordering, phantom black boxes or missing (not rasterized) objects. If operating on a system with RSVG installed, it may be a good idea to check the image before uploading to MediaWiki servers. If black boxes still appear after converting all objects appropriately, it may be necessary to hand-edit the XML to remove the <flowroot> tags. [1] [2] The issue seems to stem from a mismatch between SVG 1.2 and SVG 1.1 behaviour, and affects several 1.1 programs, such as rsvg. The workarounds that one can employ are either not to use flowed text (by using the text tool without creating a text field), or to stroke the text using "object to path". This can subsequently (and optionally) be cleaned up using "simplify", although this has the negative side effect of smoothing your fonts, particularly at sharp corners. The positive effect of the simplify step is to significantly reduce the filesize required to describe your text components.

Font issues

Due to copyright restrictions, MediaWiki cannot use proprietary fonts that are commonly found on several proprietary operating systems. Fonts such as Arial and Times New Roman require licencing fees to distribute. RSVG will not be able to locate such fonts, and the text will fail to appear in the rendered image. There are three solutions to this issue:

• One can substitute a font that is available on Wikipedia. (Facilitates editability.)
• Or, alternatively, one can convert the text into path information in Inkscape. (Better typographical appearance.)
• Group text, and create two copies, converting one to paths and making the other editable text layer transparent. (Compromise)

For ease of subsequent editing and significantly smaller file sizes, substituting the font with an available font is the recommended option. Many of the common fonts have non-proprietary alternatives that are somewhat similar in typographical style, resulting in minimal disruption to existing images during substitution. For a list of fonts available in Wikipedia, see available fonts on Meta.

Here are some suggested freely-distributable replacements for commonly-used proprietary fonts:

• Times New Roman can be replaced with Nimbus Roman No 9 or Liberation Serif
• Arial can be replaced with Helvetica or Liberation Sans
• Courier New can be replaced with Courier or Liberation Mono

Fonts which are available on Meta may or may not be available on a visitor's machine. If the placement or appearance of text in the image is important and there is uncertainty about which fonts are installed on a visitor's machine, then converting text into path information (as mentioned hereinbefore) may be necessary.

MediaWiki provides rasterized previews of SVG images. If those are only images needed by a visitor, then no portability issues may arise. If the visitor retrieves the SVG image to render it directly in their browser (perhaps to zoom in and see more detail than provided in MediaWiki's rasterized preview), it may not display as intended unless the referenced fonts have been installed on the visitor's machine.

Some fonts like Times and Helvetica have problems with resizing, replacing them with Liberation Serif and Liberation Sans, respectively, should fix the issue.

Missing embedded JPEG images

Normal image

Broken image

When a raster graphic is embedded in an SVG it is encoded into base64 data. That data is then assigned a MIME type in the <image> element. In the case of an embedded JPEG, the MIME type is "image/jpeg". Older versions of Inkscape (and possibly others) assigned the MIME type "image/jpg". While Inkscape and most web browsers will display such an SVG image just fine, the MediaWiki software that rasterizes the SVG file will have trouble with it. Not recognizing the MIME type "image/jpg" there will simply be an empty space where the image is supposed to be. The fix is to open the SVG file in a text editor, find the <image> element, locate "image/jpg", change it to "image/jpeg" and re-save. At right is an example of this problem.