SVG in HTML5

Home / Topic / SVG in HTML5 / Shapes in SVG

Shapes in SVG

In this chapter, we will delve into the basic shapes available in SVG, which are the foundation for building graphics and drawings. SVG offers a variety of geometric shapes that we can combine, transform, and style to create complex graphics.

Basic Shapes in SVG

SVG includes several geometric shapes that we can define using specific tags, each with its attributes to determine position, size, and style. The most common shapes include rectangles, circles, ellipses, lines, and polygons.

Rectangle (`<rect>`)

The <rect> element creates a rectangle in SVG. We can control its size and position using the x, y, width, and height attributes.

html

"This SVG code creates a 160 by 60 pixels rectangle, positioned at 20, 20. It has a blue fill and a black border with a thickness of two pixels."

Circle (`<circle>`)

The <circle> element allows us to create a circle using the cx and cy attributes for the center position and r for the radius.

html

"This code defines a circle in SVG. The center of the circle is at 100, 50 and its radius is 40 pixels. It has a black border and a green fill."

Ellipse (`<ellipse>`)

The <ellipse> element allows us to define an ellipse, similar to the circle, but it allows for different radii on the X and Y axes, which is useful for creating oval shapes.

html

"This SVG code creates an ellipse with a horizontal radius of 80 pixels and a vertical radius of 40 pixels, centered at position 100, 50."

Line (`<line>`)

The <line> element draws a line between two points defined by the x1, y1, x2, and y2 attributes.

html

"In this SVG example, we create a line going from point 10, 10 to point 190, 90. The stroke color is red and it has a thickness of two pixels."

Polygon (`<polygon>`)

The <polygon> element allows us to create shapes with multiple sides by specifying a series of points through the points attribute.

html

"This SVG code creates a triangle. The points of the triangle are specified in the points attribute: 50,10; 90,90; and 10,90. It has an orange fill and a black border."

Polyline (`<polyline>`)

The <polyline> element is similar to <polygon>, but the lines do not connect to the starting point, which is useful for creating open paths or broken lines.

html

"This example uses the polyline element to create a series of connected lines. The connection points are 10,10; 60,90; 110,10; and 160,90. The line is blue and has no fill."

Combining Shapes to Create Complex Graphics

The shapes in SVG can be combined and overlaid to create complex graphics. For example, we can combine several circles, rectangles, and lines to form custom illustrations or diagrams. With the positioning and transformation tools that we will explore in other chapters, you can arrange these shapes in an organized manner and with great precision.

Conclusion

Shapes in SVG are fundamental building blocks for creating vector graphics. By mastering the use of these basic shapes, you can begin to experiment with designs and compositions.

See you in the next chapter!

Back to previous chapter

Mark as read and continue