Desde los inicios de Internet, cuando las conexiones por módem se arrastraban y el byte descargado salía casi por un ojo de la cara, reducir el tamaño de las imágenes se convirtió en una de las técnicas más utilizadas para aligerar la carga de los servidores web y aumentar la velocidad a la que se sirven las páginas. Así, muchos de nosotros aprendimos que JPG era el mejor para fotos, PNG para gráficos y dibujos simples, y GIF para animaciones que nos ahorrasen la necesidad de un objeto pesado como un vídeo o un Flash.
El que, sin embargo, ha pasado bastante desapercibido es SVG. Aparte de ser un formato ideal para redimensionar sin perder calidad (Scalable Vector Graphics), este formato vectorial tiene la ventaja de tener un tamaño muy reducido para imágenes simples, independientemente de sus dimensiones, ya que se guarda como un XML interpretable. Por ejemplo, éste sería el código de una bandera de España (sin escudo):
<?xml version=“1.0” encoding=“UTF-8”?>
<svg xmlns=“http://www.w3.org/2000/svg” height=“500” width=“750”> <rect fill=”#c60b1e” height=“500” width=“750”/> <rect fill=”#ffc400” height=“250” width=“750” y=“125”/>
</svg>
Como véis, la bandera está definida por un rectángulo de 750×500 píxeles de gules (nombre heráldico del color #c60b1e), sobre el que se superpone otro rectángulo de 750×250 píxeles de oro (#ffc400) a 125 píxeles del borde superior. Es decir, que 215 bytes son suficientes para representar esta imagen en SVG, mientras que en PNG ocuparía 2’7 KBytes. Y la misma imagen 10000 veces más grande ocuparía en SVG tan sólo 14 bytes más, los correspondientes a añadir dos ceros tras cada una de las dimensiones indicadas.
Para imágenes algo más complejas, aparte de los rectángulos se usan trazas definidas a partir de vectores (un punto y una dirección), lo que puede dar lugar a cualquier curva y hacer que su redimensionado no presente pixelado alguno. Por ejemplo, la misma bandera de España, con el escudo, comienza tal que así:
<?xml version=“1.0” encoding=“UTF-8”?>
<svg xmlns=“http://www.w3.org/2000/svg” height=“500” width=“750”>
<rect fill=”#c60b1e” height=“500” width=“750”/>
<rect fill=”#ffc400” height=“250” width=“750” y=“125”/>
<path d=“M167.989 222.241C167.989 222.241 167.478 222.241 167.197 222.081 166.916 221.918 166.069 221.116 166.069 221.116L165.39 220.632 164.772 219.776C164.772 219.776 164.037 218.605 164.374 217.692 164.711 216.783 165.277 216.46 165.788 216.194 166.297 215.927 167.366 215.605 167.366 215.605 167.366 215.605 168.217 215.231 168.498 215.175 168.779 215.122 169.799 214.855 169.799 214.855 169.799 214.855 170.081 214.696 170.362 214.589 170.647 214.482 171.041 214.482 171.269 214.426 171.494 214.372 172.061 214.191 172.398 214.173 172.923 214.152 173.755 214.266 174.04 214.266 174.321 214.266 175.282 214.322 175.675 214.322 176.069 214.322 177.482 214.212 177.879 214.212 178.273 214.212 178.558 214.163 179.012 214.212 179.462 214.266 180.253 214.531 180.481 214.642 180.707 214.749 182.064 215.231 182.571 215.391 183.08 215.547 184.325 215.764 184.892 216.031 185.453 216.301 185.799 216.752 186.08 217.127 186.365 217.501 186.417 217.909 186.53 218.178 186.638 218.445 186.642 219.02 186.534 219.287 186.42 219.553 186.02 220.104 186.02 220.104L185.397 221.119 184.607 221.758C184.607 221.758 184.04 222.298 183.591 222.241 183.136 222.195 178.558 221.385 175.619 221.385 172.679 221.385 167.985 222.241 167.985 222.241” fill=”#ad1519”/>
<path d=“M167.989 222.241C167.989 222.241 167.478 222.241 167.197 222.081 166.916 221.918 166.069 221.116 166.069 221.116L165.39 220.632 164.772 219.776C164.772 219.776 164.037 218.605 164.374 217.692 164.711 216.783 165.277 216.46 165.788 216.194 166.297 215.927 167.366 215.605 167.366 215.605 167.366 215.605 168.217 215.231 168.498 215.175 168.779 215.122 169.799 214.855 169.799 214.855 169.799 214.855 170.081 214.696 170.362 214.589 170.647 214.482 171.041 214.482 171.269 214.426 171.494 214.372 172.061 214.191 172.398 214.173 172.923 214.152 173.755 214.266 174.04 214.266 174.321 214.266 175.282 214.322 175.675 214.322 176.069 214.322 177.482 214.212 177.879 214.212 178.273 214.212 178.558 214.163 179.012 214.212 179.462 214.266 180.253 214.531 180.481 214.642 180.707 214.749 182.064 215.231 182.571 215.391 183.08 215.547 184.325 215.764 184.892 216.031 185.453 216.301 185.799 216.752 186.08 217.127 186.365 217.501 186.417 217.909 186.53 218.178 186.638 218.445 186.642 219.02 186.534 219.287 186.42 219.553 186.02 220.104 186.02 220.104L185.397 221.119 184.607 221.758C184.607 221.758 184.04 222.298 183.591 222.241 183.136 222.195 178.558 221.385 175.619 221.385 172.679 221.385 167.985 222.241 167.985 222.241L167.989 222.241z” fill=“none” stroke=”#000” stroke-linejoin=“round” stroke-width=“0.26”/>
Pero generar imágenes de menos tamaño en disco no es la única ventaja de SVG frente a otros formatos. Además, posee manejadores para ciertos eventos como onMouseOver y onClick, lo que en combinación con lenguajes como JavaScript aumenta sus posibilidades, dando lugar a creaciones como un Tetris guardado en una imagen.
En cuanto a su difusión, SVG debe parte de su éxito a la Wikipedia, que lo ha utilizado por defecto para banderas, escudos y otras imágenes esquemáticas, así como a la apuesta de diversos navegadores por renderizarlo de forma nativa. Gracias a HTML5 y los estándares, prácticamente cualquier navegador moderno puede visualizarlo, pero Adobe sigue ofreciendo un plugin para ver SVG en navegadores antiguos.
Vía | Jef Claes: How Wikipedia uses HTML5 to save bandwidth
Más información | Juego del Tetris en formato SVG
