SVG Experimentation
I spent a couple of hours today playing with an SVG file. For those of you who do not know, svg files are images that can be edited in a text editor. SVG files are crisp and clean at any scale. The file above was created in a text editor and in the original iteration was somewhere between 50 and 75 lines of code.
Originally, everything was plotted out by starting a line at a point and ending it at another point. Long, boring, tedious and mind numbing was that procedure. If I had to draft cabinet plans that way all the time I might have to quit my job or take up heavy drinking.
A few months ago when I started learning about SVG, or at least the syntax of it, I discovered the <path> element. I also discovered that MDN is about as clear as mud on some things. While I did played around with <path> a few months ago I did not really understand much of what I was doing.
I looked at my 60-odd lines of code today and said there simply has to be a better way to do this. So to Google I ventured and after a couple of other fruitless pages I found this wonderful page by Chris Coyier. About a 1/4 of the way down the page is a table that clearly explains in about 100 words what MDN couldn't explain in a few hundred words on their site.
I experimented with
At the end of it all today I probably can cut the time it takes to draw a cabinet in a text editor in half and my 60-odd lines of code was reduced to 24 lines AND 8 of those lines are comment lines and 2 more lines (the circles) are wholly unecessary. So, for what is in this picture there are only 14 lines of code and that can be reduced as well.
For those curious here is the code:
<svg viewBox="0 0 232 232" xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="0" width="132" height="139
" fill="white" stroke="black" stroke-width="1" />
<g stroke="black" fill="white" stroke-width="0.5">
<!-- upper unit top -->
<path d="M 222 10 h -96 L 116.9 19.1 h 96 z" />
<!-- backsplash -->
<path d="M 126 76 h 96 v -30 h -96 v 30" />
<!-- upper unit front -->
<path d="M 116.9 19.1 v 36 h 96 v -36" />
<!-- upper unit left side -->
<path d="M 222 10 v 36 l -9.1 9.1 v -36 l 9.1 -9.1" />
<path d="M 126 76 v 0 36 h 0 96 v 0 -36 z" />
<!-- backsplash -->
<circle cx="222" cy="46" r="1" fill="red" />
<circle cx="126" cy="76" r="1" fill="green" />
<!-- 3 edges of counter top -->
<path d="M 126 76 l -16.97 16.97 h 96 l 16.97 -16.97" />
<!-- front of cabinet -->
<path d="M 109.03 92.97 v 36 h 96 v -36 " />
<!-- right side of cabinet -->
<path d="M 222 76 v 36 L 205.03 128.97 v -36 z" />
</g>
</svg>
Home