User:Phidauex/SVG tips

A triangle dissection puzzle, created with SVG for easy editing and printing.

Here are some tips on using the SVG image format in Wikipedia articles, and in the Wikimedia Commons.

Benefits of SVG

• Scalable - the image can be as small as a thumbnail, or as large as a poster, without losing quality, or increasing file size.
• Open standard - anyone can create software to edit and generate SVG files. The standard is maintained by the W3C, a respected industry standards organization.
• Editable - images can be easily edited for updates, changing text for multilingual images, etc.

Downsides of SVG

• New standard - not supported by many browsers natively (though Wikimedia includes support for conversion to PNG on the fly for browsers that do not support it). Different viewers support different 'versions' of SVG, meaning some features may only work on certain viewers.
• Possibly larger file sizes - May have a larger file size than an equivalent PNG. However, this is a small problem compared to the benefits, and most users will view the smaller rendered PNG file sent by the Wikipedia servers.

When to use SVG

A good choice for an SVG image. An image made of lines, shapes, and fills, that you may want to print small, or blow up to the size of a flag!

SVG is the preferred file format for line drawings, diagrams, graphs, maps, flow charts, and anything assembled out of lines and curves, as opposed to individual pixels as in a photograph. SVG should be used any time one can expect to edit an image after upload. Examples would be maps that may need to have borders adjusted, or text changed to be multilingual. SVG graphs showing data that might change with time can be edited to stay current.

Images such as photographs and animations should not be attempted in SVG format. Formats such as JPEG, PNG and GIF may be more appropriate. Animation is supported in the SVG standards, but not by Wikipedia. However, this may change in the future, bringing the domain of animations to SVG.

Creating SVG files

To create SVG files, you need a vector graphics package that can save SVG files. Fortunately, there are a wide range of packages for various operating systems. I recommend using Inkscape, which is an open source package compatible with Windows, OS X, and various versions of Linux. It's feature package is fairly mature, and its ease of use makes it ideal for the creation of informational graphics. I will mostly refer to Inkscape when discussing issues and techniques, though most vector graphics packages have similar tools and issues.

Some other vector editors

• Adobe Illustrator - Expensive, but fully featured. Available for Windows and OS X. Adobe's SVG compliance is very good, and Adobe is a big contributor to the SVG community.
• Inkscape - Free, open source, and well featured. Inkscape is a dedicated SVG editor, licensed under the open source GPL license. Builds for Windows, OS X, and various flavors of linux are available. Inkscape is well featured, supports the SVG standards in a predictable way, and completely free. Unless you are a graphics professional, this is the SVG editor I recommend, and the one most described here.

Some SVG viewers

• rSVG - A code base that interprets SVG files, and converts them to PNG. Used by Wikimedia servers for converting SVG to PNG on the fly, for browsers that do not support SVG natively.
• Mozilla Firefox - Supports basic SVG features natively.
• Adobe SVG viewer/plugin - Adds full support for SVG, including proposed features and animations. If a file does not look right here, then it is the file's fault.

Using Inkscape for Wikipedia diagrams

Inkscape is ideal for diagrams on Wikipedia. The program comes with a detailed tutorial which I highly recommend following, however, if you have experience with a vector program, its behavior should be predictable. If you have only worked with bitmap image editors, such as Photoshop, MS Paint, etc. then you will have to change how you think of an image. SVGs are built out of collections of lines, shapes, curves, and fills, not individual pixels. You can take a circle 10px wide, stretch it to 100px wide, and it stays a circle, instead of getting a 'jagged edge'. This is the power of a vector program. Stacked objects remain separate, and can be changed at any time. You don't need to 'erase' text, you just select the text object, and delete, or edit it.

