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 -->



1 Comment »

  1. […] the image. I’m getting a little better at creating SVG files (thanks to the practice for the FET image), but it is still a slow process—not as slow for me as trying to draw with a tool like Inkscape, […]

    Pingback by New book cover draft 2 | Gas station without pumps — 2018 November 17 @ 15:30 | Reply

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Blog at

%d bloggers like this: