Jay Nick is a retired electrical engineer who volunteers at local schools in his community by using art as a creative way to introduce students to mathematics and coding. Reflecting on the frustrations that his own children experienced in college programming classes, he decided to use his own experience with Scalable Vector Graphics (SVG) to create an approach to coding that combines principles of mathematics and art.

He has written two books, Learn SVG Interactively and STEAM Coded String Art, that explain how students learning to code can create beautiful SVG images using only a text editor. His self-published books are free and available on Apple iTunes and also on his wife’s website. Jay is also a regular contributor to OpenClipart.org, where he has contributed 166 SVG images that are licensed in the public domain.

Learning abstract mathematics concepts can be difficult for many. In this interview, Jay explains how he transformed his skills with SVG into a powerful teaching tool for today’s mathematics students. In the process, these youngsters learn about open source principles, coding in HTML, and SVG.

Don Watkins: What is your background?

Jay Nick: I am a University of Wisconsin—Madison graduate (’75 BS-ECE). I had a 31-year career at an electric and gas utility, where I was responsible for the hardware and software used to monitor and control the generation, transmission, and distribution of the electricity and natural gas.

Besides some Fortran programming in college, my first programming experience was in the late ’70s with assembly language for a microprocessor controller as part of the substation group. In the early ’80s, I moved to the 24/7 energy control center, where I programmed in Fortran and Assembly languages on a redundant “minicomputer” system.

In the late ’80s to early ’90s, as part of a small team, we migrated the minicomputer system to a network of microcomputers (PCs). The PCs were programmed in the C programming language.

With utility deregulation looming in the late ’90s, I worked for our non-regulated startup where a browser was the operator interface. Initially, dynamic HTML updated tables with data acquisition values.

In early 2000s, I introduced Scalable Vector Graphics (SVG) to display one-line diagrams of power plants and substations. Javascript retrieved XML data and updated the values and equipment status on the diagrams. This created a cost effective human machine interface (HMI) for operations.

DW: How did you get into open source programming?

JN: Later in my career, I was part of an Applied Technology group where we looked for new and emerging technologies that could be applied to the business. As a strong proponent of SVG, I was worried about the future of the technology, as Microsoft and its dominant browser would not support the World Wide Web Consortium (W3C) standard. I welcomed Firefox with its native SVG support. I began experimenting with Firefox add-ons and created several, both while working and in my early retirement years. I uploaded some of the add-ons, which were my first open source contributions.

One learns to program by reading and maintaining other people’s code. The web offers tremendous learning opportunities, as all browsers support viewing the source of an HTML page or SVG graphic. I am both a user of and contributor to OpenClipart.org.

DW: What prompted you to offer your coding experience to children in schools?

JN: My children’s first programming experience was in college. They hated it. The class required way too much time for the credits when compared to other classes. Other students I talked with felt the same way. Part of the problem is they weren’t exposed to how to go about it.

When the “learn to code” movement started, I listened to all the technology CEOs talking about how much fun they had when they first learned to code. They continued because it was fun. My experience was the same. I immediately thought of SVG and how it allows creativity and fun. I decided to try it out on my grandchildren and offered my services to schools.

Recently I had an opportunity to work with two fourth graders; their teacher felt they were in need of a challenge. That is when I started creating the SVG lesson plans on my site. Most of my grandchildren are just getting to an age where they can benefit from the work I have done.

DW: What about SVG graphics invited your attention?

JN: I discovered SVG in 2001 while struggling to make an eBook. Since eBook technology was not mainstream, I wanted to display the book on the web. At the time, there were many different monitors on the market with various resolutions, 800×600, 1024×768, etc. The problem was text in an image distorted and became unreadable at different resolutions. Searching for a solution, I discovered SVG. Because it is vector graphics, there is no distortion. The text looked the same at any resolution. But, SVG’s application at work was what really got me excited about it. I have been working with it ever since.

DW: Why is art a great medium to teach coding and mathematics?

JN: As a kid, I did not like art because my drawings never looked good to me. I loved math and would have loved art had computers and SVG been around. Math has a negative connotation with many girls, but most like art. My granddaughter and I created an eBook, I Love to Doodle, that is based on the math in art and the art in math. It is by far our most popular SVG eBook and has worldwide appeal.

SVG combines math and art and appeals to both boys and girls. It allows creativity, coloring, and fun. They laugh when they get a coordinate wrong and an object, like an eye, shows up in the wrong place. They are proud of their work and want to print it to show mom and dad. It is so rewarding to see that.

