2. Core Concepts: Basic Shapes

Now that your environment is set up, let’s dive into the core of SVG: drawing shapes! This chapter will introduce you to the fundamental SVG elements that allow you to create basic geometric forms. Understanding these building blocks is crucial for constructing more complex graphics later on.

2.1 The <svg> Element: The Canvas

Every SVG drawing must be enclosed within an <svg> element. This element acts as the canvas or viewport for your graphics. It defines a coordinate system and a viewport into which the SVG content is drawn.

Key Attributes of <svg>:

• width and height: Define the intrinsic width and height of the SVG viewport. These can be in pixels, percentages, or other CSS units.
• viewBox: This is a powerful attribute that defines the internal coordinate system of the SVG. It takes four numbers: min-x, min-y, width, height.
  • min-x, min-y: The x and y coordinates of the top-left corner of the viewBox.
  • width, height: The width and height of the viewBox. This attribute allows an SVG to scale responsively without needing to adjust the coordinates of individual elements inside it.
• xmlns: (XML Namespace) This attribute xmlns="http://www.w3.org/2000/svg" is essential for browsers to correctly interpret the SVG elements. When embedding SVG directly into HTML5, it’s often optional, but it’s good practice to include it.

Example:

<svg width="200" height="150" viewBox="0 0 200 150">
    <!-- SVG shapes will go here -->
</svg>

In this example, we define an SVG canvas that is 200px wide and 150px tall. The viewBox="0 0 200 150" means that the internal coordinate system also ranges from (0,0) at the top-left to (200,150) at the bottom-right. If we were to change the width and height (e.g., width="100%" height="auto"), the SVG would scale, but the internal elements would still use the 0-200, 0-150 coordinate system.

2.2 <line>: Straight Lines

The <line> element is used to draw a straight line between two points.

Key Attributes:

• x1, y1: The x and y coordinates of the starting point of the line.
• x2, y2: The x and y coordinates of the ending point of the line.
• stroke: The color of the line.
• stroke-width: The thickness of the line.

Example:

<svg width="200" height="100" viewBox="0 0 200 100">
    <!-- A diagonal line from (10,10) to (190,90) -->
    <line x1="10" y1="10" x2="190" y2="90" stroke="red" stroke-width="2" />
</svg>

2.3 <rect>: Rectangles and Squares

The <rect> element draws a rectangle.

Key Attributes:

• x, y: The x and y coordinates of the top-left corner of the rectangle.
• width: The width of the rectangle.
• height: The height of the rectangle.
• rx, ry: (Optional) These attributes control the x-radius and y-radius for rounding the corners of the rectangle. If only rx is specified, ry defaults to rx.

Example:

<svg width="200" height="150" viewBox="0 0 200 150">
    <!-- A blue rectangle -->
    <rect x="20" y="20" width="100" height="50" fill="blue" stroke="black" stroke-width="1" />

    <!-- A green rectangle with rounded corners -->
    <rect
        x="70"
        y="80"
        width="80"
        height="60"
        rx="10"
        ry="10"
        fill="green"
        stroke="darkgreen"
        stroke-width="2"
    />
</svg>

2.4 <circle>: Circles

The <circle> element draws a circle.

Key Attributes:

• cx, cy: The x and y coordinates of the center of the circle.
• r: The radius of the circle.

Example:

<svg width="200" height="150" viewBox="0 0 200 150">
    <!-- A red circle -->
    <circle cx="100" cy="75" r="50" fill="red" stroke="maroon" stroke-width="3" />
</svg>

2.5 <ellipse>: Ellipses

The <ellipse> element draws an ellipse. It’s similar to a circle, but allows independent control over the x and y radii.

Key Attributes:

• cx, cy: The x and y coordinates of the center of the ellipse.
• rx: The x-radius (horizontal radius) of the ellipse.
• ry: The y-radius (vertical radius) of the ellipse.

Example:

<svg width="200" height="150" viewBox="0 0 200 150">
    <!-- A purple ellipse -->
    <ellipse cx="100" cy="75" rx="80" ry="40" fill="purple" stroke="darkblue" stroke-width="2" />
</svg>

2.6 <polygon>: Polygons

The <polygon> element draws a closed shape made of straight line segments. You define each point’s coordinates, and the browser automatically connects the last point back to the first to close the shape.

Key Attribute:

• points: A list of x,y coordinate pairs separated by spaces or commas.

Example:

<svg width="200" height="200" viewBox="0 0 200 200">
    <!-- A yellow triangle -->
    <polygon points="100,20 180,180 20,180" fill="yellow" stroke="orange" stroke-width="4" />

    <!-- A teal pentagon -->
    <polygon
        points="100,20 150,50 150,150 50,150 50,50"
        transform="translate(0, 0)"
        fill="teal"
        stroke="darkcyan"
        stroke-width="2"
    />
</svg>

Note on transform: In the pentagon example, I’ve added transform="translate(0,0)". While it doesn’t change the position in this case, it’s a common practice (often added by vector graphic editors) and introduces the concept of transformations, which we’ll cover in a later chapter. For now, focus on the points attribute.

Exercises/Mini-Challenges

The best way to learn is by doing! Create an index.html and style.css in your project folder, and try to replicate and modify these examples.

1. Traffic Light:

   • Create an SVG that looks like a simple traffic light. It should have a black rectangle for the casing and three circles (red, yellow, green) inside it.
   • Use <rect> for the casing and <circle> for the lights.
   • Experiment with fill colors for the circles.

2. Simple House Icon:

   • Design a basic house icon using a rectangle for the main body and a triangle for the roof.
   • Use <rect> and <polygon> elements.
   • Add a small square for a window.

3. Abstract Art with Lines:

   • Draw at least five different lines using the <line> element.
   • Make them different stroke colors and stroke-width values.
   • Can you make some lines cross each other?

4. Rounded Corners Challenge:

   • Create two rectangles. One should have perfectly rounded (circular) corners, and the other should have elliptically rounded corners (where rx is different from ry). Pay close attention to how rx and ry interact with width and height.