SVG Essentials: Mastering Shapes, Coordinates, and Styling

The Anatomy of an SVG

SVG stands for Scalable Vector Graphics. Unlike pixel-based raster images (like PNG or JPG), which are grids of colored dots, an SVG is an XML-based document that describes shapes mathematically. Because they are code, SVGs are:

• Resolution Independent: They look razor-sharp on a 4K monitor or a mobile screen because the browser "redraws" the math at any scale.
• DOM-Friendly: Every shape is an element you can target with CSS or JavaScript.
• Performant: Usually much smaller in file size than high resolution bitmaps, especially for icons and flat illustrations.

SVGs are commonly used for web icons, illustrations, and data visualizations.

The Coordinate System

The SVG "canvas" starts at the top-left corner (0,0). This is often the first hurdle for designers used to traditional Cartesian math graphs where the Y-axis increases upward. SVG instead follows the same convention as CSS and HTML:

• X-axis: Increases as you move right.
• Y-axis: Increases as you move downward.

Think of it like reading a book: you start at the top-left and move right across the page and down the lines.

The viewBox: Understanding "User Units"

One of the most powerful features of SVG is that its internal coordinates are unitless. This is where the concept of User Units comes in.

When you write viewBox="0 0 100 100", you aren't defining pixels, inches, or centimeters. You are defining a virtual coordinate grid. You are telling the browser: "Within this image, the grid is exactly 100 units wide and 100 units tall."

Whether the SVG is displayed as a tiny 16px icon or a massive 1920px hero background, a circle at cx="50" will always stay exactly in the middle of that coordinate grid, because the browser scales those 100 units proportionally to fit the available space.

How and Why SVG Scales Automatically

The key idea to understand is this:

When you define a viewBox, you are creating a virtual drawing grid. For example:

<svg viewBox="0 0 100 100">

This tells the browser that everything inside the SVG lives in a coordinate space that is 100 units wide and 100 units tall. These units are not pixels — they are simply positions on a grid.

What the Browser Actually Does

Think of the viewBox as a blueprint and the SVG's width and height as the frame you place it in.

1. The viewBox defines what exists in the drawing → a 100 × 100 coordinate system.
2. The width and height define how large it appears on the page → for example, 50px × 50px or 400px × 400px.
3. The browser scales the entire coordinate system proportionally to fit that space.

Every unit expands or shrinks by the same ratio.

Why the Center Always Stays the Center

If the coordinate grid runs from 0 to 100 in both directions:

• 50 is always the midpoint
• 25 is always one quarter
• 75 is always three quarters

So a shape placed at:

<circle cx="50" cy="50" />

will remain perfectly centered regardless of how large or small the SVG is rendered — because the browser rescales the entire coordinate system, not individual elements.

A Helpful Mental Model

Think of SVG as graph paper printed on a stretchable sheet:

• The grid stays consistent
• The sheet stretches to fit its container
• All shapes scale together and keep their proportions

This is what makes SVG graphics resolution-independent.

The viewBox (Canvas) vs. Viewport (Window)

To master SVG, you must understand the distinction between these two layers:

The Viewport (width & height): This is the "window" on the webpage. It defines how much physical space the SVG occupies in the browser layout (usually measured in px, rem, or %).

The viewBox: This is the "canvas" or the coordinate system. It defines which part of the drawing is visible through the window.

<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" />
</svg>

What if the Aspect Ratios Don't Match?

If your viewBox is a square (100 × 100) but your width and height define a rectangle (400 × 200), the browser has to decide how to fit the content.

By default, SVG uses an attribute called preserveAspectRatio="xMidYMid meet". This ensures the entire shape is visible and centered without being distorted (like a "contain" setting in CSS).

Basic Shapes

Before moving on to more advanced curve-drawing tools, you must first master these six basic shape elements. Think of these as the building blocks that help you understand coordinate math before you start drawing custom curves.

Lines

The simplest shape. It draws a straight line between two points.

• x1, y1: Starting point of the line.
• x2, y2: Ending point of the line.

