Let's place a simple SVG graphic directly inside an HTML page.
- <svg> is the container for a scalable vector graphic. - Unlike a raster image, SVG describes shapes and paths mathematically, so the graphic can scale without the same pixel-based behavior as a bitmap image. - Set a viewBox to define the internal coordinate system used by the graphic. - <circle>, <rect>, <line>, <path>, and other SVG elements describe individual shapes. - Attributes such as cx, cy, r, x, y, width, and height describe where shapes belong. - SVG can be written directly in HTML when you need an inline graphic. - SVG can also be used through an external file with an <img> element. - Give meaningful alternative text when the graphic communicates important information.
The practical goal is to understand the relationship: HTML can contain an SVG element, and SVG contains its own shape elements.