After you have created an SVG in Inkscape, you need to upload it to Wikipedia. If your image is going to be freely licensed (as you should be doing!), in either the GFDL, public domain, or compatible Creative-Commons license, then you should upload it to the Wikimedia Commons [1], this will make your diagram available to all the Wikipedia language editions, instead of just the English Wikipedia. This is especially important with diagrams that do not have English text. These images can be quickly added to other Wikipedias. Your efforts don't just help one group, they help hundreds!

To that end, diagrams and SVG images should contain as little text as possible. If text is necessary, it is possible for others to edit the image, and create a new copy in their language (still helpful), but if captions and other descriptive text are left out of the image, then users can add a caption in their own language in the image template.

Inkscape Problems

Inkscape can save SVG files in two formats, Inkscape SVG, and Plain SVG. Inkscape SVG is a standards compliant SVG file that includes extra information, such as metadata about the file, and other information unique to Inkscape to aid future editing. However, some renderers (such as Wikipedia's!) can get confused by this extra information. To eliminate the possibility of odd rendering problems, files uploaded to Wikipedia should be saved in the Plain SVG format.

Inkscape supports a newer version of the SVG standard than Wikipedia's renderer. This means that some features which work on Adobe's render and in Inkscape, may not work on Wikipedia. Two features that I'm aware of are the advanced stroke features, such as arrowheads, and editable text.

I recommend keeping two copies of your SVG files. Save your file as an Inkscape SVG for your own uses, and reserve this as a 'master copy'.

When it comes time to upload the file to Wikipedia, perform the following steps:

• Select File>Save As to save a copy of your image in the Plain SVG format.
• Select all text elements, and choose Path>Object to Path. This will convert text and fonts (which aren't supported by all renderers), into lines and shapes, which are supported by all renderers. You will no longer be able to edit the text as text, but the text will work in all renderers.
• Select all elements that use fancy strokes, such as arrow heads, dashed lines, etc. and select the Path>Stroke to Path command. This will convert dashed lines and arrow heads to basic lines and shapes. Again, those fancy stroke elements are supported in some renderers, but not in others. The basic lines and shapes are supported everywhere.
• Save this 'stripped down' version, and upload it to Wikipedia.

Frequently Asked Questions

Q: How large should my SVG images be?
A: The absolute size of the document does not matter much, since that only affects how it is displayed when viewed by itself. The file size does not depend on the document dimensions! The image can be stretched or compressed as much as a user wants, without changing quality, or file size. With that in mind, I recommend an image width of around 600px. When a user views the full size image, a width of 600-800px gives them a good close-up view, while still allowing them to fit the entire image on their screen without having to zoom in or out.

Q: How do you change the document size in Inkscape?
A: The document size starts out with an A4 page. To make this larger or smaller, create a rectangle with the dimensions you desire the document to be, and select it with the arrow tool. Then select File>Document Properties, and under Custom Size, choose Fit page to selection, and click OK. You can now delete the 'sizing' rectangle, and move or resize the other elements to fit the space you have created.

Q: My text is appearing as little blocks, or isn't showing up at all after upload to Wikipedia!
A: Some text features of Inkscape are not supported by Wikipedia's renderer. Select the text objects, and select the command Path>Object to Path. This will convert the text to paths. Save as Plain SVG, and reupload your file.

Q: My arrowheads/dashed lines are appearing as little blocks, or aren't showing up at all after upload to Wikipedia!
A: Some stroke features of Inkscape are not supported by Wikipedia's renderer. Select the offending objects, and select the command Path>Stroke to Path. This will convert the strokes to paths. Save as Plain SVG, and reupload your file.

Q: How do I get rid of the transparent background?
A: Do you really need to? Usually not! Wikipedia's renderer will convert the SVG file to PNG with a white background for display. Browsers that natively support SVG transparency will show the background color through the image, white! Leaving your image transparent behind helps future editors, and allows the image to be displayed over other background colors without a big white square. However, if your image really needs a specific colored background, create a rectangle the size of the image, fill it with the background color of your choice, and choose the command Object>Lower to Bottom. Save your image, and enjoy the solid background color!