Information icon.svg Please vote in the 2017 board of trustees election. The cabal thanks you for your service.

Help:SVG images

From RationalWiki
Jump to: navigation, search

SVG stands for scalable vector graphics. It is a type of image based on vector graphics such as points, lines and curves. The wiki server renders the image each time as a PNG image, preventing pixelation at higher magnification. Because they are stored as a text file, simple but large images can be considerably smaller, as large, single-colored areas require significantly smaller space.

original file
"enlarged" version

Making SVG images[edit]

There are a number of useful software packages for making SVG images. Two important free packages include gnuplot and Inkscape.

gnuplot[edit]

Gnuplot is a graphing program with multiple outputs including SVG. It can be used to plot paired data and functions in a 2D plot; several possibilities exist for 3D plots. It is usually preferable to generate graphs with gnuplot (or a similar program such as Ploticus) instead of a drawing program, although the latter can be used for additional image manipulation.

Inkscape[edit]

Inkscape is a drawing program for SVG images.

Unfortuantely, the Wikimedia rendering program has some issues with Inkscape images. To alleviate these programs, the following are recommended:

  1. Only certain fonts are available, and unfortunately, they are not usually common ones. Fonts are usually substituted if they are not available. Wikipedia recommends DejaVu Sans and DejaVu Serif (despite their hideousness).
  2. "Flowed text" can create problems as it may not render or render as rectangle. Select the text boxes and select "Convert to Text" under the Text menu. Scaled text (by using the handles) will not function properly.
  3. Arrowheads and dashed lines do not render properly. Select them, and select "Object to Path" under the Path menu.
  4. Images are the size of the box in Inkscape. Usually you will want to change the size of the image with File > Document Properties > Resize page to content.
  5. Save the file as "Plain SVG" instead of "Inkscape SVG". The latter contains data for editing the image which is no longer necessary when it is uploaded.
  6. If your image still doesn't render properly, other tips may be found here and here.