HTML elements

SVG and MathML

Draw graphics and write maths inside HTML. Both are part of the page and take the same tokens.

`<math>`

MDN

A formula written in MathML. It stays real text: selectable, zoomable and readable by screen readers.

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

HTML

<math display="block">
  <mrow>
    <mi>x</mi><mo>=</mo>
    <mfrac>
      <mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow>
      <mrow><mn>2</mn><mi>a</mi></mrow>
    </mfrac>
  </mrow>
</math>

LUZ adds no style: the browser look is kept. The browser lays it out. LUZ adds nothing.

`<svg>`

MDN

A vector image written into the page. It can use the page colors and tokens, and stays sharp at any size.

HTML

<svg viewBox="0 0 240 120" width="240" height="120" role="img" aria-labelledby="d-svg-title" style="color: var(--luz-brand-primary)">
  <title id="d-svg-title">A square and a circle</title>
  <rect x="20" y="20" width="80" height="80" fill="currentColor"/>
  <circle cx="170" cy="60" r="40" fill="none" stroke="currentColor" stroke-width="6"/>
</svg>

Styled by elements/media.css, with no class. LUZ only caps the width. Icons keep the size their own class or attributes give them.