Basic Shapes in SVG

SVG (Scalable Vector Graphics) allows you to create various basic shapes, including rectangles, circles, ellipses, lines, and polygons. These shapes can be customized with attributes such as size, position, color, and stroke. Here's how to create basic shapes in SVG:

1. Rectangle

To draw a rectangle in SVG, use the <rect> element and specify its width, height, position (x and y), and optional attributes like fill color and stroke.

Example:

<svg width="200" height="100">
  <rect x="50" y="20" width="100" height="50" fill="blue" stroke="black" />
</svg>

2. Circle

To draw a circle in SVG, use the <circle> element and specify its center coordinates (cx and cy) and radius (r), along with optional attributes like fill color and stroke.

Example:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" stroke="black" />
</svg>

3. Ellipse

To draw an ellipse in SVG, use the <ellipse> element and specify its center coordinates (cx and cy), radii (rx and ry) for the x and y axes, and optional attributes like fill color and stroke.

Example:

<svg width="200" height="100">
  <ellipse cx="100" cy="50" rx="80" ry="30" fill="green" stroke="black" />
</svg>

4. Line

To draw a line in SVG, use the <line> element and specify the coordinates of its start and end points (x1, y1, x2, y2), along with optional attributes like stroke color and width.

Example:

<svg width="200" height="200">
  <line x1="50" y1="50" x2="150" y2="150" stroke="blue" stroke-width="2" />
</svg>

5. Polygon

To draw a polygon in SVG, use the <polygon> element and specify the coordinates of its vertices, separated by spaces. Optionally, you can specify attributes like fill color and stroke.

Example:

<svg width="200" height="200">
  <polygon points="100,20 40,180 190,60" fill="yellow" stroke="black" />
</svg>

6. Conclusion

SVG provides a convenient way to create basic shapes for use in web development. By utilizing elements like <rect>, <circle>, <ellipse>, <line>, and <polygon>, you can easily create customizable and scalable graphics for your web applications.

Archive