We must be careful and make sure coding does not get the negative connotation that math has been unable to shed. It easily could happen.

DW: What takeaways come from including art in STEM programs?

JN: I try to show examples of SVG in each of the STEM and STEAM subject fields on my website, STEAMcoded.org. There are plenty of ways to relate art to STEM. I am continually looking for better ways to demonstrate that.

SVG has built-in support for SMIL animation, and students love it. I think animation of the objects in SVG can provide a similar experience to the many STEM robots that are being used. Sometimes animation is just considered cute. At work I animated a generator symbol that spins when online and stops when offline. I thought it was just cute, but the operators really liked it because they could tell at a glance if they had a problem.

I asked the two fourth graders whether they preferred working with SVG or the school’s robots. Both liked SVG more because they could do more. They thought the robots were fun, but there was less they could do with them.

Using SVG as an HMI and linking data to objects that look like the actual machinery is a great application of SVG for STEM. Schools could get real-time data from HVAC systems, electric meters, solar systems, etc. and create their own graphics that update with the data, then put them on their intranet or the internet.

DW: How important has your free eBook Learn SVG Interactively been to the overall success of your work?

JN: Well, the contents of the eBook are what got me started with schools. The book was a result of work I did in 2003 when I showed an eighth-grade algebra class how to use SVG. In two class periods they created art that I show in the book. I used a grid concept to help students see how to position their objects. I use the same concept in all my SVG lessons.

Today, some of the students use the eBook as a syntax reference for what they are creating. The eBook is free but does not get a lot of downloads. It is in Apple’s iBookstore, since Apple allows the publisher to offer the book for free. It is also available for download on my website.

DW: How have your other eBooks helped get your message out?

JN: It helps a little. One school district put the eBooks on all of the school’s iPads. For the most part, I think they appear too technical. I think many teachers see the math and foreign symbols and stay away. They don’t want to do the math or try to learn SVG. Math teachers just don’t have the time with all their teaching requirements.

I get the “I’m not typing all that” reaction a lot. But, once I show them most of the text is copy, paste, and change a coordinate, they are surprised how easy it is.

DW: Did you create the books with open source tools?

JN: No, eBook technology is all web technology, which I code by hand. In fact the International Digital Publishing Forum, which oversees the ePUB standard, just became part of the World Wide Web Consortium (W3C).

Simply stated, each chapter of an eBook is web page. A couple of extra files are included to tell the e-reader what files are included and the order to display them. All the files are then zipped together and the extension changed to .epub. It’s pretty simple, and I think it would be great to create eBooks with teachers, but that is a time-consuming project.

I do, however, use the open source tool provided by Google called ePubCheck to validate .epub files and correct any errors.

DW: What are some important takeaways for schools and students who invite you?

JN: What I’m showing them they can do at home for no cost. Every computer already has everything you need: a simple text editor and a browser. SVG is a language of the web and is something that will be around for a very long time. Most people don’t know about the W3C. If they’ve heard of SVG, they just think it is another image file format.

I am happy to say a few teachers are learning SVG and teaching it. They only contact me when an advanced student needs some help, which I’m happy to do.

DW: Have any of your students shared their SVG creations with OpenClipart.org?

JN: No, not yet. I haven’t pushed that idea, but I like it. School permissions can sometimes hinder such things. In fact, many schools block all clipart sites including OpenClipart.org

DW: Anything else you’d like to share?

JN: I think the most important thing I am teaching the students is how to troubleshoot syntax errors and taking it step by step (edit one line, save, refresh the browser, and correct any errors). I think that alone would have really helped my children with their first coding class.

Also, many schools are using Chromebooks and Google Docs, which embed extra metadata when saved and therefore will not properly display an SVG file from Google Drive; it must be downloaded first. One teacher told me they don’t teach students the basics of file management, so I need to spend extra time making sure they know where they saved their file and how to open it in a browser.

And I am working on some SVG tools that use code to generate code. They are useful for younger students who have not been exposed to trigonometry. It allows them to create stars, polyskelions, and patterns. Here are some: steamcoded.org/StarMaker.svg (the star maker is used in the USA Flag lesson) and http://steamcoded.org/PolyskelionMaker.svg. [You can] look for [more] links on my website soon; the Pattern Maker is almost ready, but not on the website yet.

One more thing. My SVG eBooks are free, but so are the award-winning children’s eBooks written by my wife, Barbara. They are free and available on Apple’s iBookstore and her website.