Agregando gráficos vectoriales a la Web

¿Qué son los gráficos vectoriales?

En la web, trabajarás con dos tipos de imágenes — imágenes de mapa de btis e imágenes vectoriales:

• Las imágenes de mapas de bits son definidas usando un grilla de píxeles — un archivo de imagen de mapa de bits contiene información que muestra exactamente en dónde está localizado cada pixel, y de qué color debe ser exactamente. Los formatos de mapas de bits populares incluyen Bitmap (.bmp), PNG (.png), JPEG (.jpg), y GIF (.gif.)
• Las imágenes vectoriales son definidas usando algoritmos — un archivo de imagen vectorial contiene definiciones de formas y rutas que la computadora puede usar para calcular cómo debe verse la imagen cuando se renderice en pantalla. El formato SVG nos permite crear gráficos vectoriales muy potentes para usar en la web.

Para darte una idea de la diferencia entre los dos, vamos a ver un ejemplo. Puedes encontrar este ejemplo en nuestro repositorio de Github como vector-versus-raster.html — este te muestra dos imágenes aparentemente idénticas una al lado de la otra, de una estrella roja con una sombra negra. la diferencia es que la de la izquierda es un PNG, y la de la derecha es una imagen SVG.

La diferencia se hace aparente cuando haces zoom en la página — la imagen PNG se pixelea a medida que haces zoom porque contiene información sobre dónde debe estar cada pixel (y qué color) — cuando a esta se le hace zoom, cada pixel es simplemente incrementado en tamaño para llenar múltiples pixeles en la pantalla, entonces la imagen empieza a verse como con bloques. La imagen vectorial, sin embargo, continua viéndose clara y nítida, porqueno importa en qué tamaño tiene, los algoritmos son usados para calcular las formas en la imagen, con los valores simplemente siendo escalados ya que se hace más grande.

Además, los archivos de imágenes vectoriales son mucho más ligeros que sus equivalentes en mapa de bits, porque sólo necesitan manejar unos cuantos algoritmos, en lugar de la información de cada pixel en la imagen individualmente.

¿Qué es SVG?

SVG es un lenguaje basado en XML para describir imágenes vectoriales. Es básicamente un marcado, como HTML, excepto que tendrás muchos elementos diferentes para definir las formas que quieres que aparezcan en tu imagen, y los efectos que quieres que se apliquen a estas formas. SVG es para marcar gráficos, no contenido.  En el final más simple del espectro, tendrás elementos para crear formas simples, como <circle> y <rect>. Las características más avanzadas de SVG incluyen <feColorMatrix> (transformar colores usando una matriz de transformación), <animate> (animar partes de tu gráfico vectorial) y <mask> (aplicar una máscara sobre la parte superior de la imagen).

Como un ejemplo simple, el siguiente código crea un círculo y un rectángulo:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="https://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

Esto crea el siguiente resultado:

Del ejemplo anterior, puedes tener la impresión que SVG es código fácil. Sí, puedes escribir código simple SVG en un editor de texto, pero para una imagen compleja esto empieza rápidamente a volverse un poco difícil. Para crear imágenes SVG, la mayoría de personas usan un editor de gráficos vectoriales como Inkscape o Illustrator. Estos paquetes te permiten crear una variedad de ilustraciones usando varias herramientas de gráficos, y crear aproximaciones de fotos (por ejemplo la funcionalidad de trazo de mapas de bits de Inkscape).

SVG tiene algunas ventajas además de las descritras hasta el momento:

• El texto en imágenes vectoriales sigue siendo accesible (lo que también le beneficia a tu SEO).
• Los SVG se prestan muy bien para estilizar o cambiar dinamicamente, ya que cada componente de la imagen es un elemento que puede ser estilizado con CSS o modificado con JavaScript.

Entonces ¿Por qué alguien querría usar gráficos de mapas de bits en lugar de SVG? Bueno, SVG tiene algunas desventajas:

• SVG puede volverse complicado muy rápido, lo que significa que el tamaño de los archivos pueden crecer; Los SVG complejos pueden tomar un tiempo significante de procesamiento en el navegador.
• SVG pueden ser más difíciles de crear que las imágenes de mapas de bits, dependiendo de qué tipo de imagen estás intentando crear.
• SVG no está soportado en navegadores antiguos, así que puede que nos sea adecuado si necesitas soportar versionas antiguas de Internet Explorer con tu sitio web (SVG empezó a ser soportado desde IE9).

Los gráficos de mapa de bits son mejor para imágenes de precisión compleja, tales como fotos, por las razones que describimos anteriormente.

Agregando SVG a tus páginas

En esta sección veremos las diferentes maneras en que puedes agregar gráficos vectoriales SVG a tus páginas web.

La manera rápida: <img>

Para incrustrar un SVG a través de un <img> elemento, sólo necesitas referenciarlo en el atributo src como era de esperar. Necesitarás un atributo height o un width  (o ambos si tu SVG no tiene una relación de aspecto). Si no lo has hecho, por favor ree Imágenes en HTML.

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

