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, it can be scaled to any size without degradation. This makes vector graphics the preferred format for 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 serves equally well on a mobile screen and a billboard-sized print
- File size characteristics: Simple geometric shapes produce extremely 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. Print workflows rely on AI (Adobe Illustrator), EPS, and PDF formats
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, making SVG ideal for interactive data visualizations, icon systems, and animated UI components. Tools like D3.js and Snap.svg leverage this capability extensively.