Each pair defines a coordinate in the SVG space, and the browser draws a straight line between them.

<svg viewBox="0 0 100 100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="#6366f1" stroke-width="2" stroke-linecap="round" />
</svg>

<svg viewBox="0 0 100 100" width="240" height="240">
  <!-- Shape: a line connects two points, (x1, y1) → (x2, y2). -->
  <line x1="10" y1="10" x2="90" y2="90" stroke="#6366f1" stroke-width="2" stroke-linecap="round" />

  <!-- Guidelines: trace the bounding box between the two endpoints. -->
  <line x1="10" y1="10" x2="90" y2="10" stroke="var(--color-border-default)" stroke-width="0.5" stroke-dasharray="2 2" opacity="0.5" />
  <line x1="90" y1="10" x2="90" y2="90" stroke="var(--color-border-default)" stroke-width="0.5" stroke-dasharray="2 2" opacity="0.5" />

  <!-- Guide points: (x1, y1) and (x2, y2). -->
  <circle cx="10" cy="10" r="3" fill="#6366f1" opacity="0.2" />
  <circle cx="10" cy="10" r="2" fill="#6366f1" />
  <circle cx="90" cy="90" r="3" fill="#6366f1" opacity="0.2" />
  <circle cx="90" cy="90" r="2" fill="#6366f1" />
</svg>

Rectangles

Draws rectangles and squares.

• x: Horizontal position of the rectangle's top-left corner.
• y: Vertical position of the rectangle's top-left corner.
• width: The horizontal size of the rectangle.
• height: The vertical size of the rectangle.
• rx, ry (Optional): Control the horizontal and vertical corner radius. Setting either one rounds the corners — if you only set rx, the browser mirrors it to ry (and vice versa).

<svg viewBox="0 0 100 100">
  <rect x="15" y="15" width="70" height="50" fill="#6366f1" fill-opacity="0.2" stroke="#4338ca" stroke-width="2" />
</svg>

Rounded version:

<svg viewBox="0 0 100 100">
  <rect x="15" y="15" width="70" height="50" rx="35" ry="25" fill="#6366f1" fill-opacity="0.2" stroke="#4338ca" stroke-width="2" />
</svg>

<svg viewBox="0 0 100 100" width="240" height="240">
  <!-- Shape: a rectangle starts at (x, y) and extends by width × height. -->
  <!-- rx and ry round the horizontal and vertical corners. -->
  <rect x="15" y="15" width="70" height="50" rx="10" ry="10" fill="#6366f1" fill-opacity="0.2" stroke="#4338ca" stroke-width="2" />

  <!-- Guidelines: mark the width and height, offset outside the rectangle. -->
  <line x1="15" y1="9" x2="85" y2="9" stroke="var(--color-border-default)" stroke-width="0.5" stroke-dasharray="2 2" opacity="0.5" />
  <line x1="91" y1="15" x2="91" y2="65" stroke="var(--color-border-default)" stroke-width="0.5" stroke-dasharray="2 2" opacity="0.5" />

  <!-- Guide points: the (x, y) anchor and the derived (x + width, y + height) corner. -->
  <circle cx="15" cy="15" r="3" fill="#4338ca" opacity="0.2" />
  <circle cx="15" cy="15" r="2" fill="#4338ca" />
  <circle cx="85" cy="65" r="3" fill="#4338ca" opacity="0.2" />
  <circle cx="85" cy="65" r="2" fill="#4338ca" />
</svg>

Unlike most of the attributes above, rx and ry come with a real geometric limit that's worth understanding in more depth.

Rectangle Corner Radii: rx and ry

For a <rect>, the corner radii describe how far the rounded corners extend horizontally and vertically.

• rx controls the horizontal radius of the rounded corners.
• ry controls the vertical radius of the rounded corners.
• rx cannot effectively exceed half of the rectangle's width.
• ry cannot effectively exceed half of the rectangle's height.

For example, with:

<rect x="15" y="15" width="70" height="50" rx="35" ry="25" />

