Vector Image
A digital image defined by mathematical objects such as points, paths, curves, and fills. Scales to any size without quality loss.
A vector image describes visual content through mathematical primitives - points (anchors), lines (paths), curves (Bezier curves), and fills - rather than a fixed grid of pixels. Because the image is stored as a set of drawing instructions, path-defined shapes keep crisp edges at any scale. Vector graphics suit logos, icons, typography, and technical illustrations.
- Resolution independence: Vector images are recalculated at render time to match the output device's resolution. A single SVG file can serve both a mobile screen and a billboard-sized print
- File size characteristics: Simple geometric shapes produce compact files compared to equivalent raster images. However, highly detailed illustrations with thousands of paths and complex gradients can result in large file sizes
- Key formats:
SVG(Scalable Vector Graphics) is the web standard. Formats used in print include AI (Adobe Illustrator), EPS, and PDF
In web development, SVG can be embedded inline in HTML, enabling CSS styling and JavaScript-driven animations on individual elements. Elements like <path>, <circle>, and <rect> within an <svg> container are independently addressable via the DOM, so SVG is used for interactive data visualizations, icon systems, and animated UI components, for example with D3.js.