¿Qué es SVG?

Los archivos de gráficos vectoriales escalables (SVG) son un tipo de formato de imagen, muy similar a los archivos de marcado HTML, que permite que, mediante código, se creen gráficos basados en vectores, es decir, en base a formas geométricas, coordenadas, etc... Este tipo de formato nace como una ampliación del lenguaje HTML, que no dispone de etiquetas o mecanismos para crear formas geométricas lo suficientemente flexibles como para diseñar gráficos avanzados.

Además, se les llama formatos vectoriales escalables porque al estar basados en vectores y coordenadas, se puede reducir o ampliar sus dimensiones (escalar) sin sufrir pérdida de calidad, como ocurre en las imágenes basadas en píxeles. Esto nos da una flexibilidad muy interesante a la hora de diseñar imágenes sin tener en cuenta los tamaños o una posible pérdida de calidad en tamaños diferentes a los que la imagen fue diseñada.

Esencialmente, hay 3 formas diferentes de utilizar imágenes SVG en nuestras páginas. Desde ficheros SVG externos, desde SVG en línea y desde Data URI. Veamos a continuación cada uno de ellos por separado, para entender en que consisten.

SVG externo

Quizás la forma más común, es guardar nuestra imagen SVG (y por lo tanto, código SVG) en un fichero externo con extensión .svg. Luego, podemos utilizarlos desde etiquetas como <img> o <picture> y enlazarlo desde nuestro documento HTML o desde propiedades como background-image desde CSS.

Esto podrían ser dos ejemplos:

<!-- Un SVG desde una etiqueta HTML -->
<img src="/assets/manz.svg" alt="Imagen vectorial">

<style>
/* Un SVG desde una propiedad CSS */
.element {
  background: url(/assets/manz.svg);
}
</style>

Una de las grandes pegas que tiene usar SVG desde ficheros externos es que no permiten modificaciones en tiempo real de sus etiquetas y/o atributos con CSS o Javascript. Al ser imágenes externas, no son modificables y sólo podemos referenciarlas y mostrarlas en el navegador.

SVG inline

Cuando hablamos de SVG en línea o SVG inline nos referimos a escribir el código SVG directamente en nuestro documento HTML. Colocamos la etiqueta contenedora <svg>, junto a todos sus elementos interiores. Dentro de esta categoría de SVG en línea también entraría, por ejemplo, crear un elemento SVG utilizando Javascript mediante funcionalidades para manipular el DOM, utilizando JSX en React, o formas similares que, a su vez, finalmente, lo hacen en HTML.

Un ejemplo de como se vería en nuestro documento HTML sería el siguiente:

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg">
    <path d="M0,0 V50 L50,0 Z" fill="black" />
  </svg>
</div>

Observa que el elemento <svg> figura en el propio documento HTML y posee sus propios elementos interiores, como por ejemplo el elemento <path> del que hablaremos más adelante.

SVG data URI

Por último, y aunque podría entrar en el primer grupo, existe una forma menos conocida de generar los denominados Data URI. Se trata de generar mediante enlaces URL el propio fichero .svg en cuestión, ahorrándonos la petición, ya que el navegador lo genera al vuelo.

Para ello, simplemente utilizamos la sintaxis como si fueramos a referencia un fichero externo:

.box {
  width: 100px;
  height: 100px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="M0,0 V50 L50,0 Z" fill="black"/></svg>');
}

<div class="box"></div>

Sin embargo, observa que en la función url() indicamos varias cosas:

• El prefijo data:, que indica que vamos a especificar un data URI.
• El formato image/svg+xml, que corresponde al MIME del fichero .svg.
• La codificación utilizada para escribir el código del .svg, que es utf8 en nuestro caso.
• Por último, indicamos el propio código del fichero. Cuidado, que algunos carácteres pueden dar error.

Con estas data URI se pueden indicar otros formatos de archivo diferentes a .svg, o incluso su contenido con otras codificaciones, como por ejemplo, base64, que es bastante común para indicar ficheros binarios en data URI.

Editores de SVG

Las imágenes SVG se pueden crear con editores gráficos visuales de forma más sencilla, sin embargo, estos programas no son tan versátiles a la hora de crear código, por lo que siempre merece la pena conocer ambas formas y utilizar el adecuado en el caso necesario.

Algunos programas interesantes para crear y modificar archivos .svg son los siguientes:

Personalmente, utilizo Inkscape. Es un programa open source gratuito, rápido y muy potente. En los siguientes temas veremos como empezar a crear el contenido de un archivo SVG, sus etiquetas y atributos.