The maximum effective values are:

rx = width / 2  = 70 / 2 = 35
ry = height / 2 = 50 / 2 = 25

If a larger value is provided, SVG scales the corner radii down proportionally when necessary so that the rounded corners fit within the rectangle.

Negative Radii Are Not Valid

rx and ry cannot be negative — negative radii are invalid geometry values.

Circles

Defined using a center point and a radius.

• cx (Center X): The horizontal position of the circle's center within the SVG coordinate system.
• cy (Center Y): The vertical position of the circle's center within the SVG coordinate system.
• r (Radius): The distance from the center point to the circle's edge. This value determines the overall size of the circle and is measured in user units defined by the viewBox.

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="30" fill="#f43f5e" fill-opacity="0.2" stroke="#be123c" stroke-width="2" />
</svg>

<svg viewBox="0 0 100 100" width="240" height="240">
  <!-- Shape: a circle is defined by its center point (cx, cy) and radius r. -->
  <circle cx="50" cy="50" r="30" fill="#f43f5e" fill-opacity="0.2" stroke="#be123c" stroke-width="2" />

  <!-- Guidelines: a dashed radius guide reaching from the center to the edge. -->
  <line x1="50" y1="50" x2="80" y2="50" stroke="var(--color-border-default)" stroke-width="0.5" stroke-dasharray="2 2" opacity="0.5" />

  <!-- Guide points: the center and the point r units to its right. -->
  <circle cx="50" cy="50" r="3" fill="#be123c" opacity="0.2" />
  <circle cx="50" cy="50" r="2" fill="#be123c" />
  <circle cx="80" cy="50" r="3" fill="#be123c" opacity="0.2" />
  <circle cx="80" cy="50" r="2" fill="#be123c" />
</svg>

A rectangle's rx/ry are capped at half of the rectangle's own width/height — but a circle's r has no equivalent per-shape cap at all. It can be any positive number, and the circle can extend beyond the visible viewBox.

For example:

<circle cx="50" cy="50" r="80" />

is valid geometry. The circle is simply larger than the visible 100 × 100 coordinate region, so part of it may lie outside the visible area.

A negative r is invalid geometry.

Ellipses

Like a circle, but you can define a different radius for width and height.

• cx, cy: The center point of the ellipse.
• rx: Horizontal radius (half the width).
• ry: Vertical radius (half the height).

<svg viewBox="0 0 100 100">
  <ellipse cx="50" cy="50" rx="40" ry="25" fill="#ec4899" fill-opacity="0.2" stroke="#be185d" stroke-width="2" />
</svg>

<svg viewBox="0 0 100 100" width="240" height="240">
  <!-- Shape: an ellipse uses two radii, rx for horizontal size and ry for vertical size. -->
  <ellipse cx="50" cy="50" rx="40" ry="25" fill="#ec4899" fill-opacity="0.2" stroke="#be185d" stroke-width="2" />

  <!-- Guidelines: separate dashed guides for rx and ry, reaching from the center to each edge. -->
  <line x1="50" y1="50" x2="90" y2="50" stroke="var(--color-border-default)" stroke-width="0.5" stroke-dasharray="2 2" opacity="0.5" />
  <line x1="50" y1="50" x2="50" y2="75" stroke="var(--color-border-default)" stroke-width="0.5" stroke-dasharray="2 2" opacity="0.5" />

  <!-- Guide points: the center and the rx/ry edge points. -->
  <circle cx="50" cy="50" r="3" fill="#be185d" opacity="0.2" />
  <circle cx="50" cy="50" r="2" fill="#be185d" />
  <circle cx="90" cy="50" r="3" fill="#be185d" opacity="0.2" />
  <circle cx="90" cy="50" r="2" fill="#be185d" />
  <circle cx="50" cy="75" r="3" fill="#be185d" opacity="0.2" />
  <circle cx="50" cy="75" r="2" fill="#be185d" />
</svg>

A <rect>'s rx/ry are capped at half of its own width/height — an <ellipse>'s rx and ry have no such per-shape cap.

