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)
Captions
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[edit]
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[edit]
- 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)[edit]
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.
See also[edit]
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 (talk | contribs) | Version 3: gray vertical lines to simulate spreadsheet columns | |
22:15, 1 June 2021 | 1,100 × 400 (2 KB) | RCraig09 (talk | contribs) | 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 (talk | contribs) | Uploaded own work with UploadWizard |
You cannot overwrite this file.
File usage on Commons
The following 28 pages use this file:
- User:RCraig09
- User:RCraig09/Excel to XML for SVG
- User:RCraig09/Excel to XML for SVG/How to
- User talk:RCraig09
- User talk:RCraig09/Archive 1 (2009-2021)
- Commons:Chart and graph resources
- Commons:Convert tables and charts to wiki code or image files
- Commons:Graphic Lab/Illustration workshop/Archive/2021
- Commons:Graphics village pump/February 2024
- File:1981–1989 monthly unemployment, inflation, and interest rates.svg
- File:2011- Renewable energy capacity - International Energy Agency-cs.svg
- File:20200324 Global average temperature - NASA-GISS HadCrut NOAA Japan BerkeleyE.svg
- File:20210331 Global tree cover loss - World Resources Institute-cs.svg
- File:20210502 Warming stripes comparison of Global Mean Surface Temperature datasets.svg
- File:20210507 Warming stripes - ellipses - global warming.svg
- File:20210507 Warming stripes - octagons - global warming.svg
- File:20210507 Warming stripes - rectangles - global warming.svg
- File:20210507 Warming stripes - triangles - global warming.svg
- File:20210508 Warming stripes - hexagons - global warming.svg
- File:20210517 Warming stripes - pentagrams - stars - global warming.svg
- File:20210522 Warming stripes - longitudes - meridians on a globe - global warming.svg
- File:20210526 Warming stripes - hearts - global warming.svg
- File:20210530 Warming stripes - diamonds - global warming.svg
- File:20210601 Spreadsheet automatically generates XML code for SVG graphics - flow chart.svg
- File:20210604 Warming stripes - XLSX to SVG - various Diamond etc configurations - GIF.gif
- File:20210822 Global warming - warming stripes bar chart.svg
- File:20211109 Frequency of extreme weather for different degrees of global warming - bar chart IPCC AR6 WG1 SPM cs.svg
- Category:SVG diagrams created with spreadsheet
File usage on other wikis
The following other wikis use this file:
- Usage on en.wikipedia.org
- Talk:SVG
- Wikipedia:SVG help
- Talk:Data and information visualization
- User talk:RCraig09
- User talk:Exobiotic
- Talk:Warming stripes
- Talk:Climate change/Archive 86
- User:RCraig09/Excel to XML for SVG
- User talk:RCraig09/Archive 2 (2020)
- Wikipedia:Graphics Lab/Illustration workshop/Archive/Apr 2021
- User:RCraig09/Excel to XML for SVG/How to
- User talk:RCraig09/Archive 3 (2021-2022)
- User talk:RCraig09/Archive 4 (2023)
Metadata
This file contains additional information such as Exif metadata which may have been added by the digital camera, scanner, or software program used to create or digitize it. If the file has been modified from its original state, some details such as the timestamp may not fully reflect those of the original file. The timestamp is only as accurate as the clock in the camera, and it may be completely wrong.
Width | 1100 |
---|---|
Height | 400 |