Wikipedia:Collaboration to convert graphs to SVG

From Wikipedia, the free encyclopedia

See the list of charts and graphs targeted for conversion.

Many graphs and charts on Wikipedia are currently displayed in a raster format. That has two problems:

  1. The images cannot be resized without visible pixellation.
  2. The results are not easily editable.

Scalable Vector Graphics are the best solution to images like graphs and charts that can be described through simple shapes and text. Look at the two smiley faces at right. The top one is in SVG format – it resizes perfectly. In comparison, the raster format cannot be resized elegantly.

By converting graphs and charts to SVG format, we can guide Wikipedia's content to a higher calibre, and help to keep the material up-to-date and accessible.

Contents

[edit] Modifying the graphs

Until instructions are posted, you'll need to be fairly proficient in SVG to take part in this project.

Please don't use graphics programs like Inkscape, Adobe Illustrator or the GIMP to edit these SVGs. They need to be edited in a text editor (SVG is a pure XML file from core, thus can be edited in e.g. Notepad).

For the time being please use the chart of Netscape Navigator's usage share as the model:

Image:Netscape-navigator-usage-data.svg

[edit] Tips for good graphs

The following tips are based on good practice for charts generally (including the work of Edward Tufte) and the requirements of Wikipedia in particular.

  • Avoid putting in a chart title. That's the role of the caption.
  • Avoid colour as much as possible. The graph should still be useable when printed then photocopied in grayscale.
  • Try to use the smallest discernible difference – e.g., clearly different shades of grey are better than red, green, and blue.
  • Try to keep lines fairly thin. Thick, chunky lines typically make for ugly graphs.
  • The X- and Y-axes need to be carefully considered:
    • Don't listen to Excel – the scale along the axes do not have to emphasise the first and last records; rather, choose logical, neat values to display.
    • Don't listen to your teacher, either – you should only label the axes if it's not patently obvious. So if the X-axis scale is clearly years, there's no need to explain that; the audience is smart enough to figure it out! But if it might be in doubt (like if you're graphing something many years ago, or which covers a large expanse of history) then it may be necessary.
    • If your scale crosses a major numerical division, it should be marked. So a graph of the years 1892 through 1905, for example, should definitely mark the year 1900.
    • For example, if you are graphing a variable between the years 1999 and 2004, the best scale is probably one that has the years 2000, 2002, and 2004 marked. If there's enough space, then you could add in the odd-numbered years, too.
    • As per the Wikipedia style guide, don't abbreviate years (e.g., "1998, 1999, 2000, 2001", not "1998, '99, 2000, '01").
    • As per the Wikipedia style guide, don't use numbers to express a month.
  • Try not to use keys and legends. Instead, try to include the explanatory material on the graph. (Because it's in SVG, anyone can easily translate it into other languages!)

[edit] Labelling graphs

[edit] Marking a target

If you find a graph that should be in SVG format, please add the following to the top of its page:

{{SVG graph project}}

[edit] When you're done

Remove the {{SVG graph project}} tag and replace it with {{SVGNowAvailable|Name of new image.svg}}.

[edit] Images so far converted