SVG
SVG, or Scalable Vector Graphics, is an XML-based standard and file format for describing scalable, resolution-independent two-dimensional vector graphics.
D3.js in Action, Third Edition
SVG is the Scalable Vector Graphics standard for describing resolution-independent two-dimensional graphics with XML-based elements.
- How it is used
- Builds D3 visualizations from DOM-based vector shapes whose attributes encode visible marks.
- How deep it goes
- Explains containers, coordinates, responsive viewBox sizing, core shapes, styling, grouping, and DOM order through a gallery exercise.
- Examples
- Builds a gallery containing lines, rectangles, circles, ellipses, paths, text, and translated groups, then creates a line-chart container.
- What you can do after
- Build it from scratch by placing, styling, grouping, and responsively sizing SVG marks for D3 charts.
Tiny CSS Projects
SVG is an XML-based standard for describing two-dimensional vector graphics.
- How it is used
- Uses SVG rectangles to create a responsive loading graphic that communicates an ongoing task.
- How deep it goes
- Explains vector coordinates, basic shapes, responsive rectangle placement, and styling access; leaves irregular paths unused.
- Examples
- Shows eleven spaced rectangles in a responsive loader and CSS fill colors applied to individual bars.
- What you can do after
- Build it from scratch: position SVG rectangles in a responsive loader and style their fills with CSS.
Related concepts
- D3.jsused by · D3.js is an open-source JavaScript library for binding data to documents and creating dynamic, interactive visualizations in web browsers.
- canvas elementalternative to · The HTML canvas element is a scriptable bitmap drawing surface in a web document for rendering graphics.
- HTMLcontrasts with · HTML (HyperText Markup Language) is the standard markup language for structuring content and elements in web documents.
- xmluses · XML is a text-based markup language for encoding structured documents and data using elements, attributes, and nested relationships.
- bitmap imagecontrasts with · A bitmap image is a raster representation of visual content as a grid of individually encoded pixels.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.