Andromeda
Note

Scalable Vector Graphics (SVG)

Definition

An XML-based vector image format describing shapes, paths, and text as mathematical coordinates—resolution-independent, styleable with CSS, and manipulable with JavaScript.

Why It Matters

SVGs are the ‘future-proof’ standard for digital design; their resolution independence ensures that graphics remain crisp on any screen size, making them indispensable for a responsive, high-performance web.

Core Concepts

  • Basic Shapes: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path>.
<!-- Example of a simple SVG circle -->
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
  • Styling: fill, stroke presentation attributes or CSS classes.
  • Implementation: <img src>, inline <svg>, <object>, or CSS background-image.
  • Optimization: SVGO / SVGOMG removes redundant markup.
  • Responsive: viewBox defines coordinate system; width="100%" scales to container.
  • Filters: <clipPath>, <mask>, <feGaussianBlur> for effects.

Connected Concepts

Connected notes