Jump to content

File:20210601 Spreadsheet automatically generates XML code for SVG graphics - flow chart.svg

Page contents not supported in other languages.
This is a file from the Wikimedia Commons
From Wikipedia, the free encyclopedia

Original file (SVG file, nominally 1,100 × 400 pixels, file size: 2 KB)

Summary

Description
English: Flow chart showing spreadsheet automatically generating XML code for SVG graphics.
  • Usage of spreadsheets: paste or enter your data into the spreadsheet, and specify image dimensions, number of grid lines, font sizes, etc. The spreadsheet instantly and automatically generates a column of XML code that you simply copy and paste into a text editor and save as an ".svg" file.
Date
Source Own work
Author RCraig09
SVG development
InfoField
 
The SVG code is valid.
 
This diagram was created with a text editor.
 
 This diagram uses embedded text that can be easily translated using a text editor.

Licensing

I, the copyright holder of this work, hereby publish it under the following license:
w:en:Creative Commons
attribution share alike
This file is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
You are free:
  • to share – to copy, distribute and transmit the work
  • to remix – to adapt the work
Under the following conditions:
  • attribution – You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
  • share alike – If you remix, transform, or build upon the material, you must distribute your contributions under the same or compatible license as the original.

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

The user pastes data and selects format choices in yellow cells. The spreadsheet automatically assembles XML code in the blue column, which the user copies and pastes into the .svg file.

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

Stepwise instructions (after you've entered your data and parameters into the yellow-shaded cells):

  1. Click on the header of the blue-shaded column, so that the entire column is highlighted (selected)
  2. Copy (Command-c on Mac, Control-c on Windows)
  3. Switch to your text editor
  4. Paste the content (Command-v on Mac, Control-v on Windows)
  5. File, Save as, (enter myfilename.svg), Save. (Be sure to use the ".svg" suffix.)
  6. 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

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?

  • 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?

  • 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?

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

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.

See also

Captions

Flow chart showing spreadsheet automatically generating XML code for SVG graphics.

Items portrayed in this file

depicts

1 June 2021

image/svg+xml

232d7f89965e9e88711f9e68a912b09c5423c107

1,842 byte

400 pixel

1,100 pixel

File history

Click on a date/time to view the file as it appeared at that time.

Date/TimeThumbnailDimensionsUserComment
current05:53, 2 June 2021Thumbnail for version as of 05:53, 2 June 20211,100 × 400 (2 KB)RCraig09Version 3: gray vertical lines to simulate spreadsheet columns
22:15, 1 June 2021Thumbnail for version as of 22:15, 1 June 20211,100 × 400 (2 KB)RCraig09Version 2: reducing font sizing, nudging some elements, because of Wikimedia's rendering of fonts
22:11, 1 June 2021Thumbnail for version as of 22:11, 1 June 20211,100 × 400 (2 KB)RCraig09Uploaded own work with UploadWizard

Metadata