FLOSS Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Wikimedia Commons

WikimediaCommons: SVG

Recommendations for SVG

How Wikipedia/MediaWiki.WikimediaFoundation treats SVGs

SVG is not one of the file formats enabled for uploading by default. It can easily be added as an allowed file format and on all Wikimedia wikis this has already been done. Because browsers do not display SVGs reliably, Wikipedia/MediaWiki.WikimediaFoundation creates PNG thumbnails of SVGs, and these are shown to the user whenever an SVG is referenced (except if the user downloads the original source file).

Wikimedia wikis use RSVG (also known as librsvg) to render PNGs. When you view an SVG on any Wikipedia/MediaWiki.WikimediaFoundation page (including its own Image page), you are actually seeing a PNG thumbnail.

 mediawikiSVGhandling

One consequence of this is that if you want to access an original SVG file, saving it from the image you see in an article or even from what you see on the Image page won't work. 

savefileas

As this screenshot shows, the way to save the original SVG file is to right-click on the linked file name that appears below the image thumbnail, and choose "Save Link As..."

Language neutrality

Because Wikimedia Commons is a multilingual resource, if at all possible it is best to make diagrams, graphs and charts language neutral. This means they can be used in a wiki of any language without needing modification.

For example, instead of directly labelling areas in an image, consider colour-coding or numbering them, and then referring to the colour/number in a language-specific key below. If there are many different elements this can make the caption very large -- but on the other hand, if there are many different elements, the image probably won't be legible as a thumbnail anyway.

With diagrams it is useful to upload a numbered version as well as a version in your preferred language. Then users who speak other languages but lack the technical or linguistic knowledge to translate the file can still improve their project by including the numbered version.

A very useful tool called "SVG Translate" is available on the Wikimedia toolserver at http://toolserver.org/~nikola/svgtranslate.php .

Miscellaneous tips

  • Don't embed bitmap images into SVGs. If you are converting a bitmap image make sure it is properly converted and not just embedded.
  • Fonts are one of the most common sources of bad rendering of SVGs on Wikipedia/MediaWiki.WikimediaFoundation. Check the list of fonts available at http://meta.wikimedia.org/wiki/SVG_fonts . Notably, CJK fonts will not display, and must be converted to paths before files containing them are uploaded at Wikimedia Commons. 
  • If possible use redundant coding. This means don't use colour as the only way of distinguishing between items. Also use patterns or hatchings or different shapes.
  • Use colours that contrast in hue as well as brightness.

Further reading

There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.