A FRIENDLY INTRODUCTION TO SVG

Summary from the TLDR Web Dev newsletter

SVG is an image format with XML syntax that allows for dynamic manipulation with CSS and JavaScript. It offers UI primitives like circles, rectangles, and polygons, and their attributes can be styled and animated. This post explains presentational attributes like `stroke` and `stroke-dashoffset`, which are useful for creating animated effects like drawing shapes. A key concept explained is the `viewBox` attribute, which creates an internal coordinate system that allows SVGs to scale properly and remain responsive, solving the problem of fixed positioning that occurs when using absolute coordinates.