Learn · File formats · SVG
What is an SVG file?
An SVG file is a picture stored as text. Instead of a grid of pixels, it describes shapes — lines, curves, circles, text — and any web browser can draw it. Because the shapes are geometry rather than pixels, the image stays perfectly sharp at any size. That’s the name: Scalable Vector Graphics.
SVG is an open standard from the W3C, the body that maintains the web’s core formats. No license, no proprietary owner, readable in a plain text editor.
It’s the picture format the web runs on — and, increasingly, the one your laser cutter, vinyl cutter, or CNC engraving software accepts too. This page covers what’s inside one, where it fits in a cutting workflow, and the three problems that catch people at cut time.
Sec. 01 · Where it’s used
Who uses SVG, and for what
SVG started as a screen format and grew into a shop format. The same file can do both jobs.
On screen, SVG is the standard way to ship logos, icons, and diagrams on the web. Every modern browser renders it natively. Because it’s XML, it plugs into the rest of the web stack: shapes can be styled with CSS and animated, and a logo that’s 4 KB of text looks equally crisp on a phone and a trade-show banner.
In the shop, SVG has become a common interchange format for machines that follow a drawn outline: laser cutters, vinyl cutters, and CNC engraving toolchains all accept it. The typical path: artwork is drawn or traced in a vector editor, saved as SVG, imported into the machine’s cutting or engraving software, and turned into toolpaths there. The shapes you see in the browser are the shapes the blade or beam follows.
And because it’s plain text, SVG is automatable. A script can generate a hundred name tags, renumber a set of labels, or swap a color across a whole folder of files — no drawing program in the loop. That’s a property the binary image formats can’t offer.
Sec. 02 · Anatomy
What’s inside an SVG file
Here is a complete, valid SVG file — small, but real. Eleven lines of text you can read without any special software.
<svg xmlns="http://www.w3.org/2000/svg"
SVG is XML — structured text. This first line says “this file is an SVG image.”
viewBox="0 0 400 300"
The drawing’s own coordinate system: origin at 0,0, 400 units wide, 300 tall. Every shape below lives in these units.
width="4in" height="3in">
Physical size. Optional — and often missing, which is where wrong-size cuts come from (Sec. 03).
<g stroke="#1e3a8a" fill="none">
<g> groups shapes. Style set here — navy stroke, no fill — applies to everything inside the group.
<rect x="20" y="20" width="360" height="260"/>
Basic shapes are one line each. A rectangle…
<circle cx="60" cy="60" r="12"/>
…a circle (a bolt hole, say)…
<line x1="40" y1="60" x2="80" y2="60"/>
…a straight line. Also in the toolbox: <ellipse>, <polyline>, <polygon>.
<path d="M120 240 L200 120 C230 80 300 80 330 120 Z"/>
The workhorse. d is a list of pen commands — M move to, L line to, C curve to, A arc, Z close the shape. Traced logos and artwork are mostly paths.
</g>
<text x="200" y="290" text-anchor="middle">PART A-104</text>
Live, editable text. It stays text until you convert it to paths — which you must do before cutting (Sec. 03).
</svg>
That’s the whole file.
Paste those eleven lines into a text file, name it part.svg, and every browser on earth will draw it: a bordered plate with a hole, a centerline, a curved profile, and a part label. Want to look inside a real one the same way? The free viewer shows any SVG you drop on it — rendered image, pretty-printed source, and a count of what’s inside.
Sec. 03 · In the wild
The three problems that bite at cut time
SVG behaves impeccably on screen. The trouble starts when the file leaves the browser and heads for a machine.
-
01 · SIZE
It cuts at the wrong size
SVG’s default unit is the pixel — and a pixel has no fixed physical size. A shape that’s “100 wide” is 100 somethings, and different programs have historically assumed different pixels-per-inch when converting (96 is the web convention; 72 turns up in older tools). The result is a part that arrives 25% small — or a third too big, depending on which direction the mismatch runs.
The fix: give the file real units — width="4in" or width="101.6mm" to match the viewBox — and measure the first cut before running the batch.
-
02 · TEXT
The text isn’t your font
A <text> element stores the words plus the name of a font — not the letter shapes. Open the file on a computer that doesn’t have that font and something else gets substituted. On a cutter, that means the engraved label comes out in the wrong letterforms, or not at all.
The fix: convert text to paths (outlines) before sending a file to cut, and keep an editable original for the next revision.
-
03 · SCRIPTS
SVGs can carry scripts
Because SVG is a full web format, a file can embed scripts. That’s useful for interactive graphics — and a real consideration when you open an SVG from someone you don’t know, since loading one directly as a page can run whatever it carries.
The fix: view unknown SVGs through a renderer that treats them as a plain image, where scripts are disabled. Our free viewer works exactly that way, by construction.
Sec. 04 · FAQ
Common questions
How do I open an SVG file?
Drag it into any web browser — every modern browser renders SVG natively. To see the text inside, open it in a plain text editor. To get both at once, plus a summary of what the file contains, drop it on our free SVG viewer — it runs in your browser and the file never leaves your machine.
Why does my SVG cut or print at the wrong size?
Almost always units. SVG defaults to pixels, which have no fixed physical size, and the program on the receiving end has to guess a conversion — different tools have guessed differently. Set an explicit physical width and height on the file (inches or millimeters), confirm the import scale in your cutting software, and measure the first part.
SVG vs DXF for laser cutting — which should I use?
Both are widely accepted, and the honest answer is: whichever your cutting software handles best. As a rule of thumb, work that comes from CAD travels naturally as DXF, while artwork and traced graphics travel naturally as SVG. Both formats share the same failure mode — ambiguous units — so verify scale on import either way. We’ve written the same plain-English treatment of the other side: What is a DXF file?
Is SVG the same as PNG or JPG?
No. PNG and JPG are raster formats — grids of pixels — so they blur when scaled up. SVG is vector: it stores the shapes themselves, so it stays sharp at any size and is usually far smaller for line art, logos, and diagrams. For photographs, raster is the right tool; a photo has no shapes to store.
Can I edit an SVG file in a text editor?
Yes — that’s one of the format’s quiet strengths. Nudge a coordinate, change a color, fix a typo in a label: all doable by hand in any editor, no drawing program needed. Fair warning: heavily traced artwork is mostly long path data, which is not pleasant to edit manually. But simple files read like the example above.
Can an SVG file contain a virus?
An SVG can embed scripts, so a malicious file opened directly as a web page can run code in that page. Rendered as an image — which is how image tags, and our free viewer, treat SVG — scripts are disabled and don’t run. Treat SVGs from unknown sources with the same caution as any downloaded file.
Sec. 05 · Next step
See inside your own file
Drop any SVG on the free viewer: it renders the image, pretty-prints the source, and counts every element inside — entirely in your browser. Nothing is uploaded, because there’s no server to upload to.
We build small tools that batch-process files like this — john@curioustech.org.