Scalable Vector Graphics (SVG)
SVG allows you to embed and manipulate vector graphics directly within your HTML. Unlike raster images (like JPEGs or PNGs), SVG images are resolution-independent, meaning they look crisp on any screen size and zoom level. This makes them ideal for logos, icons, and interactive charts on modern web pages.
Example 1: Basic SVG Circle
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="blue" stroke-width="3" fill="lightblue" />
</svg>
Explanation This code creates a simple blue circle. The <svg> tag defines the canvas, and the <circle> element draws the shape, specifying its center (cx, cy), radius (r), border (stroke), border width (stroke-width), and fill color.
Example 2: SVG Rectangle with Rounded Corners
<svg width="200" height="100">
<rect x="10" y="10" width="180" height="80" rx="10" ry="10" fill="green" stroke="darkgreen" stroke-width="2" />
</svg>
Explanation This example demonstrates a rectangular SVG shape. The <rect> element defines its position (x, y), dimensions (width, height), and the rx and ry attributes create rounded corners for a softer look.
Example 3: Embedding an SVG File
<img src="your-icon.svg" alt="A scalable vector icon" width="50" height="50">
Explanation You can embed external SVG files using the <img> tag, similar to other image formats. For more dynamic control and manipulation with CSS or JavaScript, you can directly embed the SVG code within your HTML document.