Vector graphics
Vector graphics are computer images created using a sequence of mathematical statements or commands that define geometric shapes, lines, and curves in two- or three-dimensional space, allowing for precise and scalable representations without pixelation.[1] Unlike raster graphics, which rely on a grid of pixels, vector graphics store data as coordinates and equations, enabling software like Adobe Illustrator or CorelDRAW to render the image dynamically based on these instructions.[1] This approach results in files that are typically smaller in size because they record only the essential points and relationships rather than every pixel.[2] Key advantages of vector graphics include their infinite scalability—resizing does not degrade quality—and ease of editing, as individual elements like paths or fills can be modified independently with high precision.[1] They are particularly suited for applications requiring sharp, clean lines, such as logos, typography, illustrations, maps, and technical diagrams.[2] However, vector graphics have limitations, including difficulty in representing complex details like photographic textures or intricate shading, and potential inconsistencies in rendering across different software or browsers.[2] Creation often demands more skill and time compared to raster methods.[1] The history of vector graphics traces back to the early 1950s with early computers like Whirlwind, where limited memory necessitated efficient mathematical representations for displays.[3][4] In the 1950s, the U.S. Department of Defense adopted them for mapping and modeling.[3] A pivotal development occurred in 1963 with Ivan Sutherland's Sketchpad, the first program to use vector graphics for interactive drawing on a computer.[3] The 1960s saw advancements like Pierre Bézier's curves for smooth scalability, alongside their use in video games such as Atari's Asteroids in the late 1970s.[3] By the 1980s, personal computers popularized vector tools, with CorelDRAW's 1989 release enhancing accessibility.[3] In 1999, the World Wide Web Consortium standardized Scalable Vector Graphics (SVG), integrating vectors into web design.[3] Today, formats like SVG, PDF, and EPS ensure broad compatibility in digital and print media.[1]Fundamentals
Definition and Principles
Vector graphics are computer-generated images that represent visual content through mathematical descriptions of geometric shapes, such as points, lines, curves, and polygons, rather than arrays of pixels. These shapes are defined by equations that specify their positions, dimensions, and properties, enabling the images to be scaled infinitely without degradation in quality or the introduction of artifacts like pixelation. This approach contrasts with raster graphics, which rely on fixed grids of colored pixels and lose clarity when enlarged.[5] The foundational principles of vector graphics emphasize resolution independence, meaning the output quality remains consistent regardless of the display size or resolution, as the shapes are recalculated mathematically during rendering. They adopt an object-based structure, where individual elements like paths and shapes are stored as discrete, editable entities with associated attributes, including coordinates for positioning, colors for fills and strokes, line widths, and patterns. Fills apply interior coloring or gradients to enclosed areas, while strokes outline the boundaries with customizable styles, allowing precise control over appearance without pixel-level manipulation.[5][6] The historical origins of vector graphics trace to the mid-20th century, with early implementations in the 1950s through computer systems like MIT's Whirlwind, a real-time digital machine developed for U.S. Navy applications including radar data visualization on cathode-ray tube displays. These systems used cathode-ray tube displays to visualize radar data and simulate aircraft trajectories and air defense scenarios, contributing to the development of vector graphics techniques. Advancements in the 1960s, such as Ivan Sutherland's Sketchpad system, demonstrated interactive vector drawing capabilities.[7][8][9] At their core, vector graphics are built from basic elements including paths, which form the outlines of shapes and can be open (ending without closure) or closed (connecting back to the starting point to enclose an area). Bézier curves serve as key components within paths, providing smooth, parametric approximations of natural contours using control points to guide the curve's direction and tension. Fills then complete these structures by coloring the interiors of closed paths, often with solid hues, gradients, or patterns, while strokes define the exterior lines.[6]Comparison to Raster Graphics
Raster graphics, also known as bitmap images, consist of a grid of individual pixels, each assigned a specific color value, resulting in a fixed resolution that can lead to pixelation or blurriness when the image is scaled up or down.[10] Common formats for raster graphics include JPEG, PNG, and GIF, which are well-suited for capturing detailed, photorealistic content such as photographs where subtle color gradients and textures are essential.[11] In contrast, vector graphics use mathematical equations to define shapes, paths, and curves, allowing them to remain resolution-independent and scalable without loss of quality.[12] One primary advantage of vector graphics over raster is their infinite scalability, making them ideal for applications requiring resizing, such as logos or icons that must appear sharp at various sizes from business cards to billboards, whereas raster images degrade in quality upon enlargement due to the interpolation of fixed pixels.[10] Vector files are typically smaller in size for simple geometric designs because they store parametric descriptions rather than pixel data, reducing storage needs and improving performance in scenarios like web graphics or print scaling.[11] However, vectors are less effective for complex, photorealistic images, as rendering intricate details demands more computational resources compared to the straightforward pixel rendering in raster formats.[12] Editing vector elements is also more intuitive, permitting precise manipulation of individual components like paths or shapes without affecting the whole image, unlike raster editing which often requires tools to select and adjust pixel regions.[10] In terms of use cases, vector graphics excel in illustrative and typographic designs, such as fonts, charts, and scalable icons, where clarity at any resolution is paramount, while raster graphics dominate in photography and scanned images that prioritize rich detail and color depth.[11] Hybrid approaches often combine both, for instance, overlaying vector elements like text or graphics on raster backgrounds in brochures or web designs to leverage the strengths of each.[12] For photorealistic or highly detailed artwork, raster formats may result in smaller effective file sizes after compression, but vectors maintain efficiency for parametric geometric art across scales.[10]Data Model
Geometric Primitives
Vector graphics rely on geometric primitives as the fundamental building blocks for constructing images, defined mathematically to ensure scalability and precision. These primitives include points, which are specified by Cartesian coordinates (x, y) in a two-dimensional plane, serving as the basic positional elements.[13] Straight lines connect two points, forming line segments that represent the simplest non-closed paths. Polygons are closed shapes composed of multiple connected line segments, enclosing an area defined by a sequence of vertex points.[13] Circles and ellipses provide curved closed primitives, parameterized by their center coordinates (cx, cy) and radii. A circle uses a single radius r, while an ellipse employs separate horizontal rx and vertical ry radii. Their parametric equations are given by x(t) = cx + r cos(t) for circles (or rx cos(t) for ellipses) and y(t) = cy + r sin(t) (or ry sin(t)), where t ranges from 0 to 2π, allowing for smooth representation without segmentation.[14][13] To model more complex smooth curves, vector graphics employ quadratic and cubic Bézier curves, defined by control points that guide the curve's shape without necessarily lying on it. A quadratic Bézier curve uses three points: start P0, control P1, and end P2. The cubic variant, more versatile for intricate designs, incorporates four points: start P0, controls P1 and P2, and end P3. Developed by French engineer Pierre Bézier in the 1960s for automotive design at Renault, these curves are parametric polynomials widely adopted in standards like SVG.[15][6] The position on a cubic Bézier curve B(t) is calculated as: \mathbf{B}(t) = (1-t)^3 \mathbf{P_0} + 3(1-t)^2 t \mathbf{P_1} + 3(1-t) t^2 \mathbf{P_2} + t^3 \mathbf{P_3}, \quad t \in [0,1] where t parameterizes the curve from start to end, and the points are vectors in the plane.[16][17] Each primitive carries attributes that define its visual properties, including stroke for outlining and fill for interior rendering. The stroke attribute specifies the line's paint, such as a solid color, gradient, or pattern, along with width (default 1 unit), dash pattern via stroke-dasharray (a list of dash and gap lengths), and other details like line cap and join styles.[18][19][20] The fill attribute similarly applies paint to the enclosed area, supporting solids, gradients, or patterns, with opacity controls for both stroke and fill to blend with backgrounds.[21] Transformations such as position shifts or rotations can be applied to these primitives to compose scenes.[6] Primitives form hierarchies through compound paths, where multiple subpaths—each a sequence of connected segments or curves—are combined into a single object, enabling complex structures like shapes with holes (e.g., a ring via an outer circle and inner subpath). This aggregation treats the compound as a unified entity for filling and stroking, with even-odd or nonzero winding rules determining interior regions.[6]Path and Shape Representations
In vector graphics, paths are constructed as sequences of connected geometric primitives, typically encoded through a series of commands that define the outline of shapes. These commands include "moveto" to establish a starting point, "lineto" to draw straight lines to subsequent points, and "curveto" to create smooth cubic Bézier curves by specifying control points.[6] Such path data syntax allows for compact representation of complex outlines, as seen in standards like Scalable Vector Graphics (SVG).[22] Paths can be either open, where the start and end points remain distinct, or closed, achieved by appending a "closepath" command that connects the final point back to the initial one, enabling filled regions without gaps.[6] Shape hierarchies extend basic paths into more complex structures by combining multiple subpaths or primitives. Clipping paths define regions that restrict the visibility of other graphics elements, formed by enclosing path definitions within a dedicated container that intersects with target content.[23] Compound shapes aggregate multiple paths into a single entity, often using fill rules to determine interior regions: the even-odd rule fills areas based on an odd number of path crossings from a point to infinity, while the nonzero winding rule considers the net direction of path windings to identify enclosed spaces.[24] These hierarchies support nested compositions, where subpaths act as holes or additives within outer paths, facilitating representations like text with counters or irregular polygons.[25] Parametric representations enable precise modeling of smooth curves and surfaces beyond simple line segments. Splines, such as cubic Bézier curves, parameterize paths by interpolating between control points with polynomial functions, providing continuity for organic shapes in two-dimensional graphics. For more advanced applications, Non-Uniform Rational B-Splines (NURBS) offer a weighted, rational extension of B-splines, ideal for exact conic sections and freeform surfaces in vector-based design. The core NURBS curve equation is given by: C(u) = \frac{\sum_{i=0}^{n} N_{i,p}(u) w_i P_i}{\sum_{i=0}^{n} N_{i,p}(u) w_i} where N_{i,p}(u) are the B-spline basis functions of degree p, w_i are weights influencing curve tension, P_i are control points, and u is the parametric variable ranging over the knot vector.[26] This formulation ensures local control and scalability, commonly applied in computer-aided design integrated with vector workflows. Metadata integration organizes path and shape data through structural elements that enhance manageability without altering geometry. Layers are simulated via stacked grouping constructs, allowing independent styling and transformation of subsets of paths. Groups encapsulate related shapes, applying shared attributes like opacity or transformations to all members, while object IDs provide unique identifiers for referencing and scripting individual elements.[27] These features, such as the XML-based id attribute, support hierarchical document trees and enable dynamic manipulation in formats like SVG.Operations and Manipulation
Basic Transformations
Basic transformations in vector graphics refer to the fundamental operations that modify the position, size, orientation, and shape of geometric primitives while preserving their essential properties, such as straight lines remaining straight. These operations are typically represented using affine transformations, which are linear mappings followed by translations and can be efficiently computed with matrix multiplication. In vector graphics systems, such transformations are applied to the control points of paths and shapes to reposition or resize elements without loss of quality, making them resolution-independent.[28][29] Translation is the simplest transformation, shifting all points of a graphic by a fixed vector (d_x, d_y) without altering distances or angles. It is represented by the 3×3 homogeneous matrix: \begin{bmatrix} 1 & 0 & d_x \\ 0 & 1 & d_y \\ 0 & 0 & 1 \end{bmatrix} Applying this matrix to a point (x, y, 1) yields the new coordinates (x + d_x, y + d_y, 1). This operation is commonly used to move elements across the canvas in formats like SVG.[28][30] Scaling resizes a graphic by multiplying coordinates by factors s_x and s_y along the x- and y-axes, respectively, allowing for uniform (isotropic) or non-uniform (anisotropic) resizing. The corresponding matrix is: \begin{bmatrix} s_x & 0 & 0 \\ 0 & s_y & 0 \\ 0 & 0 & 1 \end{bmatrix} For uniform scaling, s_x = s_y = s. This transformation expands or contracts shapes relative to the origin, and in vector graphics, it maintains crisp edges at any scale.[28][29] Rotation reorients a graphic around the origin by an angle \theta (in radians), preserving distances and angles. The rotation matrix is: \begin{bmatrix} \cos \theta & -\sin \theta & 0 \\ \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix} Rotations can be specified around any point by combining with translation. In vector graphics, this enables precise angular adjustments, such as aligning shapes.[28][30] Shearing, or skewing, distorts a graphic by slanting it along one axis while preserving parallelism of lines, useful for effects like perspective simulation in 2D. For skewX (skewing along the x-axis by angle \theta, affecting the x-coordinate based on y), the matrix is: \begin{bmatrix} 1 & \tan \theta & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix} A skewY (y-axis shear, affecting the y-coordinate based on x) uses \tan \theta in the (2,1) off-diagonal position: \begin{bmatrix} 1 & 0 & 0 \\ \tan \theta & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix} Shearing is part of affine transformations and is supported in standards like SVG via theskewX and skewY functions.[28][29]
Affine transformations in general encompass combinations of the above, represented by arbitrary 2D matrices of the form:
\begin{bmatrix}
a & b & e \\
c & d & f \\
0 & 0 & 1
\end{bmatrix}
or their 3D extensions with additional dimensions for depth in volumetric vector graphics. These preserve collinearity and ratios along lines, ensuring consistent rendering. In 3D vector graphics, 4×4 matrices extend this framework to include z-axis operations.[28][30]
To apply these transformations to vector paths, the matrix is multiplied by the homogeneous coordinates of each control point (e.g., Bézier curve anchors), transforming the entire path efficiently in a single operation. This matrix-based approach allows concatenation of multiple transformations into a single matrix, optimizing computational performance in rendering pipelines.[28][29]