SVG

En esta lección se trata la etiqueta principal de SVG, la etiqueta <svg>. Las formas básicas SVG (líneas, rectángulos, círculos, cuvas, etc.) se comentan en la lección Formas básicas SVG. Algunas formas más avanzadas se comentan en la lección Formas avanzadas SVG.

Qué es SVG

SVG (Scalable Vector Graphics = Gráficos Vectoriales Escalables) es un lenguaje de marcas creado por el W3C y dirigido a la representación de gráficos vectoriales (dibujos y texto).

En la lección sobre Historia de la Web) se comentan las recomendaciones de SVG publicadas o en preparación por el W3C.

En un gráfico vectorial, los elementos de la imagen están definidos como formas elementales (líneas, rectángulos, círculos, curvas, polígonos, etc.), definidas mediante etiquetas simlares a las del HTML. Por ello SVG no es un formato adecuada para fotografías, pero es idóneo para cualquier tipo de dibujo, técnico o artístico.

Las ventajas de SVG son muchas:

Un gráfico SVG puede incluirse en una página web de dos maneras, como objeto interno o como objeto externo.

Desgraciadamente, el uso de SVG se vió frenado porque Internet Explorer no fue capaz de mostrar gráficos SVG hasta IE 9 y de forma deficiente. Actualmente (octubre de 2018), los principales obstáculos al uso generalizado de SVG siguen siendo que las implementaciones en los navegadores todavía son incompletas y los potenciales riesgos de seguridad (debido a que las imágenes SVG pueden contener código Javascript, se recomienda no incorporar imágenes SVG sin haber comprobado antes su contenido).

De todas formas, SVG se ha ido imponiendo poco a poco como formato estándar de gráficos vectoriales frente a otros formatos propietarios y numerosos programas de edición de gráficos son capaces de importar y exportar en formato SVG.

Para saber más

Imágenes SVG

Una imagen SVG puede incluirse en una página web directamente o puede enlazarse mediante la etiqueta <img>, como se comenta en la lección Imágenes.

El ejemplo siguiente muestra una imagen SVG incluida en una página web (concretamente, en un párrafo <p>):

<p>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="170" height="165" viewBox="0 0 170 165">
    <polygon fill="yellow" stroke="red" stroke-width="7"
      points="129,150 85,119 41,150 57,104 15,66
        68,66 85,15 102,65 156,66 113,98" />
  </svg>
</p>

El ejemplo siguiente muestra una imagen SVG enlazada desde una página web (mediante la etiqueta <img> y el contenido del fichero enlazado (estrella.svg):

Estrella SVG

<p><img src="../img/svg/estrella.svg" alt="Estrella SVG"></p>
<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="170" height="165" viewBox="0 0 170 165">
  <polygon fill="yellow" stroke="red" stroke-width="7"
    points="129,150 85,119 41,150 57,104 15,66
      68,66 85,15 102,65 156,66 113,98" />
</svg>
  

La declaración xml (la primera línea del fichero estrella.svg del ejemplo anterior) es optativa si la versión de XML es 1.0 y obligatoria si la versión de XML es 1.1. En cualquier caso, se aconseja incluirla y aprovecharla para declarar el juego de caracteres del documento (como en el ejemplo, UTF-8).

La etiqueta <svg>

La etiqueta <svg> engloba toda la imagen SVG e incluye las formas que forman la imagen.

El plano SVG

Los dibujos SVG se definen en un plano infinito en el que el eje Y está orientado hacia abajo, como muestra el dibujo siguiente en el que se muestran los ejes de coordenadas, cuatro puntos en rojo y sus coordenadas.

Y X (100, 100) (100, -100) (-100, -100) (-100, 100)

Los atributos de la etiqueta <svg>

Los atributos version y xmlns

El atributo version de la etiqueta <svg> indica la versión de SVG empleada en el dibujo. En estos apuntes se utiliza la versión 1.1. Este atributo no es obligatorio, pero está recomendado para ayudar a los navegadores (aunque en la práctica parece ser que los navegadores no tienen en cuenta este atributo).

El atributo xmlns de la etiqueta <svg> indica el espacio de nombres empleado en el dibujo, es siempre https://www.w3.org/2000/svg. Este atributo es obligatorio cuando la imagen SVG se encuentra en un fichero aparte (con la extensión .svg), pero este atributo es optativo cuando la imagen SVG está incluida en una página web.

Aunque no sea necesario, en estos apuntes se aconseja incluir siempre los atributos version y xmlns como en el ejemplo siguiente:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ...

Referencias: Pregunta en stackoverflow sobre la obligatoriedad de los atributos version y xmlns

El atributo viewBox

El atributo viewBox establece la porción del plano SVG que muestra la imagen. Este atributo se establece con cuatro valores:

El ejemplo siguiente muestra con una línea roja a trazos la porción del plano SVG que se mostraría con unos valores determinados en el atributo viewbox.

Y X viewBox="-100 -50 200 150" (-100, -50) (100, 100)

La zona visible es independiente de los elementos dibujados, es decir, sólo se mostrarán los elementos (o la parte de los elementos) que se encuentren en la zona visible definida por el atributo viewbox.

Los ejemplos siguientes muestran tres dibujos con los mismos elementos SVG: los ejes de coordenadas y un círculo de radio 100 centrado en el origen, pero con diferentes atributos viewbox

Los atributos width y height de <svg>

El atributo viewBox establece la porción del plano SVG que se muestra en la imagen, mientras que los atributos width y height establecen el ancho y el alto de la imagen en la página web. Si no se indican unidades, los valores se interpretan en px.

Así, una misma imagen en el plano SVG se puede ver en la página web más o menos grande, como muestran los ejemplos siguientes:


Si no hay atributo viewBox, la zona visible empieza en el origen (0, 0) y el tamaño definido por width y height es el tamaño de la zona visible.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="100" height="100"
     style="background-color: lightgray">
  <circle cx="0" cy="0" r="50" fill="none" stroke="red" stroke-width="1" />
</svg>

Simplificar una imagen hecha con Inkscape

Las imágenes SVG se pueden crear escribiendo las etiquetas directamente en un procesador de textos (como Visual Studio Code), pero también se pueden utilizar editores gráficos como Inkscape o descargar de repositorios como Open Clip Art. El inconveniente de utilizar imágenes creadas con Inkscape es que Inkscape genera más código del necesario, por lo que a menudo conviene simplificar ese código.

Como ejemplo, si creamos con Inkscape la imagen de la estrella de los ejemplos anteriores y la guardamos como SVG plano, obtendríamos un código fuente similar a este:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg8"
   version="1.1"
   viewBox="0 0 47.098932 43.986142"
   height="166.24683"
   width="178.0117">
  <defs
     id="defs2" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-29.104793,-97.353467)"
     id="layer1">
    <path
       transform="matrix(0.18778215,0.59794988,-0.61065612,0.18387486,103.16359,70.246888)"
       id="use3717"
       d="M 86.178573,89.113093 67.232722,103.35429 74.82756,125.90309 55.428784,112.28529 36.33054,126.47637 43.287288,103.8189 23.889086,90.040679 47.587368,89.655397 54.696864,66.948905 62.386461,89.368253 Z"
       style="fill:#ffff00;stroke:#ff0000;stroke-width:2.92960906;stroke-miterlimit:4;stroke-dasharray:none" />
  </g>
</svg>

Para simplificar una imagen SVG podemos: