SVG element

As explained in Tiny CSS Projects

An SVG element is a structured graphical element in an SVG document that represents or contributes to vector artwork.

An SVG element is a structured graphical element that helps create vector artwork. A responsive loading screen can be built from eleven rectangles inside an inline SVG, with each rectangle positioned and styled independently. section 3.1 section 3.2.1

Work with SVG elements by treating them as shapes on a coordinate grid:

• Start at the origin, (0,0), in the SVG document’s top-left corner. section 3.2.1
• Increase x to move farther right and y to move farther down. section 3.2.1
• Account for each rectangle’s width and the gaps between rectangles when laying out a loader. section 3.2.1
• Apply styles inline, in a style element, or through a separate stylesheet when the SVG is inline in HTML. section 3.3

Coloring loader rectangles

An SVG rectangle can receive a presentation attribute directly, such as <rect fill="blue">. The same property can be selected from CSS, for example: rect { fill: blue; }. A sequence of rectangle selectors can give each loader bar a different fill color. section 3.3

Figure 3.1 Goal for this chapter

Use the goal figure to connect SVG rectangles, progress feedback, and the finished responsive loader. section 3.1

Figure 3.3 Positioning elements on a coordinate plane

Use the coordinate-plane figure to plan each SVG element’s position from the origin. section 3.2.1

How Tiny CSS Projects covers it

How deep it goes

Explains coordinates, import boundaries, CSS styling, and presentation attributes without surveying the complete SVG attribute set.

Examples

Uses an eleven-rectangle loader, coordinate-plane placement, and CSS fill colors applied through rectangle selectors.

What you can do after

Build it from scratch by positioning SVG rectangles and styling them with CSS or presentation attributes.

How it connects

Connects SVG elements with rectangles, coordinate systems, CSS, HTML, inline SVG, and progress elements.

liveBookmanning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  D3.js in Action, Third EditionAn SVG element is an element in an SVG document that defines or contains vector graphic content.

Compare how 2 books explain SVG element →

Related concepts

• foreignObjectincludes · An SVG foreignObject element embeds non-SVG content, such as HTML elements, within an SVG document.
• Document Object Modelpart of · The Document Object Model (DOM) is a standard programming interface that represents a document as a structured tree of objects and provides ways to access and modify its content and structure.
• dimensionpart of · A dimension is an independent coordinate, measurable axis, or descriptive attribute used to represent, locate, or analyze something.
• attributeconfigured by · An attribute is a named property, value, or piece of information associated with an entity, object, or program element.
• CSSused by · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
• SVGincludes · SVG, or Scalable Vector Graphics, is an XML-based standard and file format for describing scalable, resolution-independent two-dimensional vector graphics.

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