SVG by Hand: Why Every Developer Should Understand the Markup

I used to treat SVGs as black boxes. Figma exported them, I dropped them into the project, and I never looked at the markup. Then one day a client's logo had a 4MB SVG file that was crashing the mobile browser. I opened it and found 800 lines of nested groups, invisible layers, duplicate gradient definitions, and enough metadata to fill a novel. I cleaned it down to 12KB by hand. That's when I started learning SVG as a language, not just a file format. SVG is XML. It's readable, writable, and manipulable as text. You can inline it in HTML, style it with CSS, animate it with JavaScript, and version-control it with git. No other image format offers that. Here's the practical knowledge that matters. The viewport and viewBox Every SVG starts with these two concepts: <svg width= "200" height= "200" viewBox= "0 0 100 100" > <!-- content --> </svg> The width and height set the physical size on the page. The viewBox defines the internal coordinate system. In this example, the SVG is 200 pixels