soy Kseso y esto EsCSS

SVG Guía de inicio. Creación, uso y manejo de imágenes svg en la web

Una guía de inicio y uso de las imágenes SVG: su creación, optimización y las diferentes formas de incluirlas en los documentos webs.

SVG Guía de inicio. Creación, uso y manejo de imágenes svg en la web

·Por Kseso ✎ 29
Creación de SVG´s con CorelDraw

El uso en las páginas webs de SVG´s o gráficos vectoriales escalables (Scalable Vector Graphics) vienen pegando fuerte. Y razones no faltan para que este sea el momento de su eclosión y uso masivo en las páginas.

Muchas son las ventajas que ofrecen para ser tenidos en cuenta y dedicarles unos minutos a jugar con ellos y sus posibilidades. Entre otras razones por:

  1. Su facilidad de creación.
  2. Sus múltiples formas de inclusión en las páginas web.
  3. El soporte universal por los navegadores actuales.
  4. Su modificación/alteración y adecuación en vivo con css.
  5. Su poco peso, reducción de peticiones al servidor.
  6. No verse afectados por restricciones "cross domaind" si los usas en vez de icon fonts.

Además de la particularidad inherente a los gráficos vectoriales: el mismo gráfico es independiente del tamaño y resolución con que se muestre. No pierde calidad (ni pixela ni pierde nitidez) al modificar sus dimensiones.
Prueba a redimensionar la imagen de la "K" que está al inicio del artículo.

Generación del SVG

Creación de SVG´s con CorelDraw
Creación de SVG´s con CorelDraw

El crear tus propios gráficos svg es relativamente sencillo. Cualquier programa de edición de vectores te servirá. Yo utilizo una vieja versión de CorelDraw por tenerla a mano. Pero cualquier, otro como Ilustrator o Gimp, será perfectamente válido.

Sólo tienes que tener presente para optimizar la extensión del código y el peso del svg resultante que:

  1. Cada curva, objeto u elemento del diseño generará un path* en el código del SVG.
  2. Limpiar los nodos innecesarios acortará el código del archivo.

*El path podríamos decir de forma coloquial que es cada una de las partes que componen el svg y la unidad mínima sobre la que posteriormente podrás actuar para modificar su color, contorno... e incluso aplicar animaciones y transformaciones css.

peso liviano de un svgEstá bien que una vez creado el svg lo edites en modo texto y limpies un poco el código generado por el editor gráfico. Son propensos a añadir códigos innecesarios.

Una vez terminado podrás ver lo liviano del svg. En el caso de la imagen de ejemplo que estoy utilizando (la "K"), como verás en la captura aquí al lado, con cuatro paths, sólo son 7KB. Nada si los comparamos con los 71KB de la misma imagen a 300x300px en png con fondo transparente que encabeza el lateral del blog.

Además puedes ir un poco más allá y utilizar herramientas como la de Peter Collingridge para optimizar el SVG. En el svg del ejemplo lo bajó de los 7KB a 4KB. No está nada mal, casi un 50%.

Formas de uso del SVG en la web

Varias son las maneras en las que puedes "meter" el svg en tus páginas y hacer uso de él. Y en función de la vía elegida podrás actuar con unas u otras propiedades Css sobre él.

1— SVG vía src en el html

Introducir el svg en el html es tan sencillo como hacerlo con un jpg o cualquier otro formato de imagen con el elemento <img...>

<img src='k_de_kseso.svg' alt='La K de Ksesocss' />

El svg así utilizado admite las mismas propiedades Css que cualquier otro formato u extensión. Puedes cambiar sus dimensiones (ojo, se deformará al cambiar su "aspect ratio") sin que afecte a su calidad de visualización.

2— SVG vía Css con background-image

Similar al anterior, pero introduciendo el svg como elemento estético, no como parte de la información del documento:

header { background-image: url(k_de_kseso.svg) no-repeat center; background-size: contain; /* otras declaraciones */ }

Soporte del Svg vía img y background-image

Podría decirse que el svg utilizado en la ruta del elemento img o como fondo a través de css es soportado por todos los navegadores actuales. Sólo si te preocupa IE8 (y anteriores) o Android 2.3 deberías prever alternativas a él.

Puedes, si así lo deseas, convertir el svg a base64 (hay muchos conversores en línea) y sustituir la url o src por la data uri resultante. Te ahorras una petición pero el documento (ya sea el html o el css) se verá menos "límpio".

La "pequeña pega" de usar el svg de estas formas, vía img o background-image, es de otra índole: que es tratado como un todo, con independencia de los paths o elementos que lo conformen.

