Embedded SVG Vector Graphics
What are SVG Vector Graphics?
Imagine drawing a circle on a sheet of paper using a compass. If you look at it under a magnifying glass, the curved line remains perfectly sharp because it is based on geometry. If you take a digital photo of a circle (a PNG or JPEG) and zoom in, the edges will look pixelated and blurry.SVG (Scalable Vector Graphics) is an XML-based format for drawing shapes, lines, and curves directly in your HTML code:
<svg>: The outer wrapper defining the viewport.<circle>: Draws a circle using center coordinates (cx, cy) and a radius (r).<rect>: Draws rectangles.<path>: Draws complex paths using mathematical coordinate points.Why does it matter?
SVGs are mathematical coordinate drawings, meaning they scale to any size (from a mobile screen to a giant billboard) without losing quality. They are also incredibly lightweight compared to JPEGs or PNGs, making pages load faster.How to write it
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red">
</svg>
Common Mistakes
<circle r="40"> without specifying center points cx and cy, the circle will default to coordinates (0, 0), clipping it off the screen.Quick Reference
<svg> — Defines the drawing coordinates boundary.<circle cx="x" cy="y" r="radius"> — Draws a vector circle.fill="color", stroke="color" — Vector styling attributes.Your Task
Create an `<svg>` tag with `width="100"` and `height="100"`. Inside it, place a `<circle>` with coordinates `cx="50"`, `cy="50"`, radius `r="40"`, and a `fill="red"` attribute.
index.html
Type code above to start the lesson.
Live Preview