Vector image

As explained in Everyday Data Visualization

A digital image represented by geometric paths and shapes that can be resized without loss of resolution.

A vector image represents a picture as instructions for paths: where an imaginary pen moves, whether paths are filled, and how strokes look. Unlike raster images, which store colored pixels, vectors can usually scale up or down while maintaining their fidelity. section 1.5.4

Keep these practical distinctions in mind:

• Common vector formats include SVG, EPS, and PDF; common raster formats include JPEG, PNG, GIF, and BMP. section 1.5.4
• Scaling a filled path differs from scaling a pen stroke, whose width may remain specified in a constant number of pixels. section 1.5.4
• Choose raster or vector tools according to the job rather than assuming one image type is universally better. section 1.5.4

A practical visualization workflow

Create a chart with code, export it as an SVG, then refine its design in Adobe Illustrator or Figma. This adds control for a one-time visualization, but is less suitable when a web page must recreate the chart on every load. section 1.6

Figure 1.12 The difference between scaling a stroke (on the left) and scaling a path (on the right)

Compare how scaling a stroke differs from scaling a path, the key caveat behind vector resizing. section 1.5.4

How Everyday Data Visualization covers it

How deep it goes

Explains paths, fills, strokes, formats, scaling, and tool specialization, but stops short of implementation details.

Examples

Uses SVG, EPS, PDF, Illustrator, Figma, coded charts, and a stroke-versus-path scaling comparison.

What you can do after

Apply it via SVG workflows and choose vector or raster tools for a visualization’s scaling and editing needs.

How it connects

Connects vector images with raster images, SVG, design software, coding, and data visualization.

liveBookmanning.com

Read Everyday Data Visualization on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  D3.js in Action, Third EditionA vector graphic is an image represented by mathematical descriptions of geometric shapes rather than by fixed pixels.

Compare how 2 books explain vector image →

Related concepts

• bitmap imagecontrasts with · A bitmap image is a raster representation of visual content as a grid of individually encoded pixels.
• SVGincludes · SVG, or Scalable Vector Graphics, is an XML-based standard and file format for describing scalable, resolution-independent two-dimensional vector graphics.
• boundary representationequivalent to · Boundary representation is a solid-modeling scheme that defines an object through its bounding faces, edges, vertices, and their connectivity.
• curveuses · A curve is a continuous or piecewise-continuous geometric path or representation of a relationship between variables.
• coordinatehas part · A coordinate is a numerical value or ordered set of values specifying a position relative to a coordinate system.

This explainer was generated by Manning's knowledge graph from the text of Everyday Data Visualization. The section links point to the parts of the book it draws on.