{"course":{"slug":"vector-and-print","title":"Vectors, Logos and Things That Get Printed","url":"https://addaly.com/learn/vector-and-print","level":"beginner","track":"create"},"lesson":{"slug":"reading-path-data","title":"What the `d` attribute is saying","url":"https://addaly.com/learn/vector-and-print/reading-path-data","position":2,"of":73,"minutes":10,"answer":"An SVG is text you can read and edit, and the d attribute is a short list of pen instructions in document coordinates.","keyIdea":"An SVG is text you can read and edit, and the `d` attribute is a short list of pen instructions in document coordinates, which is why a 240-byte logo and a 1.9 MB logo can look identical on screen."},"body":{"format":"markdown","text":"## Open it in a text editor\n\nRight-click any SVG, open it with Notepad, TextEdit or `nano`, and look. There is no magic in there. There is a list of instructions.\n\n```svg\n<path d=\"M 20,80 C 20,20 80,20 80,80 Z\" fill=\"#1d4ed8\"/>\n```\n\nRead it out loud. **M**ove the pen to 20,80. Draw a **C**ubic curve whose first handle points to 20,20, whose second handle points to 80,20, ending at 80,80. **Z** closes the path back to the start.\n\nThat is the whole vocabulary you need, and there are only a handful of commands:\n\n- `M x,y`: move without drawing. Starts a new subpath.\n- `L x,y`: straight line to a point. `H x` and `V y` are the horizontal and vertical shorthands.\n- `C x1,y1 x2,y2 x,y`: cubic Bézier: two handle positions, then the end point. This is by far the most common.\n- `S x2,y2 x,y`: smooth cubic. Reuses the previous curve's outgoing handle, mirrored. This is how exporters compress a smooth run of curves.\n- `Q` and `T`: quadratic Bézier, one handle. TrueType fonts are built from these; PostScript and SVG artwork mostly is not.\n- `A rx,ry rot large-arc sweep x,y`: elliptical arc. Rarely written by hand, common in output from charting libraries.\n- `Z`: close the subpath.\n\nA capital letter means **absolute** coordinates. A lowercase letter means **relative** to where the pen already is. `l 10,0` means \"ten units right of here\". Exporters use lowercase because the numbers come out shorter.\n\n## The coordinate frame\n\nTwo attributes decide what those numbers mean.\n\n```svg\n<svg viewBox=\"0 0 100 100\" width=\"40mm\" height=\"40mm\">\n```\n\n`viewBox` sets the internal coordinate system: this drawing is 100 units across. `width` and `height` say how large to render it. Change the width to `400mm` and nothing inside the file changes: the same 100 units are stretched over a larger area. **This is the whole of resolution independence, in one attribute.**\n\nIf `width` and `height` are missing, browsers treat them as 100% and scale the viewBox to fit whatever box the SVG sits in, while converters such as `rsvg-convert` take the viewBox numbers as pixels, at 96 to the inch. That 96-to-the-inch default is the cause of a great deal of confusion, and it is the next lesson.\n\n## Why two identical-looking logos differ by 8,000×\n\nExport the same mark two ways and you will see something like this:\n\n```\nplay-drawn.svg       240 bytes    3 path elements\nplay-traced.svg    1,912,406 bytes  412 path elements\n```\n\nThree things inflate a file, and all three are visible in the text:\n\n1. **Node count.** A traced logo has hundreds of anchor points where a drawn one has eight. Every anchor is six numbers.\n2. **Decimal precision.** Illustrator and Inkscape happily write `47.238471950000003`. Fifteen significant figures on a drawing that will be cut at half-millimetre accuracy is sixty bytes of nothing.\n3. **Embedded rasters.** An `<image xlink:href=\"data:image/png;base64,...\">` means somebody placed a photograph inside what they called a vector file. This is the single most common reason a \"vector logo\" fails when the printer enlarges it.\n\nSearch the file for `base64`. If you find it, you do not have vector artwork.\n\n## Cleaning up, free\n\n`svgo` and `scour` both strip precision, merge paths and remove editor metadata:\n\n```bash\nnpx svgo --precision=2 logo.svg -o logo.min.svg\n```\n\nTwo decimal places on a 100-unit viewBox is accuracy to a hundredth of a unit, one ten-thousandth of the drawing's width: on the 40 mm logo above, four micrometres. Nothing you print can hold more.\n\n## The part nobody tells you: batch editing\n\nBecause it is text, you can do things no menu offers. A client changes their brand blue and you have forty icons:\n\n```bash\nsed -i 's/#1d4ed8/#0f766e/g' icons/*.svg\n```\n\nForty files, one second, no application open. You can also grep an entire folder for `base64` to find the fake vectors, or for `font-family` to find the files where somebody forgot to outline the type.\n\nThis is not a trick for programmers. It is the single most useful thing about the format, and it is why SVG, unlike the AI, CDR and PDF files most design tools save, diffs sensibly in version control: you can see, line by line, what changed between two versions of a drawing.\n\n## Watch out for `transform`\n\nA path can sit inside nested groups, each with its own `transform=\"translate(...) scale(...) rotate(...)\"`. The numbers in `d` are then not the numbers on your ruler. If coordinates look wrong, look upward at the groups. Most editors have an \"ungroup and bake transforms\" step; in Inkscape, Edit ▸ Preferences ▸ Behaviour ▸ Transforms ▸ *Store transformation: Optimized* pushes transforms down into the path data where you can read them."},"check":{"question":"Two SVG files of the same simple logo look identical on screen. One is 240 bytes; the other is 1.9 MB. Opening the large one in a text editor shows 412 `<path>` elements and coordinates written to fifteen decimal places. What does that tell you about the large file, and what will go wrong with it?","options":[{"text":"It was saved at a higher resolution setting, so it will print more sharply but will take much longer to render on the press.","correct":false,"tempting":"Assumes a vector file has a resolution. Nothing in an SVG stores one; the size difference is entirely node count and number precision."},{"text":"It is uncompressed, so gzipping it will make the two files equivalent.","correct":false,"tempting":"Confuses transport size with geometry. Compression shrinks the bytes but leaves 412 paths for the renderer and the cutter to process."},{"text":"It was auto-traced, so it carries hundreds of redundant anchors that will wobble when enlarged or cut.","correct":true},{"text":"It contains CMYK colour values, which are longer than hex and cannot be compressed.","correct":false,"tempting":"SVG has no CMYK. Colour notation is a handful of bytes either way and never accounts for a megabyte."}]},"prev":{"slug":"pixels-cannot-be-enlarged","title":"Why your Photoshop logo cannot go on a hoarding","url":"https://addaly.com/learn/vector-and-print/pixels-cannot-be-enlarged"},"next":{"slug":"units-and-the-dpi-that-is-not-there","title":"Points, millimetres, and two different inches","url":"https://addaly.com/learn/vector-and-print/units-and-the-dpi-that-is-not-there"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'What the `d` attribute is saying', in Vectors, Logos and Things That Get Printed. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/vector-and-print/reading-path-data (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"What the `d` attribute is saying","courseTitle":"Vectors, Logos and Things That Get Printed","module":{"index":1,"slug":"what-a-vector-is","title":"The thing that is actually in the file"},"answer":null,"keyIdea":"An SVG is text you can read and edit, and the `d` attribute is a short list of pen instructions in document coordinates, which is why a 240-byte logo and a 1.9 MB logo can look identical on screen.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"open-it-in-a-text-editor","runs":[{"text":"Open it in a text editor"}]},{"t":"p","runs":[{"text":"Right-click any SVG, open it with Notepad, TextEdit or "},{"text":"nano","code":true},{"text":", and look. There is no magic in there. There is a list of instructions."}]},{"t":"code","lang":"svg","label":"SVG","text":"<path d=\"M 20,80 C 20,20 80,20 80,80 Z\" fill=\"#1d4ed8\"/>"},{"t":"p","runs":[{"text":"Read it out loud. "},{"text":"M","b":true},{"text":"ove the pen to 20,80. Draw a "},{"text":"C","b":true},{"text":"ubic curve whose first handle points to 20,20, whose second handle points to 80,20, ending at 80,80. "},{"text":"Z","b":true},{"text":" closes the path back to the start."}]},{"t":"p","runs":[{"text":"That is the whole vocabulary you need, and there are only a handful of commands:"}]},{"t":"ul","items":[[{"text":"M x,y","code":true},{"text":": move without drawing. Starts a new subpath."}],[{"text":"L x,y","code":true},{"text":": straight line to a point. "},{"text":"H x","code":true},{"text":" and "},{"text":"V y","code":true},{"text":" are the horizontal and vertical shorthands."}],[{"text":"C x1,y1 x2,y2 x,y","code":true},{"text":": cubic Bézier: two handle positions, then the end point. This is by far the most common."}],[{"text":"S x2,y2 x,y","code":true},{"text":": smooth cubic. Reuses the previous curve’s outgoing handle, mirrored. This is how exporters compress a smooth run of curves."}],[{"text":"Q","code":true},{"text":" and "},{"text":"T","code":true},{"text":": quadratic Bézier, one handle. TrueType fonts are built from these; PostScript and SVG artwork mostly is not."}],[{"text":"A rx,ry rot large-arc sweep x,y","code":true},{"text":": elliptical arc. Rarely written by hand, common in output from charting libraries."}],[{"text":"Z","code":true},{"text":": close the subpath."}]]},{"t":"p","runs":[{"text":"A capital letter means "},{"text":"absolute","b":true},{"text":" coordinates. A lowercase letter means "},{"text":"relative","b":true},{"text":" to where the pen already is. "},{"text":"l 10,0","code":true},{"text":" means “ten units right of here”. Exporters use lowercase because the numbers come out shorter."}]},{"t":"h2","id":"the-coordinate-frame","runs":[{"text":"The coordinate frame"}]},{"t":"p","runs":[{"text":"Two attributes decide what those numbers mean."}]},{"t":"code","lang":"svg","label":"SVG","text":"<svg viewBox=\"0 0 100 100\" width=\"40mm\" height=\"40mm\">"},{"t":"p","runs":[{"text":"viewBox","code":true},{"text":" sets the internal coordinate system: this drawing is 100 units across. "},{"text":"width","code":true},{"text":" and "},{"text":"height","code":true},{"text":" say how large to render it. Change the width to "},{"text":"400mm","code":true},{"text":" and nothing inside the file changes: the same 100 units are stretched over a larger area. "},{"text":"This is the whole of resolution independence, in one attribute.","b":true}]},{"t":"p","runs":[{"text":"If "},{"text":"width","code":true},{"text":" and "},{"text":"height","code":true},{"text":" are missing, browsers treat them as 100% and scale the viewBox to fit whatever box the SVG sits in, while converters such as "},{"text":"rsvg-convert","code":true},{"text":" take the viewBox numbers as pixels, at 96 to the inch. That 96-to-the-inch default is the cause of a great deal of confusion, and it is the next lesson."}]},{"t":"h2","id":"why-two-identical-looking-logos-differ-by-8-000","runs":[{"text":"Why two identical-looking logos differ by 8,000×"}]},{"t":"p","runs":[{"text":"Export the same mark two ways and you will see something like this:"}]},{"t":"code","lang":"","label":"Text","text":"play-drawn.svg       240 bytes    3 path elements\nplay-traced.svg    1,912,406 bytes  412 path elements"},{"t":"p","runs":[{"text":"Three things inflate a file, and all three are visible in the text:"}]},{"t":"ol","start":1,"items":[[{"text":"Node count.","b":true},{"text":" A traced logo has hundreds of anchor points where a drawn one has eight. Every anchor is six numbers."}],[{"text":"Decimal precision.","b":true},{"text":" Illustrator and Inkscape happily write "},{"text":"47.238471950000003","code":true},{"text":". Fifteen significant figures on a drawing that will be cut at half-millimetre accuracy is sixty bytes of nothing."}],[{"text":"Embedded rasters.","b":true},{"text":" An "},{"text":"<image xlink:href=\"data:image/png;base64,...\">","code":true},{"text":" means somebody placed a photograph inside what they called a vector file. This is the single most common reason a “vector logo” fails when the printer enlarges it."}]]},{"t":"p","runs":[{"text":"Search the file for "},{"text":"base64","code":true},{"text":". If you find it, you do not have vector artwork."}]},{"t":"h2","id":"cleaning-up-free","runs":[{"text":"Cleaning up, free"}]},{"t":"p","runs":[{"text":"svgo","code":true},{"text":" and "},{"text":"scour","code":true},{"text":" both strip precision, merge paths and remove editor metadata:"}]},{"t":"code","lang":"bash","label":"Bash","text":"npx svgo --precision=2 logo.svg -o logo.min.svg"},{"t":"p","runs":[{"text":"Two decimal places on a 100-unit viewBox is accuracy to a hundredth of a unit, one ten-thousandth of the drawing’s width: on the 40 mm logo above, four micrometres. Nothing you print can hold more."}]},{"t":"h2","id":"the-part-nobody-tells-you-batch-editing","runs":[{"text":"The part nobody tells you: batch editing"}]},{"t":"p","runs":[{"text":"Because it is text, you can do things no menu offers. A client changes their brand blue and you have forty icons:"}]},{"t":"code","lang":"bash","label":"Bash","text":"sed -i 's/#1d4ed8/#0f766e/g' icons/*.svg"},{"t":"p","runs":[{"text":"Forty files, one second, no application open. You can also grep an entire folder for "},{"text":"base64","code":true},{"text":" to find the fake vectors, or for "},{"text":"font-family","code":true},{"text":" to find the files where somebody forgot to outline the type."}]},{"t":"p","runs":[{"text":"This is not a trick for programmers. It is the single most useful thing about the format, and it is why SVG, unlike the AI, CDR and PDF files most design tools save, diffs sensibly in version control: you can see, line by line, what changed between two versions of a drawing."}]},{"t":"h2","id":"watch-out-for-transform","runs":[{"text":"Watch out for "},{"text":"transform","code":true}]},{"t":"p","runs":[{"text":"A path can sit inside nested groups, each with its own "},{"text":"transform=\"translate(...) scale(...) rotate(...)\"","code":true},{"text":". The numbers in "},{"text":"d","code":true},{"text":" are then not the numbers on your ruler. If coordinates look wrong, look upward at the groups. Most editors have an “ungroup and bake transforms” step; in Inkscape, Edit ▸ Preferences ▸ Behaviour ▸ Transforms ▸ "},{"text":"Store transformation: Optimized","i":true},{"text":" pushes transforms down into the path data where you can read them."}]}],"check":{"question":[{"text":"Two SVG files of the same simple logo look identical on screen. One is 240 bytes; the other is 1.9 MB. Opening the large one in a text editor shows 412 "},{"text":"<path>","code":true},{"text":" elements and coordinates written to fifteen decimal places. What does that tell you about the large file, and what will go wrong with it?"}],"options":[{"text":[{"text":"It was saved at a higher resolution setting, so it will print more sharply but will take much longer to render on the press."}],"correct":false,"tempting":[{"text":"Assumes a vector file has a resolution. Nothing in an SVG stores one; the size difference is entirely node count and number precision."}]},{"text":[{"text":"It is uncompressed, so gzipping it will make the two files equivalent."}],"correct":false,"tempting":[{"text":"Confuses transport size with geometry. Compression shrinks the bytes but leaves 412 paths for the renderer and the cutter to process."}]},{"text":[{"text":"It was auto-traced, so it carries hundreds of redundant anchors that will wobble when enlarged or cut."}],"correct":true,"tempting":null},{"text":[{"text":"It contains CMYK colour values, which are longer than hex and cannot be compressed."}],"correct":false,"tempting":[{"text":"SVG has no CMYK. Colour notation is a handful of bytes either way and never accounts for a megabyte."}]}],"order":[3,1,0,2],"why":null},"prev":{"slug":"pixels-cannot-be-enlarged","title":"Why your Photoshop logo cannot go on a hoarding","minutes":9},"next":{"slug":"units-and-the-dpi-that-is-not-there","title":"Points, millimetres, and two different inches","minutes":9}}}