What Is Inside an SVG File? Paths, viewBox and Groups Explained
Open an SVG in a text editor and it is just readable code. This guide explains the main parts — the svg element, viewBox, paths, fills and groups — so you can understand, fix and optimize your vector files.
An SVG file looks like a picture when you open it in a browser, but open it in a text editor such as Notepad or VS Code and you will see plain text. SVG is written in XML, a tag-based language similar to HTML. You do not need to be a programmer to understand the basics, and knowing them helps you fix sizing problems, change colors quickly and keep your files small.
The svg element: the canvas
Every SVG starts with an <svg> tag. It usually carries a few important attributes:
xmlns="http://www.w3.org/2000/svg"tells programs that this is an SVG document. Leave it in place.widthandheightset the default display size, for examplewidth="400"(pixels) orwidth="10cm".viewBoxdefines the coordinate system of the drawing.
The viewBox: the most misunderstood attribute
The viewBox is four numbers: viewBox="0 0 400 300". The first two are the top-left corner (x and y) and the last two are the width and height of the drawing area, in the drawing's own units. Every coordinate inside the file is measured in those units.
Think of the viewBox as a window onto the drawing and width/height as the size of the frame on the wall. If the viewBox is 400 × 300 but the width is set to 800, the whole drawing is shown twice as large, still perfectly sharp. If you remove width and height and keep the viewBox, the SVG scales to fill whatever container it is placed in, which is ideal on websites.
Tip: if an SVG appears tiny, huge or cropped after you import it somewhere, check the width, height and viewBox first. Most sizing problems come from units (px, mm, in) or from a viewBox that does not match the artwork.
Paths: where the drawing lives
Most of the content of a traced SVG is <path> elements. A path's shape is stored in its d attribute as a series of short commands:
- M (move to): lift the pen and move to a point, e.g.
M 10 20. - L (line to): draw a straight line to a point.
- H and V: horizontal and vertical lines.
- C (cubic curve): draw a smooth Bézier curve using two control points.
- Q (quadratic curve): a simpler curve with one control point.
- A (arc): part of a circle or ellipse.
- Z (close path): draw a line back to the start and close the shape.
Uppercase letters use absolute coordinates; lowercase letters are relative to the previous point, which makes files shorter. A path like M10 10 L90 10 L90 90 Z draws a triangle. A traced logo may have hundreds of these commands, but each one is just "go here, curve there".
Fewer points make a better file: smoother curves, smaller size and easier editing. Good vectorizers try to describe each edge with as few curve segments as it needs. That is why a clean SVG of a circle should contain a handful of curves, not hundreds of tiny straight lines.
Basic shapes
Besides paths, SVG has ready-made shapes: <rect>, <circle>, <ellipse>, <line>, <polyline> and <polygon>. Designers like them because they stay easy to edit: a circle is just a centre and a radius.
Fill and stroke: the colors
Each shape can be filled (the inside is painted) and/or stroked (an outline is drawn along its edge):
fill="#2a6b5c"paints the inside with a color;fill="none"leaves it empty.stroke="#000"andstroke-width="2"draw an outline.opacityorfill-opacitymake a shape see-through.
Colors are usually written as hex codes (#ff0000 is red) but names like red and rgb(255,0,0) also work. To recolor a design, you can literally search and replace one hex code with another.
For cutting and printing, the difference between fill and stroke matters a lot. Cutting software follows the edges of shapes, and a thick stroke is often cut as a single line along its centre. Traced artwork normally uses filled shapes only, which is what most cutting and printing workflows want.
Groups and layers
The <g> element groups shapes together. A group can carry a shared color or a transform (move, scale, rotate) for everything inside it. Design programs show groups as layers or folders. Many vectorizers group all shapes of the same color, which makes it easy to select and recolor one color at a time.
Defs, IDs and other extras
You may also see <defs> (definitions of reusable things such as gradients, clip paths or symbols), id attributes, and <title> or <desc> elements that describe the image for screen readers. Files saved from Illustrator or Inkscape often also contain editor-specific metadata that browsers ignore.
Keeping SVG files clean and small
- Remove editor metadata. Inkscape's "Save as Optimized SVG" or the free SVGO tool strip it.
- Round coordinates. Two decimal places are plenty for most artwork.
- Merge shapes of the same color when you do not need them separate.
- Avoid embedded images. An
<image>tag with a long "data:" string inside means a raster picture is hidden in your SVG, which defeats the purpose. - Convert text to paths before sending a file to a printer or cutting machine, so missing fonts cannot change the look.
Summary
An SVG is a readable list of shapes on a canvas defined by the viewBox. Paths describe outlines with simple drawing commands, fill and stroke set their colors, and groups organise them. Once you know these few pieces, you can resize, recolor and tidy any SVG with confidence — even without a design program.