Tabla de contenidos
Conocimientos previos
Deben comprenderse las imágenes de mapa de bits y las imágenes vectoriales.
¿Qué es SVG?
SVG (Scalable Vector Graphics) es un lenguaje para describir imágenes vectoriales.
Está basado en XML, y es un estándar para crear gráficos para la web. Es además una recomendación del W3C, por tanto una buena práctica.
El uso de gráficos SVG tiene las ventajas propias de las imágenes vectoriales: no se pierde calidad al aumentar el tamaño. Además en su uso en web tiene otra importante ventaja: el texto dentro de imágenes SVG es legible por motores de búsqueda, lo cual favorece el SEO.
El punto débil de SVG frente a las imágenes de mapa de bits o rasterizadas como las JPG, es que cuando se trata de imágenes muy complejas, como fotografías, SVG se vuelve rápidamente complejo y sus archivos pesados.
Las mejores alternativas para la gestión de gráficos en la web son Canvas y SVG.
Ventajas de usar SVG en vez de otros formatos de imagen:
- Pueden visualizarse en cualquier tamaño, medio (pantalla, impreso en papel, …) sin perder absolutamente nada de calidad.
- SVG es un estándar abierto.
Creación de gráficos con SVG
Pueden crearse imágenes SVG con un simple editor de texto plano, ya que las imágenes SVG no son más que texto, el cual define sus lineas y formas. Sin embargo, esto es solo recomendable para imágenes muy simples. En general, lo más conveniente es usar un programa de dibujo vectorial, como Inkscape, especializado en las imágenes vectoriales, libre y gratuito. Aprender más sobre Inkscape en [QE2c] Introducción a Inkscape.
Cabe destacar que la aplicación GIMP puede abrir y manipular una imagen vectorial, aunque de forma muy limitada. P. ej. puede convertirla/exportarla a una imagen JPG para poder trabajar con mapas de bits, pero no puede modificar el SVG en sí mismo, la descripción que conforma la imagen. Para esto están las aplicaciones como Inkscape.
La forma más simple de crear un gráfico (de barras, circular, etc.) sería crear una simple imagen en formato svg e insertarla con la etiqueta HTML <img>. Sin embargo, perderíamos la capacidad de agregar interactividad. SVG es más que un simple formato de imagen. Nos permite reproducir animaciones.
El elemento <svg> es un contenedor para gráficos SVG.
Formas predefinidas SVG
SVG tiene algunas formas predefinidas que pueden utilizarse:
- Rectangulo <rect>
- Circulo <circle>
- Elipse <ellipse>
- Linea <line>
- Polyline <polyline>
- Polígono <polygon>
- Ruta <path>
Escribir SVG
El siguiente código crea un rectángulo de ancho 400px, alto 180px,
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" />
</svg>En este ejemplo: El atributo ‘x’ define la posición izquierda (atributo ‘left’). El atributo ‘y’ define la posición ‘top’. fill-opacity define la opacidad del color de relleno (rango de 0 a 1). stroke-opacity define la opacidad del color del contorno (rango de 0 a 1). fill: color del relleno. stroke: el color del borde de la forma. stroke-width: ancho del borde en px.
Otros atributos:
- opacity: define la opacidad para el elemento completo.
- rx y ry: redondea las esquinas de una forma.
Círculos SVG <circle>
El siguiente ejemplo crea un círculo de borde negro de 3px de ancho, fondo rojo y radio de 50px (100px de diámetro):
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>Los atributos cx y cy definen las coordenadas del centro del círculo. Si se omiten, el centro será (0,0). El atributo r define el radio del círculo.
Texto SVG <text>
El siguiente ejemplo crea un círculo con texto (<text>) como enlace en su interior. El texto está centrado con el atributo text-anchor=»middle». Se define el texto blanco y el tamaño y tipo de fuente (font-size, font-family):
<svg height="150" width="150">
<circle cx="75" cy="75" r="70" stroke="black" stroke-width="0" fill="#429f30"></circle>
<a xlink:href="#" target="_blank">
<text x="50%" y="55%" text-anchor="middle" fill="white" font-size="23" font-family="'Poppins',Helvetica,Arial,Lucida,sans-serif">Social</text>
</a>
</svg>Agregar SVG a páginas web
El problema de seguridad al usar SVG en la web
El problema radica en los SVG pueden contener código JavaScript, y este podría ser malicioso. Entonces alguien podría publicar en nuestro sitio web imágenes SVG que contuvieran este código. Es un problema relativo, ya que podemos aseguramos de publicar imágenes vectoriales creadas por nosotros mismos.
Agregar SVG con la etiqueta <image>
<img src="nombre_archivo.svg" alt="imagen SVG" height="80" width="100" />La sintáxis es fácil para alguien familiarizado con HTML. Podemos además convertir la imagen en un hiperenlace fácilmente, anidando el bloque <img> dentro de una etiqueta <a>. Sin embargo no podremos manipular la imagen con JS, y el CSS que usemos para dar formato a la imagen debe ser en línea.
Agregar el código insertando el código SVG del fichero
Como ya se ha mencionado, las imágenes SVG son esencialmente un «documento» de texto. Así, podemos abrir el SVG con un editor de texto plano cualquiera, y copiar su texto y pegarlo en una página web.
Este método es también llamado «SVG en línea».
Todo el código que insertemos debe estar encerrado entre las etiquetas <svg></svg>, tal como ya se ha mostrado en los ejemplos de creación de texto SVG.
Entre las ventajas de este método:
- Puede reducir aun un poco más el tiempo de carga de la página
- Posibilidad de usar CSS en todas sus formas (animaciones, pseudoclases, CSS desde la hoja de estilos, …)
- Convertir el SVG en un hiperenlace, encerrándolo con la etiqueta <a></a>.
Los inconvenientes de este método:
- Podría no ser adecuado si el objeto va a estar en múltiples ubicaciones.
- El navegador no puede almacenar en caché el SVG en línea.
Incrustar un SVG con un <iframe>
Aunque se menciona esta posibilidad para que se conozca su existencia, los iframe no son una forma recomendable de insertar nada en páginas web.
Con este método no podremos usar Javascript para manipuilar el SVG.
Agregar SVG a WordPress
Aun actualmente, WordPress no permite la inserción de archivos SVG, de forma predeterminada.
Para cambiar este comportamiento, existen varias soluciones:
- La instalación de un plugin, como Safe SVG o SVG Support.
- la modificación del código del archivo functions.php.
Si optamos por modificar functions.php, debemos tener instalado y activo un tema hijo, sea el que sea. En caso de que esta condición no se cumpla, los cambios hechos en el código se perderán en la próxima actualización. Elegantthemes nos propone, en su artículo, un fragmento de texto, a incluir en functions.php.
Recursos
- [developer.mozilla.org] Turorial SVG de la Mozilla Developer Network.
- [w3schools] El tutorial SVG de w3schools.
- [http://tavmjong.free.fr] Preparar imágenes Inkscape para la web.
Deja una respuesta