• Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram

S4PCADEMY_Logo
  • Inicio
  • Novedades
  • Academia SAP
  • FAQ
  • Blog
  • Contacto
Twitter Linkedin Instagram
Programming

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 , , , , y para definir formas geométricas.

Descripción general de los elementos más importantes en SVG

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="https://blog.sap-press.com/example.svg" alt="SVG-Grafik" width="500" height="500" >

</body>

</html>

Integración a través del elemento