SVG Basics: What Is SVG and Why Do You Need It?

SVG (Scalable Vector Graphics) is a text-based format for describing shapes, paths, colors, and other drawing instructions. Because the browser renders those instructions at the requested size, SVG is a useful choice for logos, interface icons, diagrams, and illustrations that need to remain editable.

This guide covers the parts of SVG that are most useful in day-to-day work: the viewBox, basic shapes, styling, accessibility, and the trade-offs between SVG and raster images. Each example can be pasted into SVGDO or another browser-based editor and inspected as source code.

What an SVG file contains

An SVG document is XML with an <svg> root element. The viewBox defines the document's internal coordinate system, while width and height control its initial display size.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
     role="img"
     aria-labelledby="title desc">
  <title id="title">A red circle</title>
  <desc id="desc">A red circle with a dark outline.</desc>
  <circle cx="50" cy="50" r="40" fill="#ef4444" stroke="#1f2937" stroke-width="4" />
</svg>

The circle stays mathematically defined when the image is displayed at 24 pixels or 240 pixels. It is not a guarantee that every SVG is small or fast: embedded photos, filters, and thousands of path nodes can still create a large file and a heavy render workload.

The coordinate system and viewBox

The four numbers in viewBox="minX minY width height" describe the coordinate system used by the shapes. A viewBox="0 0 100 100" gives the drawing a 100 by 100 logical canvas. CSS can then size the outer SVG without rewriting every coordinate.

Common viewBox problems include:

• A shape is clipped because its coordinates fall outside the viewBox.
• Extra whitespace appears because the viewBox is much larger than the artwork.
• The artwork stretches because the aspect ratio is not considered.

Use preserveAspectRatio="xMidYMid meet" when the entire drawing should remain visible. Use slice only when cropping is intentional. In an editor, inspect the viewBox before changing individual coordinates; it is often the real source of a sizing problem.

Basic shapes and paths

SVG has simple elements for common geometry:

Element	Typical use	Important attributes
rect	Cards, buttons, backgrounds	x, y, width, height, rx
circle	Dots, avatars, radial diagrams	cx, cy, r
ellipse	Oval shapes	cx, cy, rx, ry
line	Separators and connectors	x1, y1, x2, y2
polyline	Open multi-segment lines	points
polygon	Closed shapes	points
path	Curves and compound shapes	d

The path element uses commands such as M (move), L (line), C (cubic Bézier curve), and Z (close the path). Start with simple shapes when possible. They are easier to edit, easier to label, and often require less markup than an equivalent path.

Styling and reusable definitions

Presentation attributes such as fill, stroke, and stroke-width work for small examples. For a real project, CSS classes and the <defs> element make the source easier to maintain.

<svg viewBox="0 0 160 80" class="diagram" role="img" aria-labelledby="diagram-title">
  <title id="diagram-title">Two connected panels</title>
  <defs>
    <linearGradient id="panel" x1="0" x2="1">
      <stop offset="0" stop-color="#fb923c" />
      <stop offset="1" stop-color="#f97316" />
    </linearGradient>
  </defs>
  <rect class="panel" x="8" y="12" width="60" height="56" rx="8" />
  <path class="connector" d="M68 40h24" />
  <rect class="panel" x="92" y="12" width="60" height="56" rx="8" />
</svg>

.diagram { max-width: 100%; height: auto; }
.panel { fill: url(#panel); }
.connector { fill: none; stroke: #334155; stroke-width: 3; }

When SVG is embedded inline, CSS and JavaScript can address individual elements. When it is loaded through an <img> element, the document is treated as an image and page CSS cannot reach its internal nodes.

SVG or PNG?

Choose SVG for logos, icons, diagrams, and flat illustrations that need to scale or change color. Choose PNG, WebP, or another raster format for photographs, texture-heavy artwork, and effects that become unreasonably complex as paths and filters. The right choice depends on the content and the target devices, so compare file size and rendering behavior with representative assets rather than assuming one format always wins.

Accessibility and security checks

An informative SVG should have a <title> and, when needed, a <desc>, connected with aria-labelledby. Decorative SVGs can use aria-hidden="true". Give interactive shapes keyboard support and a visible focus state instead of relying on pointer events alone.

Before displaying user-provided SVG, remove scripts, event-handler attributes, external references, and unsafe elements. Treat remote SVG URLs as untrusted input and review the source before importing it. SVGDO sanitizes the markup used in its preview, but the exported file should still be checked before it is added to a production project.

A short practice exercise

1. Paste the circle example into the editor and change its viewBox to 0 0 200 100.
2. Add a rounded rectangle and give it a class instead of an inline color.
3. Resize the preview and observe which parts scale and which parts are clipped.
4. Add a title and test the result with an accessibility tree or screen reader.
5. Export a copy, compare its source with the original, and keep the version that is easiest for your team to maintain.

These small checks build a more reliable SVG workflow than memorizing a list of format slogans. Start with a clear coordinate system, use the simplest element that represents the artwork, and validate the rendered result at the sizes your users will actually see.