Frontory

Open code, practice, and notes →

Download source with English comments · for reading

SVG · 02 Basic Shapes and Attributes

Series contents · Technology map

Stage: Vector Paths and Coordinates · Editable example · Storage ID: svg-step-02

Goals and learning outcomes

Prerequisites

Prerequisite concepts: User coordinates, Preserving proportions. Prepare the result files and observation records from Unit 1.

Key concepts and explanations

Geometry attributes

The x,y,width,height of rect determine the shape's position and size. Distinguish their roles from CSS layout properties.

Fill and stroke

fill paints the interior and stroke draws the outline. Setting fill to none can still leave the stroke visible.

Practice setup

First check the execution scope guidance on the example screen. The following describes preparation for extending the assignment in a separate project. Implement this yourself in an HTML and ES module project on a separate local HTTP development server. Record the browser version, viewport, and DPR.

The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.

Practice tasks

  1. Prepare day-02.js and index.html in an external practice project. Arrange rect,circle,ellipse with different fill and stroke values.
  2. Change radius and stroke-width through an input form, and display the actual attribute values in output.
  3. Save the output under the input condition 1, then run again with 12. Compare the hypothesis, "The outline becomes thicker on both sides of the shape boundary," against the display and logs, and record the actual result and the causes of any differences in day-02-notes.md.

Variables to observe

VariableBaselineChangeExpected change / hypothesis
stroke-width112The outline becomes thicker on both sides of the shape boundary

Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.

Completion criteria

Self-check

  1. Why is stroke also drawn outside the shape?
  2. Do a transparent fill and none behave the same for input?

Official references

Linked example and execution scope

Example source · Runtime environments and limits

An editable browser experiment. Measurements vary with the current device and browser.

Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.

Next learning

Previous: viewBox and Vectors · Next: Path Commands and Closing Paths

Open code, practice, and notes →