For example:

<ellipse cx="50" cy="50" rx="80" ry="60" />

is valid even though the radii extend beyond a 100 × 100 viewBox.

The useful relationships to remember are:

width  = 2 × rx
height = 2 × ry

and:

rx = horizontal radius
ry = vertical radius

Negative radius values are invalid geometry.

Polylines

A series of connected straight lines. It is an open shape (the last point does not automatically connect to the first).

• points: A sequence of coordinate pairs that define the vertices of the shape (see The Points List Syntax).

<svg viewBox="0 0 100 100">
  <polyline points="20,80 50,20 80,80" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>

<svg viewBox="0 0 100 100" width="240" height="240">
  <!-- Shape: a polyline connects multiple points but does not automatically close the final segment. -->
  <polyline points="20,80 50,20 80,80" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />

  <!-- Guide points: one marker per vertex from the points list. -->
  <circle cx="20" cy="80" r="3" fill="#10b981" opacity="0.2" />
  <circle cx="20" cy="80" r="2" fill="#10b981" />
  <circle cx="50" cy="20" r="3" fill="#10b981" opacity="0.2" />
  <circle cx="50" cy="20" r="2" fill="#10b981" />
  <circle cx="80" cy="80" r="3" fill="#10b981" opacity="0.2" />
  <circle cx="80" cy="80" r="2" fill="#10b981" />
</svg>

Key notes:

• Each coordinate pair is separated by space or comma.
• The shape does not close automatically.
• Use when you want continuous open lines (charts, graphs, routes).

Polygons

Exactly like a polyline, but it is a closed shape. The browser automatically draws a line from the last point back to the first.

• points: A sequence of coordinate pairs that define the vertices of the shape (see The Points List Syntax).

<svg viewBox="0 0 100 100">
  <polygon points="50,15 85,85 15,85" fill="#f59e0b" fill-opacity="0.2" stroke="#b45309" stroke-width="2" stroke-linejoin="round" />
</svg>

<svg viewBox="0 0 100 100" width="240" height="240">
  <!-- Shape: a polygon connects multiple points and automatically closes the shape. -->
  <polygon points="50,15 85,85 15,85" fill="#f59e0b" fill-opacity="0.2" stroke="#b45309" stroke-width="2" stroke-linejoin="round" />

  <!-- Guide points: one marker per vertex, including the last one the browser auto-connects back to the first. -->
  <circle cx="50" cy="15" r="3" fill="#b45309" opacity="0.2" />
  <circle cx="50" cy="15" r="2" fill="#b45309" />
  <circle cx="85" cy="85" r="3" fill="#b45309" opacity="0.2" />
  <circle cx="85" cy="85" r="2" fill="#b45309" />
  <circle cx="15" cy="85" r="3" fill="#b45309" opacity="0.2" />
  <circle cx="15" cy="85" r="2" fill="#b45309" />
</svg>

Key notes:

• Always closed → useful for polygons (triangles, hexagons, stars).

• The order of points matters:

  • Clockwise → fills normally.
  • Counter-clockwise → may invert fills depending on fill-rule.

For a deeper look at fill-rule, winding order, self-intersecting shapes, and finishing off sharp corners with stroke-linejoin and stroke-miterlimit, see SVG Polygon vs Polyline: Differences, Fill Rules, and Use Cases.

The Points List Syntax

Now that you've seen polyline and polygon in action, it's worth looking closer at the shared points list syntax both shapes use to define their geometry.

A points list is a series of numbers that define coordinate pairs:

• Each number may be separated by whitespace, a comma, a line break (EOL), or any combination of these.

• Each point consists of exactly two numbers:

  • first: x coordinate
  • second: y coordinate

For example, the points (0,0), (1,1), and (2,2) may be written as:

0,0 1,1 2,2

or equivalently:

0, 0 1, 1 2, 2

How Many Numbers Belong to a Point?

A points list is interpreted as a sequence of X/Y pairs. In other words:

