Gas station without pumps

2018 October 28

Redrawing figure in SVG

Filed under: Circuits course — gasstationwithoutpumps @ 20:18
Tags: , , , , , ,

There is a figure in my book of the cross-section of a power nFET.  Originally, I used a figure from wikimedia:, but I wanted a color version, so I colorized it myself in Inkscape.  Unfortunately, the original SVG was poorly done—it looked like an inkscape conversion of a raster image to paths, which did not result in paths enclosing fillable areas with clean strokes around them, but separate paths filled with black for each stroke.  This made colorizing the image quite difficult.  I did (eventually) manage to make a colorized version, but I’ve never been happy with it.  The file is huge for an SVG file (over 81kB) and difficult to edit.  I’ve been wanting to do it right for some time, and I finally got around to it today.

What I did was to print out the version I’ve been using as a full-page image, then used a ruler to figure out how big each part was.  I then entered SVG code by hand to remake the image. I included comments to describe what each part did and used styles for the different materials, so editing is now easy.  I also made sure that the image is now symmetric and that all the rounded corners have smooth joins to the straight lines (the “q” command in the path “d” attribute makes that fairly easy. The new svg file is only 3425 bytes, even with the comments, and the pdf created from it is only 8kB, instead of 28kB.  Those size changes are not very important (the PDF for the book, after all, is now 25MB, up from 23.7MB last spring), but the image looks better now also. does not let me upload svg files, but you can see the PDF produced from it by inkscape at only lets me upload raster images for display, so I used inkscape to convert the hand-written SVG file to PNG just for this blog. The black line on the right edge seems to have been chopped off in the conversion, though the PDF conversion gets it right.

Here is the PNG generated by inkscape from the SVG file.

I tried uploading the SVG file to Wikimedia Commons, so it could be used on the Wikipedia Power MOSFET page, in place of the black-and-white image, but the uploaded file got rendered as a badly wrong black-and-white PNG file (with all colors converted to black), which is totally useless. I don’t have time to figure out how to tell it to do the conversion correctly, so I just asked them to delete the image again.

Here is the source code for the svg file, which I’m releasing with CC-BY-SA 4.0 (the original on WIkipedia that it was based on was released by Cyril Buttay as CC-BY-SA 3.0).

.label {font: italic 8px sans-serif;}
.super {font: italic 6px sans-serif; }
.arrow {stroke:black; fill:none; stroke-width:1; marker-end:url(#head) }
.wire {stroke:black; fill:none; stroke-width:1;}
.metal {stroke:black; fill:blue; stroke-width:1;}
.Nplus {stroke:black; fill:deeppink; stroke-width:1;}
.Nminus {stroke:black; fill:lightpink; stroke-width:1;}
.Pplus {stroke:black; fill:lightcyan; stroke-width:1;}
.poly {stroke:black; fill:tomato; stroke-width:1;}
.channel{stroke:none; fill:springgreen; stroke-width:1;}

<!-- Drawing the nFET cross-section in layers -->

<!-- the Nminus layer that is the bulk of the FET -->


<!-- the drain including metal layer -->


<!-- the Nplus layer for the drain -->


<!-- left source -->




<!-- right source -->



<!-- gate -->


<!-- channel -->



Blog at

%d bloggers like this: