Klin Zha SVG Board Generator

Main Page > SVG > Board Generator > Board Math

SVG is composed of vectors, each of which can have a fill and stroke. These each have properties, such as color, opacity, etc.

This PNG image was created from an SVG that specified a four inch yellow triangle and a half inch black border. I converted that to the png, added a white line at the actual edge of the triangle, and modified the corners to show the points discussed below.

The goal is to be able to specify a total size and border width, and work out the real size needed to be specified. So if I asked for a four inch yellow triangle with a half inch border, I would expect the bottom border of the triangle to be four inches long (in the one above, it's 4.87 inches).

Looking at the bottom border, the black portion is four inches, its the border that surrounds the corners of the triangle that stretch the bottom out; looking at either bottom corner, we can see the green line cuts the corner angle in half, and the red edge is perpendicular to the bottom edge, so the triangle is a 30-60-90 triangle where the short (red) side is half the border width. The long side of a 30-60-90 triangle is twice the length of the short side, so the green line is equal to the border width and the blue edge on the bottom is .866 * X, where .866 happens to be the cosine of thirty degrees, and X is the length of the green side (which is the border width). We have one on the left size and one on the right side, so that actual length of the base of an SVG triangle with a base T wide and a border W wide would be:
L = T + .866 * W + .866 * W
L = T + 1.732 * W
So for our triangle, that works out to 4 + 1.732*.5 which is 4.866

For the triangle above, we specified T; the way we want to get the triangle is to specify L and W, then solve for T:

T = L - 1.732 * W
is the width of the base of the equilateral triangle we need to request so that the bordered triangle SVG creates has a base width of L.

To get the height of the triangle we need to request, multiply the base by 0.866:

H = T * 0.866
Now that we have the height and width, the only thing left is where to place it; if we want the apex of the triangle to be at 1000,0 for example, the 1000 is fine (the bisector of the unbordered triangle and the bisector of the bordered triangle is the same), but the 0 is too high (it will clip off half of the top border). The distance from the top of the desired apex to the top of the real apex is the green line that borders the triangle in the top, which is our border width (.5 inches in this case). In this SVG image, we scaled it to 500 units per inch, so the top point we need to specify is 1000,250.

This gives us all the information we need to create a board of any size, which is what the board generator form does.

Additionally, the board generator determines a scaling percentage for the pieces provided here. We determine that value based on the size in pixels of the bottom of the yellow triangle in the image above. The method is the same as we show for the white lined triangle, except the 30-60-90 triangle will be twice as tall, hence twice as long; so the size of the yellow base is:

LY = T + 1.732 * W + 1.732 * W
L = T + 3.464 * W
so the yellow bottom is 3.134 inches; given that all the svg pieces on this site have been sized so that the default view fits in a triangle with a 17.64 inch base, to fit this triangle the pieces would have to be scaled to 19.64 percent of there original size, I would recommend 19.5 instead to give a little 'wiggle' room.