How to use spreadsheets to generate .svg charts.
Simple instructions provided within the spreadsheets should bring you to success. The following explanations help you understand the process and fine-tune your final result.
Background: spreadsheet structure and content edit
1. Generally, users should be concerned with the leftmost columns, which contain yellow cells in which user data is pasted or entered, and in which chart parameters are adjusted.
- Such parameters include chart width and height, margins, font sizes, titles, labels, etc.
- My "default" parameters are reasonably chosen, and hopefully don't require much fiddling.
2. Immediately to the right of the leftmost columns is a blue-shaded column that you copy and paste into a text file that you will save as myfilename.svg. Do not change the blue-shaded column itself.
3. To the right of the blue-shaded column are the calculation columns having often-complex formulas. The formulas catenate (assemble) characters of the XML code that constitutes the text you see in the blue-shaded column. Messing with those formulas can instantly mess up your final result!
Detailed how to: copying, pasting, and saving the svg code edit
Stepwise instructions (after you've entered your data and parameters into the yellow-shaded cells):
- Click on the header of the blue-shaded column, so that the entire column is highlighted (selected)
- Copy (Command-c on Mac, Control-c on Windows)
- Switch to your text editor
- Paste the content (Command-v on Mac, Control-v on Windows)
- File, Save as, (enter myfilename.svg), Save. (Be sure to use the ".svg" suffix.)
- Open the .svg file in your browser to view the graphic
Optionally:
- Make changes, either
- (a) manually in the .svg file itself (see "Fine-tuning", below) or
- (b) in the original spreadsheet (then repeat the copy-paste-save steps above).
- After you've established your .svg file, you can check your changes simply by refreshing your browser.
Tips:
- Default parameters may be exactly what you want. ("If it ain't busted, don't fix it.")
- Do not cut and paste anything inside the spreadsheet, including your own data, as this can cause unintended results. Instead, use copy and paste, and delete the original cells' contents if necessary. Likewise, don't delete or insert cells, as the resulting cell shifts can causes confusion.
- Including certain non-alphanumeric characters in a title, legend, or label can cause an SVG coding error. Examples of problematic characters are ">" and "<", which are interpreted as SVG code characters that will mess up the SVG file. For problem characters, use character codes like &#__; from the "HTML Number" column at this website.
- If you have a line graph and want to put markers (e.g., "dots") atop the data points, just create a scatterplot spreadsheet that has exactly the same data, margins, horizontal scale, and vertical scale, as your original line chart. Then, copy the resulting SVG code for the markers/dots, and paste that code into your original line graph SVG file. The dots should align perfectly. See this example.
- Add any file you upload to Commons to Category:SVG diagrams created with spreadsheet so that such files are easier to find.
Fine-tuning the code after it's pasted in the .svg file edit
After you've pasted the code into the .svg file, you can fine-tune the .svg file itself using an ordinary text editor. Since the code is minimal (not complex and cluttered like in Inkscape), it's relatively easy to change even if you don't have much prior training in XML or SVG.
Such edits are usually for minor adjustments, for example:
- "Nudging" text (changing its location slightly) so it looks "just right".
- Changing colors of particular elements.
- Deleting unwanted elements.
- Removing blank lines.
Useful strategy:
- Make a basic .svg file using the spreadsheet, and then use Inkscape or Adobe Illustrator to add more complex objects.
Why not just use Excel's "Chart" feature, or Inkscape? edit
- Excel's chart feature does not provide for output of svg charts, which are desired for Wikimedia. SVG files are vector files, not raster files, and so are usually smaller in size but produce arbitrarily large images without pixellation ("choppy edges").
- Inkscape files often include unnecessary "stuff" that balloons file size (a faux pas among Wikimedians). Inkscape is a general purpose program that does not focus specifically on charting, so it's more time-consuming in Inkscape to generate basic features like axes, grid lines, tick-mark labels, etc.
What are disadvantages of these spreadsheets? edit
- The spreadsheets are special-purpose charting programs, not well suited for unique or customizable graphics. However, see "Fine-tuning..." for how the spreadsheets can be a solid and efficient starting point for your unique or complex project.
- The spreadsheets are entirely text-based. It is not a visual editor; there is no drag-and-drop capability, etc.
What if a raster image (PNG etc.) is needed, rather than SVG? edit
Your browser should render SVGs directly, and SVGs can be embedded in html; but sadly, most programs and social media websites can't handle SVGs directly.
However, there are options:
- If your SVG graphic is worthy of upload to Wikimedia, then just download one of its "PNG previews" (found below the image on its file description page).
- Use a program like Inkscape (free), Gimp (free) or Adobe Illustrator (not free) to read the SVG file and export to PNG.
- Use a website like cloudconvert.com (free) to upload the SVG file, convert, and download the raster file.
- In your browser, "print" the SVG image to PDF, and use a program (like Preview on a Mac) to export from PDF to PNG. You'll have to crop the result.
- Take a screen shot of your browser window, and crop the result as needed.
Tell me on my talk page if you know of other workable methods.
Contact edit
Please don't edit this page. Place comments or questions at User talk:RCraig09 instead.
Disclaimer: I've done a reasonable amount of testing, but I don't guarantee the spreadsheets will function as you hope, for your particular purpose or with your particular data.