x1,y1 x2,y2 x3,y3 ...

Each complete pair defines one point in the SVG user coordinate system.

For example:

<polyline points="20,80 50,20 80,80" />

represents these three points:

(20, 80)
(50, 20)
(80, 80)

An odd number of coordinates leaves a trailing value with no partner to pair with — per spec, that's a malformed points list, so the browser treats the whole element as in error and doesn't render it at all, rather than dropping just the dangling number. Keeping every point as an explicit X/Y pair makes the markup much easier to read and reason about, and keeps you from tripping over that failure mode.

👉 This is the same three-point polyline from the interactive playground above — drag its points around to see each X/Y pair move independently.

Geometry Rules at a Glance

The six basic shapes are much easier to remember when you reduce their geometry to a few rules:

Styling and Visual Attributes

One of the most powerful aspects of SVG is that it lives directly in the DOM. This means you aren't stuck with hard-coded values; you can style shapes using attributes directly on the element, or via external CSS for a cleaner separation of concerns.

Presentation Attributes vs. CSS

In the SVG world, properties such as fill and stroke are technically presentation attributes. While they look like HTML attributes, they actually behave like low-priority CSS rules — notice that every attribute below is spelled identically to its CSS property, so nothing new to memorize once you know one form.

Rather than read these in isolation, try them out — every field below feeds straight into the shape, and the generated markup updates live underneath:

<svg viewBox="0 0 100 100" width="240" height="240">
  <!-- Shape: a fixed zigzag whose presentation attributes the controls above edit. -->
  <polygon points="10,80 30,20 50,80 70,20 90,80" fill="#6366f1" fill-opacity="0.3" stroke="#4338ca" stroke-opacity="1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />

  <!-- Guide points: the five fixed vertices from the points list. -->
  <circle cx="10" cy="80" r="4" fill="#4338ca" opacity="0.2" />
  <circle cx="10" cy="80" r="3" fill="#4338ca" />
  <circle cx="30" cy="20" r="4" fill="#4338ca" opacity="0.2" />
  <circle cx="30" cy="20" r="3" fill="#4338ca" />
  <circle cx="50" cy="80" r="4" fill="#4338ca" opacity="0.2" />
  <circle cx="50" cy="80" r="3" fill="#4338ca" />
  <circle cx="70" cy="20" r="4" fill="#4338ca" opacity="0.2" />
  <circle cx="70" cy="20" r="3" fill="#4338ca" />
  <circle cx="90" cy="80" r="4" fill="#4338ca" opacity="0.2" />
  <circle cx="90" cy="80" r="3" fill="#4338ca" />
</svg>

The Specificity Rule

If you define a fill="red" attribute on a circle, but your CSS file says circle { fill: blue; }, the circle will be blue. CSS will always override presentation attributes.

Refining the "Stroke" Look

To make your vectors look professional and "app-like," you need to control how lines end and how they connect at corners.

1. stroke-linecap

This defines how the ends of a line or an open path are rendered.

• butt: The default. Ends abruptly at the coordinate.
• round: Adds a semi-circle cap, making the line look softer.
• square: Adds a square cap that extends slightly past the coordinate.

<svg viewBox="0 0 150 60" width="375" height="150">
  <g transform="translate(0,15)">
    <line x1="10" y1="0" x2="110" y2="0" stroke="#6366f1" stroke-width="6" stroke-linecap="butt" />
    <text x="118" y="3" font-size="6" fill="currentColor">butt</text>
  </g>
  <g transform="translate(0,30)">
    <line x1="10" y1="0" x2="110" y2="0" stroke="#6366f1" stroke-width="6" stroke-linecap="round" />
    <text x="118" y="3" font-size="6" fill="currentColor">round</text>
  </g>
  <g transform="translate(0,45)">
    <line x1="10" y1="0" x2="110" y2="0" stroke="#6366f1" stroke-width="6" stroke-linecap="square" />
    <text x="118" y="3" font-size="6" fill="currentColor">square</text>
  </g>
</svg>

