SVG Code Explained — Read, Write & Debug SVG Markup

You download an icon from a design library, drop it into your project folder, and out of curiosity, open it in a text editor. Instead of an image, you see this:

Angle brackets, cryptic letters like M and L, numbers separated by spaces. It looks like someone tried to write HTML while solving a math problem. Your instinct is to close the file and never look at it again.

Don't. That wall of text is simpler than it looks.

SVG code is just a set of instructions that tell the browser: “Draw a circle here. Draw a line from this point to that point. Fill it with this color.” Every SVG file, from a simple arrow icon to a complex illustration, is built from the same small vocabulary of tags and attributes.

By the end of this guide, you'll be able to open any SVG file and understand what each line does, write basic SVG shapes from scratch, and diagnose why an SVG isn't rendering the way you expect. If you want to follow along with live preview as you read, paste any code example into SVGMaker's SVG Code Editor online. It updates in real time as you type.

SVG stands for Scalable Vector Graphics. Unlike raster formats like PNG or JPG, which store images as grids of colored pixels, SVG files contain XML markup which are human-readable instructions that describe shapes mathematically. A circle isn't “these 4,000 pixels are blue.” It's “draw a circle at position (50, 50) with radius 40 and fill it blue.”

Here's the simplest valid SVG you can write:

That's it. Two tags. The <svg> wrapper defines the canvas. The <circle> draws a blue circle in the center. Save this as a .svg file, open it in a browser, and you'll see a perfect circle that stays sharp whether you display it at 16 pixels or 16,000 pixels.

This distinction matters for every downstream use case:

Because SVG is code, you can version-control it with Git, search through it with grep, and manipulate it programmatically with JavaScript. For a broader introduction to creating SVG files from scratch, see our complete beginner's guide to SVG.

Every SVG file follows the same structure: a root <svg> element that defines the coordinate space, filled with child elements that draw shapes. Let's break it down layer by layer.

The root tag is where you define how the SVG measures and scales:

Think of viewBox as the canvas size and width/height as the frame size. A viewBox of 0 0 24 24 with a width of 200 means every 1 unit in your SVG code is rendered as roughly 8.3 pixels on screen.

SVG provides seven primitive elements for drawing. Every complex SVG — no matter how intricate — is built from combinations of these:

Here's a sampler that draws four shapes on one canvas:

A rounded rectangle, a blue circle, a diagonal line, and an orange triangle — all in eight lines of code.

As SVGs grow more complex, you need ways to organize elements:

One circle definition, three instances. Change the fill color in <defs> and all three dots update simultaneously.

The <path> element is the most powerful and most confusing part of SVG. Its d attribute contains a mini drawing language — a sequence of single-letter commands followed by coordinates. Once you learn the commands, you can read any path data.

Uppercase commands use absolute coordinates. Lowercase commands use relative offsets from the current point.

Here's a simple house icon, built step by step:

Reading the path: Move to (5, 15). Draw a line up-right to (15, 5) — that's the left roof slope. Line down-right to (25, 15) — the right roof slope. Line straight down to (25, 25) — the right wall. Line left to (5, 25) — the floor. Close the path back to (5, 15) — the left wall.

Six commands, one complete shape. Every icon you've ever used follows this same logic, just with more coordinates.

If path syntax still feels abstract, paste any SVG into SVGMaker's SVG online Code Editor and change one number at a time. The live preview shows exactly which part of the shape each coordinate controls.

SVG elements can be styled three ways. Each has different trade-offs.

Presentation attributes — directly on the element:

Inline CSS — via the style attribute:

<style> block — inside the SVG, using CSS classes:

For most standalone SVG files (icons, logos), presentation attributes are the safest choice — they travel with the element and never conflict with external stylesheets. For detailed optimization strategies, see our SVG optimization techniques guide.

Let's put it all together by building a notification bell icon from an empty canvas.

Step 1 — The bell body (a path with curves):

Step 2 — The clapper (a small line at the bottom):

Step 3 — The notification dot (a filled circle):

Complete bell icon:

Three elements. One bell with a red notification badge. Paste each step into the Code Editor to watch it take shape piece by piece.

Hand-coding is great for learning and for small tweaks, but for production icon sets, you don't need to write every path by hand. Tools like SVGMaker generate clean SVG code from a text prompt in seconds and then you refine the output in the Editor with full control over every attribute.

Knowing how to read and write SVG is half the skill. The other half is figuring out why an SVG isn't rendering correctly. Here are the four most common bugs and how to fix each one.

The number one cause: your shapes are drawn outside the viewBox boundaries.

The second most common cause: fill="none" with no stroke set. The shape exists but is completely invisible. Always check that at least one of fill or stroke has a visible value.

If your SVG uses fill="currentColor", the color is inherited from the parent element's CSS color property. No parent color set? The fill defaults to black — or nothing, depending on the context.

Another culprit: a <style> block inside the SVG that sets fill: none on all paths, overriding your inline attributes. CSS specificity rules apply inside SVG just like in HTML.

Two common causes:

This usually means the path data has the wrong number of parameters for a command. A cubic Bezier C requires six numbers (two control points plus an endpoint). If you accidentally provide four, the browser tries to interpret the remaining path data as the next command — producing distorted shapes.

For cleaning up messy path data from AI-generated SVGs, see our guide on cleaning up AI-generated SVG code.

Open DevTools (F12), find the <svg> element in the Elements panel, and hover over child elements — the browser highlights each shape on the page. You can:

Once your SVG code is working correctly, the next step depends on where it's going:

SVG code isn't a black box. It's a small vocabulary — seven shape elements, a handful of path commands, and a coordinate system defined by viewBox — that combines to produce everything from a simple arrow icon to a detailed illustration.

The three skills covered in this guide are all you need: reading SVG (understanding what each tag and attribute does), writing SVG (building shapes from scratch using <rect>, <circle>, and <path>), and debugging SVG (identifying why a graphic isn't rendering correctly and how to fix it).

The fastest way to solidify these skills is to practice. Open the SVG Code Editor, paste in any SVG you have — an icon from your project, a logo from a design library, or one of the examples from this guide — and start experimenting. Change a fill color, move a cx coordinate, tweak a number in a path command. The live preview makes learning hands-on and immediate.

And when you need to create new SVGs from scratch without hand-coding every path, SVGMaker generates clean, editable SVG code from a simple text prompt — ready to refine in the code editor until it's exactly what you need.