Pros

• Rápido, sintaxis de image familiar con un equivalente de texto integrado en el atributo alt.
• Puedes poner la imagen dentro de un hipervínculo fácilemente anidando un <img> en un elemento <a>.

Contras

• No puedes manipular la imagen con JavaScript.
• Si quieres controlar el contenido SVG con CSS, debes incluir estilos CSS en línea en tu código SVG. (Las hojas de estilos externas invocadas desde el archivo SVG no toman efecto).
• No puedes volver a aplicar estilos a la imagen con seudoclases con CSS (como :focus).

Solución de problemas y soporte entre navegadores

Para soportar SVG en navegadores que no soportan SVG (IE 8 y anteriores, Android 2.3 y anteriores), puedes tomar como referencia un a PNG o JPG desde el atributo src y usar un atributo srcset (que sólamente reconocen navegadores recientes) para hacer referencia al SVG. Siendo este el caso, sólamente los navegadores que lo soporten cargarán el SVG — los navegadores antiguos cargarán el PNG en su lugar:

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

También puedes usar SVG como fondos de imagen CSS, como se muestra después. En el siguiente código, los navegadores antiguos se quedarán con el PNG que entienden, mientras que los navegadores recientes cargarán el SVG:

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

Como el método del <img> descrito anteriormente, insertar SVG usando fondos de imagen CSS significa que el SVG no puede ser manipulado con JavaScript, y también está sujeto a las mismas limitaciones de CSS.

Si tus SVG no se muestran del todo, puede ser porque tu servidor no está configurado apropiadamente. Si ese es el problema, este artículo te dirigirá en la dirección correcta.

How to include SVG code inside your HTML

You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your SVG inline, or inlining SVG. Make sure your SVG code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) Here's a very simple example of what you might paste into your document:

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

Pros

• Putting your SVG inline saves an HTTP request, and therefore can reduce your loading time.
• You can assign classes and ids to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any SVG presentation attribute as a CSS property.
• Inlining SVG is the only approach that lets you use CSS interactions (like :focus) and CSS animations on your SVG image (even in your regular stylesheet.)
• You can make SVG markup into a hyperlink by wrapping it in an <a> element.

Cons

• This method is only suitable if you're using the SVG in only one place. Duplication makes for resource-intensive maintenance.
• Extra SVG code increases the size of your HTML file.
• The browser cannot cache inline SVG as it would cache regular image assets.
• You may include fallback in a <foreignObject> element, but browsers that support SVG still download any fallback images. You need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers.

How to embed an SVG with an <iframe>

You can open SVG images in your browser just like webpages. So embedding an SVG document with an <iframe> is done just like we studied in From <object> to <iframe> — other embedding technologies.

Here's a quick review:

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

This is definitely not the best method to choose:

Cons

• iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether.
• Moreover, unless the SVG and your current webpage have the same origin, you cannot use JavaScript on your main webpage to manipulate the SVG.

Active Learning: Playing with SVG

In this active learning section we'd like you to simply have a go at playing with some SVG for fun. In the Input section below you'll see that we've already provided you with some samples to get you started. You can also go to the SVG Element Reference, find out more details about other toys you can use in SVG, and try those out too. This section is all about practising your research skills, and having some fun.

If you get stuck and can't get your code working, you can always reset it using the Reset button.

<h2>Input</h2>
<textarea id="code" class="input">
<svg width="100%" height="100%">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
  <polygon points="120,0 240,225 0,225" fill="green"/>
  <text x="50" y="100" font-family="Verdana" font-size="55"
        fill="white" stroke="black" stroke-width="2">
    Hello!
  </text>
</svg></textarea>
<h2>Output</h2>
<div class="output">
</div>
<div class="controls">
  <input id="reset" type="button" value="Reset" />
</div>

body {
  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}

.input, .output {
  width: 90%;
  height: 10em;
  padding: 10px;
  border: 1px solid #0095dd;
  overflow: auto;
}

.output {
  height: 14em;
}

button {
  padding: 10px 10px 10px 0;
}

var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");

function drawOutput() {
  output.innerHTML = textarea.value;
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawOutput();
});

textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

Summary

This article has provided you with a quick tour of what vector graphics and SVG are, why they are useful to know about, and how to include SVG inside your webpages. It was never intended to be a full guide to learning SVG, just a pointer so you know what SVG is if you meet it in your travels around the Web. So don't worry if you don't feel like you are an SVG expert yet. We've included some links below that might help you if you wish to go and find out more about how it works.

In the last article of this module we will explore responsive images in detail, looking at the tools HTML has to allow you to make your images work better across different devices.

See also

• SVG tutorial on MDN
• Quick tips for responsive SVGs
• Sara Soueidan's tutorial on responsive SVG images
• Accessibility benefits of SVG
• How to scale SVGs (it's not as simple as raster graphics!)