Graphic arts with SVG and spreadsheets

The United States Department of Labor Bureau of Labor Statistics noted that there were 51,400 jobs for craft and fine artists in 2012 with a projected growth of 3%. There were 259,500 jobs for Graphic Artists with a projected growth of 7%. Art with technology has a brighter employment picture than art without technology.

My own use of technology to generate graphics is far from the world of brush on paper. My drawing tools are text editors and spreadsheets. With these tools I produce images for use in my classes. Yet the skill set I deploy is not taught in an art class nor in in computer information systems class. Few people probably harness together spreadsheets to craft Scalable Vector Graphics code, yet the combination can be powerful.

For years I have used a series of open document spreadsheets to generate Scalable Vector Graphics xy-scattergraphs for inclusion in physical science materials. 

Today I used the capabilities of spreadsheet to help draw a segment of a Nephrolepis fern

I sketched out a single pinnae on a sheet of graph paper, using only three points, two base points and the tip. Curved lines were drawn connecting the base points to the tip. A single common cubic bezier point was estimated. The coordinates for the single pinnae were noted and coded into a scrap of SVG as d="M 0,70 c 15,-50 15,-50 60,-70 -25,30 -25,30 -30,70" and checked for desired shape.

The code after the relative cubic bezier was then coded into a spreadsheet. The spreadsheet was used to both repeat and taper the blades from left to right. Note that some columns contain a necessary and invisible space character. Other cells include commas for the coordinate pairs. Rows after the first row are calculated using a function that was filled down to automatically generate those rows.


The signs on the y-coordinates were then negated to produce the bottom half of the fern frond in rows 12 to 21.

The code was then copied into a text editor, the tabs were stripped out, and the rest of the code was put into place around the snippets.

The SVG was then embedded in HTML5 used to produce a web page. The images can be readily modified in the future with the same text editor with which I edit tests for use in the class.

The solution required a knowledge of graphing, coordinates, the way in which cubic beziers behave, a knowledge of spreadsheets, an ability to see a mathematical solution to a repeating pattern, spreadsheets, Scalable Vector Graphics, and text editors. The result is a diagram of use in a botanically oriented class. AR/IS 205 anyone?


Statistics from: Bureau of Labor Statistics, U.S. Department of Labor, Occupational Outlook Handbook, 2014-15 Edition, Craft and Fine Artists, on the Internet at http://www.bls.gov/ooh/arts-and-design/craft-and-fine-artists.htm (visited August 31, 2015).
Bureau of Labor Statistics, U.S. Department of Labor, Occupational Outlook Handbook, 2014-15 Edition, Graphic Designers, on the Internet at http://www.bls.gov/ooh/arts-and-design/graphic-designers.htm (visited August 11, 2015). 

Popular posts from this blog

Box and whisker plots in Google Sheets

Creating histograms with Google Sheets

Traditional food dishes of Micronesia