👉 Try this hands-on in the interactive playground above — the stroke-linecap control cycles through all three, but toggle Closed shape (polygon) off first, since a closed shape has no open ends to cap.

2. stroke-linejoin

This defines the shape of the corners where two line segments meet.

• miter: A sharp, pointed corner (default).
• round: A smooth, curved corner.
• bevel: A flat, "sliced-off" corner.

<svg viewBox="0 0 150 70" width="450" height="210">
  <g>
    <polyline points="10,45 25,10 40,45" fill="none" stroke="#10b981" stroke-width="6" stroke-linejoin="miter" />
    <text x="25" y="63" font-size="6" text-anchor="middle" fill="currentColor">miter</text>
  </g>
  <g transform="translate(50,0)">
    <polyline points="10,45 25,10 40,45" fill="none" stroke="#10b981" stroke-width="6" stroke-linejoin="round" />
    <text x="25" y="63" font-size="6" text-anchor="middle" fill="currentColor">round</text>
  </g>
  <g transform="translate(100,0)">
    <polyline points="10,45 25,10 40,45" fill="none" stroke="#10b981" stroke-width="6" stroke-linejoin="bevel" />
    <text x="25" y="63" font-size="6" text-anchor="middle" fill="currentColor">bevel</text>
  </g>
</svg>

👉 Try this hands-on in the interactive playground above — the stroke-linejoin control cycles through all three on a live corner.

CSS-Only Styles & Interactivity

Some effects can only be achieved — or are much easier to manage — through CSS. This is where SVG truly shines for UI design, allowing for transitions and hover states. A heart icon that gently scales when you hover it, a sun icon that rotates and grows, and a radar sweep that rotates and pulses forever without any trigger at all are all built from the exact same shapes and presentation attributes you just learned — styled with a <style> block, :hover, and a couple of CSS animation properties.

For the full walkthrough — the transform-origin and transform-box: fill-box mechanics in depth, when to reach for a transition versus a @keyframes animation, and a stroke-dasharray line-draw effect — see Animating SVG: A Guide to CSS Transitions and Keyframes.

Making SVGs Accessible

SVGs are code, not just images. This gives us a huge advantage for accessibility. To ensure screen readers can describe your graphic, always include a <title> as the first child of your <svg> tag.

<svg viewBox="0 0 100 100" role="img">
  <title>A blue circle representing a planet</title>
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Not every SVG carries information, though. A decorative icon sitting next to a text label (like a search icon inside a "Search" button) says nothing a screen reader needs to announce twice. For those, skip the <title> and hide the graphic from assistive tech entirely instead:

<svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
  <circle cx="50" cy="50" r="40" fill="currentColor" />
</svg>

Wrapping Up

In this post, we've laid the groundwork for building professional, resolution-independent graphics. By mastering the basics, you've moved past "copy-pasting" SVG code to actually understanding how it works:

• Coordinate Logic: You now know that the SVG world starts at the top-left (0,0) and that the Y-axis moves downward.
• The viewBox vs. Viewport: You've mastered the distinction between the physical "window" (pixels) and the internal "canvas" (user units).
• Basic Shapes: You can now construct layouts using the six core elements: lines, rectangles, circles, ellipses, polylines, and polygons.
• Geometry Rules: You now know that rectangle corner radii are effectively limited by half the rectangle's width and height, while circle and ellipse radii can extend beyond the visible viewBox.
• Points Lists: You understand that polyline and polygon use ordered X/Y coordinate pairs and that polygon automatically closes the final segment — SVG Polygon vs Polyline picks up from here with fill-rule, joins and caps, and real-world use cases.
• Styling & Interactivity: You understand how to use fill and stroke and why transform-origin is critical when animating SVG elements with CSS — Animating SVG: A Guide to CSS Transitions and Keyframes picks up from here with transition vs @keyframes, transform-box: fill-box, and stroke-dasharray line-draw effects.
• Accessibility: You've learned to label meaningful graphics with <title> and role="img", and to hide purely decorative ones with aria-hidden="true".