File:20210601 Spreadsheet automatically generates XML code for SVG graphics - flow chart.svg
Original file (SVG file, nominally 1,100 × 400 pixels, file size: 2 KB)
This is a file from the Wikimedia Commons. Information from its description page there is shown below. Commons is a freely licensed media file repository. You can help. |
Contents
- 1 Summary
- 2 Licensing
- 3 Instructions, and links to actual spreadsheets (transcluded)
- 4 Background: spreadsheet structure and content
- 5 Detailed how to: copying, pasting, and saving the svg code
- 6 Fine-tuning the code after it's pasted in the .svg file
- 7 Why not just use Excel's "Chart" feature, or Inkscape?
- 8 What are disadvantages of these spreadsheets?
- 9 What if a raster image (PNG etc.) is needed, rather than SVG?
- 10 Contact
- 11 See also
Summary
Description20210601 Spreadsheet automatically generates XML code for SVG graphics - flow chart.svg |
English: Flow chart showing spreadsheet automatically generating XML code for SVG graphics.
|
Date | |
Source | Own work |
Author | RCraig09 |
SVG development InfoField | This diagram was created with a text editor. This diagram uses embedded text that can be easily translated using a text editor. |
Licensing
- 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.
Instructions, and links to actual spreadsheets (transcluded)
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
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):
- 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
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
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/Time | Thumbnail | Dimensions | User | Comment | |
---|---|---|---|---|---|
current | 05:53, 2 June 2021 | 1,100 × 400 (2 KB) | RCraig09 | Version 3: gray vertical lines to simulate spreadsheet columns | |
22:15, 1 June 2021 | 1,100 × 400 (2 KB) | RCraig09 | Version 2: reducing font sizing, nudging some elements, because of Wikimedia's rendering of fonts | ||
22:11, 1 June 2021 | 1,100 × 400 (2 KB) | RCraig09 | Uploaded own work with UploadWizard |
File usage
- Talk:Climate change/Archive 86
- Talk:Data and information visualization
- Talk:SVG
- Talk:Warming stripes
- User:RCraig09/Excel to XML for SVG
- User:RCraig09/Excel to XML for SVG/How to
- User talk:Exobiotic
- User talk:RCraig09
- User talk:RCraig09/Archive 2 (2020)
- User talk:RCraig09/Archive 3 (2021-2022)
- User talk:RCraig09/Archive 4 (2023)
- Wikipedia:Graphics Lab/Illustration workshop/Archive/Apr 2021
- Wikipedia:SVG help
Metadata
This file contains additional information, probably added from the digital camera or scanner used to create or digitize it.
If the file has been modified from its original state, some details may not fully reflect the modified file.
Width | 1100 |
---|---|
Height | 400 |