Elementos HTML

SVG y MathML

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Dibuja gráficos y escribe fórmulas matemáticas dentro de HTML. Ambos forman parte de la página y usan los mismos tokens.

`<math>`

MDN

Una fórmula escrita en MathML. Sigue siendo texto real: se puede seleccionar, ampliar y leer con lectores de pantalla.

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 no añade estilos: se mantiene el aspecto del navegador. El navegador lo distribuye; LUZ no añade nada.

`<svg>`

MDN

Una imagen vectorial escrita en la página. Puede usar los colores y tokens de la página y se mantiene nítida a cualquier tamaño.

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>

Con estilos de elements/media.css, sin clase. LUZ solo limita el ancho. Los iconos mantienen el tamaño que les dan sus propias clases o atributos.