Grafería SVG

Comparó SVG y Canvas antes. Si estás tratando de decidir entre ellos, lee eso. Yo diría que la diferencia número uno entre ellos es el vector (SVG) versus el ráster (Canvas). Pero la diferencia número dos es cómo trabajas con ellos. SVG es declarativo, es decir, elementos literales que expresan lo que son a través de atributos y contenido. Canvas es imperativo, como en las instrucciones de guión que debe seguir.

Canvas es una API de JavaScript, por lo que puede funcionar bien con desarrolladores de JavaScript o entornos donde la interfaz de usuario que se está creando está basada en JavaScript. Pero SVG está en (y tiene un) DOM, ¡y el DOM también tiene API! Eso significa que puedes escribir un script SVG si lo deseas. Podría decirse que no es particularmente conveniente. Acabo de ver Graphery SVG, que es claramente un intento de rectificar eso.

Cómo programarías la creación de un rectángulo rosa con API DOM estándar:

const div = document.querySelector('#drawing');const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');svg.setAttribute('width', '100%');svg.setAttribute('height', '100%');div.appendChild(svg);const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');rect.setAttribute('x', '10');rect.setAttribute('y', '10');rect.setAttribute('width', '90');rect.setAttribute('height', '90');rect.setAttribute('fill', '#F06');svg.appendChild(rect);

Congrafía SVG:

const svg = gySVG().width('100%').height('100%');const rect = svg.add('rect').x(10).y(10).width(90).height(90).fill('#f06');svg.attachTo('#drawing');

Me encanta ese encadenamiento. Choca esos cinco, jQuery.