HTML
Diferencias entre canvas, SVG y MathML para gráficos, ilustraciones, contenido matemático e interfaces visuales dentro de documentos HTML.
HTML puede integrar tres modelos gráficos diferentes:
canvas → superficie de dibujo controlada por JavaScript
SVG → árbol vectorial con elementos accesibles y estilables
MathML → estructura semántica para fórmulas matemáticas<canvas width="800" height="450">
Gráfico de ventas mensuales.
</canvas>El bitmap se dibuja mediante JavaScript. Los objetos dibujados no se convierten en nodos DOM individuales.
Aporta para:
<canvas width="800" height="450"></canvas>Los atributos definen el buffer de dibujo. Cambiar solo CSS puede estirar el bitmap y hacerlo borroso.
Para pantallas de alta densidad, JavaScript puede ajustar el buffer según device pixel ratio.
El contenido descendiente funciona como fallback:
<canvas id="sales-chart">
<p>Las ventas aumentaron de 20 a 45 millones.</p>
</canvas>No basta con escribir “gráfico”. Ofrece datos equivalentes, tabla o descripción.
Interacciones dibujadas necesitan controles DOM accesibles o una representación alternativa sincronizada.
Dibujar una imagen cross-origin sin CORS compatible puede marcar el canvas como tainted e impedir exportar o leer píxeles.
<img crossorigin="anonymous" ...>El servidor debe responder con permisos CORS; el atributo por sí solo no basta.
<svg
viewBox="0 0 24 24"
aria-hidden="true"
focusable="false"
>
<path d="..."></path>
</svg>SVG inline forma parte del DOM, puede estilizarse y reaccionar a eventos.
Un icono decorativo dentro de un botón puede ocultarse porque el texto o aria-label ya nombra la acción.
<svg role="img" aria-labelledby="chart-title chart-desc" viewBox="0 0 600 400">
<title id="chart-title">Ventas mensuales</title>
<desc id="chart-desc">Las ventas aumentan de enero a junio.</desc>
...
</svg>Para gráficos complejos, añade también datos o explicación externa. Title/desc no siempre bastan para relaciones detalladas.
<img src="logo.svg" alt="Acme">Se comporta como imagen reemplazada. El contenido interno del archivo no queda disponible como DOM de la página y el alt pertenece a img.
<svg viewBox="0 0 100 100">...</svg>Define el sistema de coordenadas y permite escalado responsivo.
Sin viewBox, un SVG inline puede no escalar como esperas.
No hagas focusable cada path o grupo si no representa una interacción. Los controles deben tener un orden de teclado comprensible.
Cuando un gráfico necesita navegación detallada, puede ser mejor acompañarlo con tabla, lista o controles HTML.
SVG y MathML tienen namespaces y reglas propias dentro del parser HTML. Ciertas etiquetas o atributos distinguen mayúsculas según el lenguaje integrado.
No apliques automáticamente todas las reglas de sintaxis HTML dentro de SVG.
<math display="block">
<mrow>
<mi>E</mi>
<mo>=</mo>
<mi>m</mi>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>Representa la estructura matemática, no una imagen de una ecuación.
Beneficia escalado, selección, accesibilidad y procesamiento.
Comprueba soporte en navegadores objetivo y tecnologías de asistencia. Para contenido crítico, una explicación textual cercana puede aportar claridad adicional.
No uses alt de una imagen como única representación de una demostración matemática extensa.
No transmitas datos únicamente mediante color en canvas o SVG. Usa labels, patrones, formas o texto equivalente.
Mide el caso real.
<button type="button" aria-label="Cerrar">
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="..."></path>
</svg>
</button>¿Por qué un gráfico canvas necesita una tabla o descripción alternativa?
Porque los elementos dibujados no existen como nodos semánticos que una tecnología de asistencia pueda recorrer o relacionar.
Tablas de datos explica cómo representar información bidimensional.