Cómo integrar gráficos vectoriales en un programa de JavaScript
By s4pcademy
Además de poder dibujar gráficos basados en píxeles a través de JavaScript usando la API de Canvas, también puede usar JavaScript para crear gráficos vectoriales.
Uno de los formatos más conocidos, que ha vuelto a celebrar gracias a HTML5 en particular, es el formato SVG. SVG es un lenguaje de marcado basado en XML para describir gráficos vectoriales bidimensionales. Para ello, la especificación correspondiente (www.w3.org/TR/SVG2/) proporciona varios elementos tales como
Puede crear gráficos SVG manualmente, pero esto suele ser bastante tedioso, especialmente cuando se trata de crear gráficos más complicados. Es más fácil crear gráficos apropiados en uno de los numerosos programas vectoriales disponibles, exportarlos a formato SVG (los programas como Adobe Illustrator, Inkscape y otros similares suelen ofrecer esa opción) y luego usarlos en la página web adecuada. Puede ver un ejemplo simple de un documento SVG a continuación: un círculo blanco sobre un fondo negro.
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#000000" />
<circle id="circle" cx="100" cy="100" r="80" fill="#ffffff" />
</svg>
Integrando SVG en HTML
Para integrar SVG en HTML, tiene varias opciones, las más importantes se describen brevemente en las siguientes secciones.
Integración a través del elemento ![]()
Aquí, el archivo SVG correspondiente simplemente se vincula a través del origen atributo de la elemento (ver abajo). Los navegadores que pueden manejar SVG mostrarán el documento SVG vinculado en el lugar apropiado en el HTML.
Sin embargo, los enlaces definidos dentro del contenido SVG no son compatibles con este tipo de integración. Lo mismo se aplica al código JavaScript que aparece dentro del documento SVG. Este código no será interpretado ni ejecutado.
<!DOCTYPE html>
<html>
<head lang="en">
...
</head>
<body>
<img src="http://blog.sap-press.com/example.svg" alt="SVG-Grafik" width="500" height="500" >
</body>
</html>
