APEX@IGP
22
SVG Primitives. Polygons
This sample SVG Primitives Polygon library lets you examine the internals and see how hand-crafted SVG can be used for the creation of sophisticated digital education content. Modified: 20 Decmeber 2015
This is a collection of standard polygons that are useful in educational content context. All polygons are based on a 300px diameter circle centered at 200px X 200px on the standard 400px X 400px window.
Do you want to learn how to make great handcrafted SVG?
Visit our new Interactive SVG Tutorial Site here ►.
These were constructed using the standard direct method of creating angle lines and then joining the points created where the construction radius lines intersect the construction circle. This is relatively quick and painless. The construction lines are available in the SVG for the curious.
Production Note on the Layout Graph
Webkit does not support repeating-linear-gradient but does have -webkit-repeating-linear-gradient that uses percentages only in this attribute. The result is you will see a set of blurred lines instead of a grid.
repeating-linear-gradient works reliably in Firefox and IE10. If you want to use this grid technique you will have to use a supporting browser right now.
Because the layout graphs are only normally present in the IGP:Writer authoring mode and not the final output images we haven't bothered with cross-browser adjustments. We just use the right tools for the job!
Equilateral Triangle
Drawn into a 300px diameter circle.
The construction lines are clearly marked in the SVG code (click View the SVG). This can be deleted when an SVG Primitive is being used.
View the SVG
Isoceles Triangle
This isocles triangle was created by skewing and translating the basic equilateral triangle. (Demonstrating the fact the equilateral triangle is "King."
Drawing using angle lines from the center is probably a more practical way to create an isoceles triangle primitive. This means its center is always knows and moving and rotating the shape is trivial.
View the SVG
Scalene Triangle
A scalene triangle is the easiest. Just plop three polygon points down in the required position and you are done.
Because scalene triangles are not symmetrical in an way rotation is arbitrary so building scalene triangles on the circle has no particular value.
This example is built on the same equilateral triangle base because we possibly want to use it in an animation later.
View the SVG
Right Triangle
Drawn into a 300px diameter circle as an equilateral triangle and then skewed on the X-Axis by 30deg for a very nice right triangle. This can be further maniupulated by transforming scale.
In this drawing the original construction lines have no particular value except to demonstrate it did start life as a equilateral triangle.
View the SVG
Square
Drawn into a 300px diameter circle using the svg <rect> shape. This is a very simple shape to work with. Placing it in the circle probably makes it more complex than it needs to be
The construction lines, points and text are clearly marked in the SVG code (click View the SVG). This can be deleted when an SVG Primitive is being used.
View the SVG
Rectangle
Drawn into a 300px diameter circle for consistence using the SVG <rect> shape.
The construction lines are clearly marked in the SVG code (click View the SVG). This can be deleted when an SVG Primitive is being used.
View the SVG
Parallelogram
Drawn into a 300px diameter circle for consistence using the SVG <rect> shape.
The construction lines are clearly marked in the SVG code (click View the SVG). This can be deleted when an SVG Primitive is being used.
View the SVG
Pentagon
Drawn into a 300px diameter circle.
The construction lines are created from the center of the image with 72deg transforms. This direct method is the easiest way to create an accurate polygon. Construction components are clearly marked in the SVG code (click View the SVG). This can be deleted when an SVG Primitive is being used.
View the SVG
Hexagon
Drawn into a 300px diameter circle.
A different construction method was used with the Hexagon. Two circles with tthe same radius as the circle bounding the Hexagon were drawn on each edge of the horizontal center access.
View the SVG
Heptagon
Drawn into a 300px diameter circle.
There is no compass construction method that is completely accurate for a heptagon so the radius lines with rotation transforms of 53.43deg have been used to find the vertices.
View the SVG
Octagon
Drawn into a 300px diameter circle.
The construction lines are clearly marked in the SVG code (click View the SVG). This can be deleted when an SVG Primitive is being used.
View the SVG
Nonagon
Drawn into a 300px diameter circle.
The construction lines are clearly marked in the SVG code (click View the SVG). This can be deleted when an SVG Primitive is being used.
View the SVG
Decagon
Drawn into a 300px diameter circle.
The construction lines are clearly marked in the SVG code (click View the SVG). This can be deleted when an SVG Primitive is being used.
View the SVG
That's all the pentagons folks. It may possibly be the world's most boring collection, but they are are immediately available, ready to work SVG Primitives.
Next we move on to learning how to use these SVG Primitives in "Oh so many ways" to make digital content education books faster and more easily, but more important in a way that can last forever and be forever updated and improved.