10.1 Trabajando con gráficos vectoriales escalables (SVG)
La tecnología SVG usa una forma de notación basada en XML que se ha incorporado a HTML5. Esta tecnología te permite agregar contenido gráfico interactivo en tus páginas Web. SVG comprende un conjunto de elementos que encierra en un elemento <svg> y que pasan a formar parte del modelo de objetos del documento (DOM) para tu página Web.
SVG está estrechamente relacionado con HTML. Si así lo deseas, puedes definir el contenido de un documento SVG con marcado. HTML es un lenguaje declarativo para estructurar páginas. SVG es un lenguaje complementario para crear estructuras visuales. Puedes interactuar tanto con SVG como con HTML utilizando DOM APIs.
Los documentos SVG son árboles vivos de elementos que puedes secuenciar de comandos y estilo, al igual que HTML. Puedes adjuntar controladores de eventos a elementos SVG. Por ejemplo, puedes usar los manejadores de eventos de clic para hacer botones SVG o regiones que se puedan acceder mediante clics. Esto es esencial para crear aplicaciones interactivas que usan entrada de mouse.
Agregar SVG a una página
Agregar SVG en línea a una página HTML es tan simple como agregar cualquier otro elemento.
Hay varias formas de usar SVG en la Web, incluidos los elementos <img>. Usaremos SVG en línea en HTML, porque se integrará en el documento HTML.
El siguiente ejemplo muestra un rectángulo con contorno rojo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<svg width="200" height="200">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
</svg>
</body>
</html>
Haz clic aquí para observar el resultado.
SVG dibuja objetos en el orden en que aparecen en el documento. Si agregas un círculo después del rectángulo, aparece encima de la primera forma. Daremos a ese círculo un trazo azul de 8 píxeles de ancho y ningún estilo de relleno, por lo que se destaca, como se muestra en el siguiente ejemplo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<svg width="200" height="200">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" />
</svg>
</body>
</html>
Haz clic aquí para observar el resultado.
Transformando elementos SVG
Hay elementos de organización en SVG destinados a combinar múltiples elementos para que puedan transformarse o vincularse como unidades. El elemento “<g>” significa "grupo". Los grupos se pueden usar para combinar múltiples elementos relacionados. Como grupo, pueden ser referidos por una identificación común. Un grupo también se puede transformar como una unidad. Si agregas un atributo de transformación a un grupo, todos los contenidos de ese grupo se transforman. El atributo de transformación puede incluir comandos para traducir, escalar y sesgar.
También puedes especificar una matriz de transformación.
Ejemplo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<svg width="200" height="200">
<g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" />
</g>
</svg>
</body>
</html>
Haz clic aquí para observar el resultado.
Reutilizando contenido
SVG tiene un elemento <defs> para definir contenido para uso futuro. También tiene un elemento llamado <use> que puede vincular a sus definiciones. Esto permite reutilizar el mismo contenido varias veces y eliminar la redundancia. En el ejemplo siguiente se muestra un grupo utilizado tres veces en diferentes posiciones y escalas transformadas.
El grupo tiene el id ShapeGroup y contiene un rectángulo y un círculo. Las formas reales de rectángulo y círculo se definen sólo una vez dentro del elemento <defs>. El grupo definido no es, por sí mismo, visible. En cambio, hay tres elementos <use> vinculados al grupo de formas, por lo que tres rectángulos y tres círculos aparecen representados en la página:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<svg width="200" height="200">
<defs>
<g id="ShapeGroup">
<rect x="10" y="20" width="100" height="80" stroke="red" fill="#ccc" />
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8" />
</g>
</defs>
<use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.5)" />
<use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.4)" />
<use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)" />
</svg>
</body>
</html>
Haz clic aquí para observar el resultado.
Patrones y gradientes
El círculo y el rectángulo previamente desarrollados tienen estilos simples de llenado y trazo. Los objetos se pueden pintar con estilos más complejos, incluidos degradados y patrones. Los degradados pueden ser lineales o radiales.
Los patrones pueden estar formados por gráficos de píxeles o incluso otros elementos SVG. El ejemplo siguiente muestra un rectángulo con un degradado de color lineal, así como un círculo con una textura de grava. La textura proviene de una imagen JPEG que está vinculada desde un elemento de imagen SVG:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<svg width="200" height="200">
<defs>
<pattern id="GravelPattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
<image x="0" y="0" width="100" height="67" xlink:href="Green_door.jpg"></image>
</pattern>
<linearGradient id="RedBlackGradient">
<stop offset="0%" stop-color="#000"></stop>
<stop offset="100%" stop-color="#f00"></stop>
</linearGradient>
</defs>
<rect x="10" y="20" width="100" height="80"
stroke="red"
fill="url(#RedBlackGradient)" />
<circle cx="120" cy="80" r="40" stroke="#00f"
stroke-width="8"
fill="url(#GravelPattern)" />
</svg>
</body>
</html>
Haz clic aquí para observar el resultado.
Rutas SVG
SVG tiene rutas de forma libre, así como formas simples. Los elementos de ruta tienen atributos “d”. La "d" significa datos. Dentro del valor del atributo “d” puedes especificar una serie de comandos de dibujo de ruta. Cada comando puede tomar argumentos de coordenadas. Algunos de los comandos son “M” para “move to”, L para “line to”, “Q” para curva cuadrática y “Z” para cerrar la ruta.
El ejemplo siguiente usa un elemento de ruta para dibujar una forma de rectángulo usando una serie de comandos lineales.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<svg width="200" height="200">
<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="blue" />
</svg>
</body>
</html>
Haz clic aquí para observar el resultado.
Uso de texto SVG
SVG también es compatible con texto. El texto en SVG se puede seleccionar dentro del navegador. Si lo desean, los navegadores y los motores de búsqueda también pueden permitir a los usuarios buscar texto dentro de los elementos de texto SVG. Esto tiene importantes beneficios de usabilidad y accesibilidad.
El texto SVG tiene atributos que son similares a las reglas de estilo CSS para HTML. El ejemplo siguiente muestra un elemento de texto que tiene atributos “font-weight” y “font-family”. Al igual que en CSS, la familia de fuentes puede ser un nombre único de familia de fuentes como "sans-serif" o una lista como "Droid Sans, sans-serif" en el orden que prefiera:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<svg width="600" height="200">
<text x="10" y="80"
font-family="Droid Sans"
stroke="#00f"
fill="#0ff"
font-size="40px"
font-weight="bold">
¡ Selecciona este texto !
</text>
</svg>
</body>
</html>
Haz clic aquí para observar el resultado.
