Mark Allen Neil photo

Mark Allen

An online résumé, blog, biography and digital sandbox


Using SVG to solve a real-world problem

Posted 2009-10-24 in Technology

Modeling solar cell layouts with SVG

For six months in 2008, I was lucky enough to be the sole software engineer writing all layers of code for a prototype solar cell inspection and repair system. The software solution space was constrained only in that the code needed to be in MATLAB… other than that all choices were up to me. The system was required to locate and repair defects on solar cells… the defects would show up as dark areas in an LBIC image. In these LBIC images, there were two types of dark areas… those which were supposed to be there (expected pattern) and those which weren’t (defects). My challenge was to find a way to differentiate between the two.

Opening disclaimer

I want to begin this article with a disclaimer… I’ve been very careful herein not to reveal any trade secrets… neither those of the employer who hired me to develop the solar inspector, nor any proprietary information concerning a vendor’s solar cell designs. I’m not going to describe the defect detection algorithms herein, rather only stick to how I used SVG to diagram an “ideal” solar cell. Also, the cell shown in this article is completely made-up and doesn’t resemble the cells inspected over the course of the project.

Representing the cell pattern

The top surface of a solar cell is patterned with a grid of silver lines which serve to collect the charge which results when the cell is exposed to light. The solar cells I was given to inspect did not come with CAD data describing this grid, so I resorted to creating my own scheme. Initially I chose XML to describe the layout and patterns on solar cells… I chose XML as I’ve always been a fan of self-describing data… it saves a lot of time if you don’t have to guess what something means. However this scheme quickly proved inadequate for a few reasons:

  1. While the first cell I was given had only Manhattan elements, subsequent cells had more complex structure. Diagonals, arcs, customer logos… creating my own “diagramming language” became impractical.
  2. LBIC scans could be taken in arbitrary resolutions (pixel size) in the X and Y axes. The algorithm to locate defects required bitmaps as input, so I’d need to map the vector description of the cell into a bitmap. Doing so at arbitrary resolution made rolling-my-own solution daunting.

So I began scouring the web for a solution… and found SVG. As I hoped to convey in my last article, SVG is a perfect choice for describing the pattern on solar cells… it has all of the primitives needed to draw arbitrarily complex vector scenes. So problem #1 was solved by using SVG instead of reinventing - with the very nice benefit of having a free viewer for the diagrams themselves… any modern web browser. Score!

Converting SVG into bit-mapped images

Finding a way to convert SVG diagrams into bitmap images at arbitrary resolution took a bit more research. Again searching the web, I found a public domain solution known as Batik. Batik provided me the tools needed:

  • To convert arbitrary ROI (regions of interest) of an SVG diagram into a bit-mapped image.
  • Easily integrate this functionality into my MATLAB application… as Batik is in Java and MATLAB partners well with Java.

A solar cell drawn with SVG

So without further ado, the following is a solar cell rendered using SVG. A reminder: This drawing is a fictional solar cell layout which intentionally does not resemble any of the cells I processed while executing my contract in 2008. If interested in the SVG, download the following: FakeSolarCell.svg.

SVG rendering of Solar Cell

Diagram details

  • The dimensions in the file are true units… this is very important in systems modeling real-life items. In this case having actual distances enabled automating the inspection system without arbitrary conversions.
  • The SVG file contains some simple ECMAScript to hide the grid pattern whenever the mouse hovers over the cell. I implemented this to illustrate that the SVG file uses multiple layers to describe the cell… the substrate layer and the pattern layer. There were use-cases where I wanted only the substrate layer to show up in bitmap rendered drawings used in my image processing routines, so I needed to be able to selectively show layers.
  • There is a “meta data” section in the file which contains the parametric information which was used to generate the SVG file from MATLAB. I’m a big fan of DRY, so it made sense to colocate the meta data and diagram… as they are basically different views of the same information.
  • The “Cell” is comprised of two layers… a “Substrate” which is a blue-filled 8-sided region comprised of straight and curved lines… and a “Pattern” which is the Manhattan grid of silver lines which collect the charge from the top surface of the cell.

Applying Batik

As touched on earlier, I used Batik to convert ROI at defined resolutions into bit-mapped images… to be used during the image processing steps to differentiate between defects and expected pattern. I’ve created an example below where an ROI of roughly 16x29mm at the upper-right of the solar cell is converted to a bitmap image at 20um resolution… yielding an image of 794x1429 pixels. I intentionally create a gray-scale bitmap image as this is what the image processing routine requires. The “blue” color in the original is merely aesthetic license… as solar cells appear to be blue in color.

SVG rendering of Solar Cell (with ROI)

Batik generated bitmap of ROI


I’ve talked about I was able to successfully use SVG (coupled with Batik) for image synthesis in a commercial tool. It is difficult to estimate just how much development time I saved using SVG instead of reinvention… at least weeks, perhaps months. Each cell type we examined presented new challenges… challenges easily met by the intrinsics already supported in SVG. It always pays to do a bit of research and see if there is an OTS solution available. In the end, customers don’t so much care how much work you do yourself… rather they are interested in timely, quality solutions. Intelligent reuse is often the difference between success and failure.

Website Credits | Symphony | Fluid 960 Grid System