Por lo tanto pierdes la posibilidad de manejar cada path por separado y actuar de forma individual sobre cada uno de ellos, ya sea para modificar su apariencia (colores, tamaños...) o su comportamiento (animaciones y transformaciones).

3— SVG en línea

Para preservar el control sobre los elementos que conforman cada svg nada como introducirlo en línea en el html. Sólo necesitas incluir el código obtenido al crearlo (repito, tras su limpieza) allí donde quieras que se muestre:

<body> <!-- elementos precedentes --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 100 100" class='una_clase' id='un_id'> <g id='id_g'> <path id='id_path-1' class='path-1' d="M91.4465 ... /> <path id='id_path-2' class='path-2' d="M17.4668 ... /> </g> </svg> <!-- otros códigos --> </body>

Nota la redundancia en las clases e identificadores únicos que asigno a los distintos elementos que conforman el svg. Usados como selectores en el una hoja de estilo externa podremos aplicar los estilos oportunos a cada uno de ellos.

También podrás incluir las declaraciones Css oportunas bien el línea en cada uno de los elementos que conforman el svg o dentro del propio svg con el elemento <style>. Esta segunda forma permite declarar cualquier regla (incluidas @rules y pseudoclases).

<svg ...> <style> #un_id:hover { } .path-1 { fill: #fff; stroke: #000; } </style> ... <svg>

4— SVG ubicuo

svg en línea desplazadoLa forma anterior de introducir el svg en línea dentro del Html puede, por la longitud del código, generar un poco de ruido en el html. Será un poco menos amigable su manejo.

Para evitarlo podemos recurrir al marcado <defs> para colocar todos los svgs juntos en un mismo svg y mostrar cada uno donde nos interese con el elemento <use xlink:href='ruta'/>.

4.1— Desplazado en el mismo html

Para ello sólo hay que crear el elemento <svg> </svg> justo antes de cerrar el body. Añádele una clase para poder ocultarlo con css display: none. Usando esta forma no es necesario añadir la información de encabezado mostrada en el ejemplo "Html 3".

A continuación creamos el elemento <defs></defs> y dentro de él meteremos todos y cada uno de los <path /> que necesitemos el la página.

En los svg de un solo path no es necesario envolverlo en el elemento <g></g>. Si lo forma más de un path sí hay que usarlo para agruparlos.

Una vez que ya tenemos todos los svg que necesitemos así dispuestos en el html sólo es cuestión de mostrarlos allí donde nos interese. Para ello la especificación define el elemento <use>.

<a class="svg" href="#"> <svg viewBox="0 0 100 100"> <use xlink:href="#svg-tema"/> </svg> </a>

El nexo de unión para mostrar la imagen deseada y no otra es el valor del atributo xlink:href en el elemento use, que es exactamente el mismo de la id del path en el svg del final del documento.

En caso de que la imagen esté conformada por varios paths se indican todos y cada uno de ellos para ser mostrados:

<a class="svg" href="#"> <svg viewBox="0 0 100 100"> <use xlink:href="#beerware-1"/> </svg> <svg viewBox="0 0 100 100"> <use xlink:href="#beerware-2"/> </svg> </a>

4.2— Desplazado en otro documento .svg

Pero lo más normal será utilizar los distintos gráficos vectoriales en más de un documento html. Con lo que la forma anterior (colocarlos antes del cierre del body de cada html) sería tan desaconsejable como hacer lo mismo con el Css

Así que lo más indicado es crear un documento con extensión .svg (mis_iconos.svg por ejemplo) donde tener todos los gráficos vectoriales juntos. Cada path debe tener su #id obligatoriamente.

Una vez creado el archivo .svg sólo es necesario indicar en el atributo xlink:href la ruta al documento .svg más el id de cada path que conforma el gráfico:

<a class="svg" href="#"> <svg viewBox="0 0 100 100"> <use xlink:href="ruta/mis_iconos.svg#svg-tema"/> </svg> </a>

El elemento symbol

Otra forma de incluir los SVG es haciendo uso del elemento symbol. Su funcionamiento es similar al elemento defs.

Especialmente recomendado para su uso con iconos ya que tienes una serie de ventajas que lo hacen ideal para tal fin. Chris Coyier te lo cuenta muy bien en su post SVG 'symbol' a Good Choice for Icons. De lectura recomendada.

Si lo que quieres es una explicación más "técnica" del elemento symbol los chicos de MDN tienen este artículo.

Y con el artículo de Sara Soueidan Structuring, Grouping, and Referencing in SVG — The <g>, <use>, <defs> and <symbol> Elements dejarán de tener secretos.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso