
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>
Para integrar SVG en HTML, tiene varias opciones, las más importantes se describen brevemente en las siguientes secciones.
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>
Los archivos SVG también se pueden definir como la fuente del contenido de elementos (como se muestra a continuación). Luego, el archivo SVG se muestra dentro del iFrame. A diferencia de la integración a través de elemento, este tipo de integración interpreta enlaces dentro del contenido SVG y también ejecuta cualquier JavaScript que pueda existir.
<!DOCTYPE html>
<html>
<head lang="en">
...
</head>
<body>
<iframe src="http://blog.sap-press.com/example.svg" width="500" height="500" scrolling="no" >
<!-- For older browsers that don’t support SVG -->
<img src="http://blog.sap-press.com/example.tif" width="500" height="500" alt="Alternative PNG image">
</iframe>
</body>
</html>
También puede integrar archivos SVG como objetos multimedia usando el
Similar a la integración a través de la elemento, este tipo de integración interpreta enlaces dentro del contenido SVG, y JavaScript también es compatible.
<!DOCTYPE html>
<html>
<head lang="en">
...
</head>
<body>
<object data="http://blog.sap-press.com/example.svg" width="500" height="500" >
<!-- For older browsers that don’t support SVG -->
<img src="http://blog.sap-press.com/example.tif" width="500" height="500" alt="Alternative PNG image">
</object>
</body>
</html>
También se pueden utilizar archivos SVG (rodeados de URL()) como un valor para el antecedentes CSS propiedad (como se muestra a continuación). En este caso, el contenido del archivo SVG se utiliza como imagen de fondo para el elemento (o elementos) correspondiente seleccionado por la regla CSS respectiva. Sin embargo, los enlaces dentro del contenido SVG y el código JavaScript no se interpretarán.
<!DOCTYPE html>
<html>
<head lang="en">
...
</head>
<body>
<div style="background: url(example.svg); width: 500px; height: 500px" ></div>
</body>
</html>
Una característica particularmente conveniente es el hecho de que SVG también se puede definir directamente «en línea» dentro del código HTML (como se muestra en la siguiente lista). Luego, el navegador interpreta el SVG en su lugar, por lo que también se interpretan los enlaces y JavaScript.
<!DOCTYPE html>
<html>
<head lang="en">
...
</head>
<body>
<svg id="svg" version="1.1"
baseProfile="full"
width="500" height="500"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" />
<circle id="circle" cx="100" cy="100" r="80" />
</svg>
</body>
</html>
Los elementos individuales dentro de un documento SVG se pueden diseñar usando CSS, aunque las propiedades no son las mismas que las que usa al diseñar elementos HTML. Para ver una selección de elementos permitidos, consulte la siguiente tabla. También puede encontrar una lista completa en la especificación SVG en www.w3.org/TR/SVG2/estilo.html.
Aquí hay un ejemplo en el que el SVG de arriba está diseñado con CSS.
rect {
stroke-width: 4;
fill: #FFFFFF;
stroke: #3080D0;
}
11
#circle:hover {
cursor: pointer;
}
#circle {
fill-opacity: 0.5;
stroke-width: 4;
fill: #3080D0;
stroke: #3080D0;
}
#circle.active {
fill: #000000;
}
text {
fill: #FFFFFF;
font-family: sans-serif;
}
No solo puede diseñar los elementos en un documento SVG usando CSS, también puede acceder a elementos individuales usando JavaScript, modificarlos, agregar nuevos elementos y básicamente realizar todas las demás operaciones DOM que ya conoce.
Como ejemplo de esto, describiremos dos casos de uso: primero, cómo agregar detectores de eventos a elementos SVG individuales usando JavaScript, y segundo, cómo cambiar dinámicamente la posición de un elemento gráfico usando JavaScript.
El siguiente ejemplo de código contiene un ejemplo de registro de detectores de eventos en elementos SVG. Aquí el incrustado se accede primero al elemento a través del getElementById() método y luego el
'use strict';
function init() {
const svgDocument = document.getElementById('svg');
const circle = svg.getElementById('circle');
circle.addEventListener('click', (e) => {
console.log('Hello World');
});
circle.addEventListener('mouseover', (e) => {
circle.classList.toggle('active');
});
circle.addEventListener('mouseout', (e) => {
circle.classList.toggle('active');
});
}
window.addEventListener('DOMContentLoaded', init);
Los elementos SVG, por supuesto, también se pueden cambiar dinámicamente a través de JavaScript, por ejemplo, la posición del
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>SVG example</title>
<link rel="stylesheet" href="http://blog.sap-press.com/styles/styles.css"></head>
<body>
<script src="http://blog.sap-press.com/scripts/main.js"></script>
<svg id="svg" version="1.1"
baseProfile="full"
width="500" height="500"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" />
<circle id="circle" cx="100" cy="100" r="80" />
</svg>
<div>X: <input id="sliderX" type="range" min="1" max="500" value="100" /> </div>
<div>Y: <input id="sliderY" type="range" min="1" max="500" value="100" /> </div>
</body>
</html>
Luego, un detector de eventos para el cambio evento se agrega a cada control deslizante (ver más abajo), dentro del cual el moverCírculo() se llama la función. Esta función espera los siguientes parámetros: primero, una especificación de posición y segundo, una especificación sobre la dirección (horizontal o vertical o x o y). En base a esto, o bien el cx atributo (coordenada x del centro del círculo) o el cy El atributo (coordenada y del centro del círculo) se actualiza en consecuencia. El círculo se mueve inmediatamente a la posición correspondiente en el área de dibujo.
'use strict';
function init() {
const sliderX = document.getElementById('sliderX');
const sliderY = document.getElementById('sliderY');
sliderX.addEventListener('change', (e) => {
moveCircle(e.target.value, 'x');
});
sliderY.addEventListener('change', (e) => {
moveCircle(e.target.value, 'y');
});
}
function moveCircle(value, direction) {
const svgDocument = document.getElementById('svg');
const circle = svgDocument.getElementById('circle');
circle.setAttribute('c' + direction, value);
}
window.addEventListener('DOMContentLoaded', init);
Nota del editor: Esta publicación ha sido adaptada de una sección del libro. JavaScript: la guía completa por Felipe Ackermann.
Calle Eloy Gonzalo, 27
Madrid, Madrid.
Código Postal 28010
Paseo de la Reforma 26
Colonia Juárez, Cuauhtémoc
Ciudad de México 06600
Real Cariari
Autopista General Cañas,
San José, SJ 40104
Av. Jorge Basadre 349
San Isidro
Lima, LIM 15073