SVG Guía de inicio. Creación, uso y manejo de imágenes svg en la web 10.9.15
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
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:
- Su facilidad de creación.
- Sus múltiples formas de inclusión en las páginas web.
- El soporte universal por los navegadores actuales.
- Su modificación/alteración y adecuación en vivo con css.
- Su poco peso, reducción de peticiones al servidor.
- 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
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:
- Cada curva, objeto u elemento del diseño generará un path* en el código del SVG.
- 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.
Está 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
La 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.
Kseso
the obCSServer ᛯ 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 Kseso
Como siempre, excelente lo suyo.
ResponderEliminarMuchas gracias por la clase!
No uso mucho las imágenes SVG. Hace tiempo empecé a probar VML (un precursor de las vectoriales) y más tarde quise rellenar etiquetas 'canvas'. Hoy lo más cercano que uso son los gradientes para 'background-image'.
ResponderEliminar;-)
Pero es cierto son muy prácticos para crear shapes y combinarlos con filtros que se pueden llamar desde CSS. Digo, además de las ventajas que exponés en el artículo.
Lo que me quedé pensando, porque a ese editor lo uso mucho, es el tema de guardar *.svg en GIMP. Porque resulta que no es vectorial, aunque internamente arme sus imágenes con un mecanismo muy parecido al SVG. Eso puede ayudar a la hora de exportar una imagen previamente creada con un editor vectorial; pero igual me parece que no lo hace. Existen plug-in que no sé si funcionan y que deben aprovechar esa capacidad de componer imágenes con capas, y habría que probarlos.
El que es parecido (en cuanto a concepto) y sí trabaja con vectores es el Inkscape. Aunque estoy seguro que después de "guardar" igual hay que revisar el código para limpiar la basura agregada.
Muy interesante esta entrada del blog, siempre ponés alguna cosa para empezar a investigar. Quién sabe si después alguien se vuelve experto y en unos meses lo tenés colaborando.
Pues bien y chevere, pero aun no me gusta como es la inplementación, lo genial sería una via del tipo figure o img, pero sin necesidad de añadir el código al html, sino que siga siendo externo. Estoy a favor del vector, no soy tan fan de inskape, sino más de ilustrator y hace tiempo que quiero implementar mis propios iconos (O ilustraciones vectoriales, seria fantastico hacer 'flat design' pero poder cambiar atributos a los path y animarlos solo con css) sin necesidad de convertirlos en fuentes, o bitsmaps, pero, por ahora prefiero la limpieza de un html sin svg. Además canvas rasteriza, cosa que no me parece (aparte q no soy muy bueno en javascript xD), ojala en un futuro me tome mas seriamente las posibilidades svgerianas, pero por ahora me quedo con mis fuentes o sprites.
ResponderEliminarEl uso de me parece una simplificación genial, pero que tenga que estar relacionado al mismo html, no tanto. Solo espero que la w3c en algún momento se decida a que sin necesidad de backend, podamos usarlo como la sintaxis 'background:url' y aun sea posible la edición por css, pero eso es pedirle demasiado solo para confort del frontender.
De resto felicitaciones por otro excelente articulo.
Pero es que pueden estar en otro html, Ehru
EliminarAl utilizar el <use xlink:href="#svg-tema"/> nada impide que la ruta sea otra que un ancla o enlace interno de la página donde se usa.
Tranquilamente puede ser otro documento:
<use xlink:href="iconos.svg#K-svg"/>
Un saludo y gracias por la aportación.
Correción al penultimo parrafo: El uso de ('< use >') me parece... ;)
ResponderEliminarEstoy bastante interesado en lo que le respondiste a Ehru, podrías ampliarme un poco más el asuntillo que de lo más curioso se me antoja mucho, si no es mucho pedir claro esta y de antemano, un ¡muchas gracías, eres el mejor! xD
ResponderEliminarg3kdigital
ResponderEliminarLo amplié en el artículo. Creo que ahora queda más claro.
Un saludo
Ampliado y asombrosamente genial explicado, que grande que sos. Fijate que he revisado el articulo porque estoy pensando hacer una animacionsita en svg, aunque primero la probare usando solo las animaciones de css y ya haré la comparación.
ResponderEliminarPor cierto, aquí, sino lo habías visto hay un webinar de animaciones svg http://jorgeatgu.com/blog/charla-sobre-animaciones-svg-en-vectoresio/#more-3384.
Un saludo y muchas gracias por la atención prestada ;)
Por cierto, como les dije, me puse en la tarea de lograr recrear esto: https://plus.google.com/+EdgarGutierrezCamacho/posts/TiwSbMZSZFq es un proyecto personal, para mi sitio web.
EliminarPero, me he enredado un monton al intentar hacerlo con defs y use como ando haciendo en este pen: http://codepen.io/g3kdigital/pen/zoyIt así que teniendo una larga conversación en twitter con @JorgeATGU me dí cuenta que se corre aún mucho riesgo si se trabajan los svg como lo haces en el ejemplo '4' o eso, o sigo enredado :P porque intente recrearlo justo como hiciste en la demo de la 'k' que tienes en tu codepen y aún así, extraordinariamente no me funciona :/ jejeje.
Quedo pendiente a ver que me comentan, de igual forma voy hacerlo primero como en el ejemplo 'html 3' y más tarde les comento mis avances.
Sí. Conozco a Jorge y su blog. Posíblemente el mejor en español sobre svg´s.
EliminarEl pen de la "K" animada fue precisamente a raíz de un post de Jorge sobre un bug.
Lo que tienes que tener presente es el tema del viewBox, como bien te dice Jorge, sus medidas y el elemento donde lo muestres.
Fíjate que en los svg´s que yo utilizo en los iconos el viexBox tiene el mismo valor en todos (0 0 100 100). Y mantengo la relación de tamaño 1:1 a la hora de mostrarlos en la página.
Pero quizás deberías comenzar con algo más sencillo ;-)
Un saludo
Tienes razón con el consejo, lo cierto es que me fue mal jejeje y decidí redimirme recreando el GIF con puro css y usando svg como background aqui: http://codepen.io/g3kdigital/pen/qxsHi
EliminarAun no me he rendido y tal vez en otro proyecto personal si termine usando svg y sus animaciones, pero aun me falta mucho, sobre todo porque mi objetivo es usarlo, reitero, con use y defs pero aun no se como hacerlo bien, aun sigo haciendo experimentos ene l illustrator para descubrir un mejor flujo de trabajo a la hora de exportar los svg.
Por cierto, descubrí y no se sí sea un error que los svg como backgraound-image, no se ven afectados por el background-size, cosa que no me gusto mucho la verdad.
Saludos.
Tengo problema al usar:
ResponderEliminarSe ve en mozilla pero no en chome, solo se ve cuando los path estan en el mismo html pero no cuando los quiero llamar de un archivo externo.
gracias
""
ResponderEliminarPerdon me referia a esto: use xlink:href="images/icons/menu_icons.svg#computadoras"
ResponderEliminarEl use de un archivo externo no funciona en Chome, o no se que puede estar mal porque si funciona en mozilla
Hola Ysaac
EliminarSiento no poder aclararte si en Chrome es un bug o algo que estés haciendo mal o no haciendo.
Como verás, todo lo relativo al SVG es un aspecto secundario del blog por mi escaso (casi nulo) conocimiento sobre él.
Sin embargo sí puedo mencionarte a quien realmente es un experto en la materia: Jorge Aznar aka @jorgeATGU en twitter. Pásate por su blog.
Un saludo
Hola que tal!!
ResponderEliminarEstoy trabajando en un proyecto con Web GL y Three js y necesito poder importar una imagen.svg y poder modificarlo (escalar, extruir, etc) usando Three js. Cualquier cosa me serviría Gracias!!
Hola Dhernandez
EliminarPara cuestiones relativas a SVG´s, ya sea su creación o uso de SMIL, Web GL o cualquier otra "librería" para manejarlos te tengo que remitir a Jorge Aznar
Como verás por ese artículo que te enlazo y que nos regaló (el link va al pie de post donde tienes formas de contacto con él) es la persona indicada para ayudarte, tanto por conocimientos sobre la materia como por la labor divulgativa que realiza.
Un saludo
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarEstos sí son programas de creación y limpieza de SVG
EliminarPero "eso" tuyo que enlazabas (¿cuándo fue hecho, en el 98? Jose Manuel no sabría cómo llamarlo, aparte de spam del malo. Por eso lo borro.
Un saludo
seria un span si ofrezco mis productos. pero si lo que te indico es como crear gráficos svg dinamicos en la web y poderte los descargar gratuitamente... no fue mi intencion hacer publicidad,un saludo y gracias
EliminarNo. Eso es como tú lo quieres ver o hacer ver.
EliminarYo, que tengo el botón, tras ver lo que ahí había lo catalogo de spam y como tal lo trato.
Mi blog, mis reglas.
Te limitaste a llegar, buscar por svg y en el primer resultado tirar tu enlace. Digo el primero porque un pelín más abajo te aparecía el enlace que te indiqué en mi respuesta anterior como ejemplo de lo que son programas de creación de gráficos vectoriales.
Un saludo
me gusto tu blog de creación y limpieza svg no lo conocia un buen trabajo gracias por compartir tus conocimientos
EliminarHola Don Kseso!!
ResponderEliminarEsto es el futuro: imágenes escalables que no pierden calidad; ahora con el auge de tantos dispositivos...
Te dejo este generador de patterns SVG que conocí no hace mucho tiempo y que me enamoró:
http://qrohlf.com/trianglify/
Yo sigo teniendo la inquietud de la validación: cómo usar el código y que valide. Terminé por no seguir investigando :/
Un abrazo!
Hola Karla
EliminarPor temas de validación creo que no debería haber problemas con los SVG´s.
Tienen su propia especificación.
Y gracias por el recurso que compartes, aunque creo que te debiste confundir de enlace y pusiste un generador de canvas, no de svg´s ;-)
Un saludo
Hola gente.
EliminarSospecho que el tema de la validación viene justamente por usar generadores que escriben su propio código. Después hay que abrirlo con uno de texto simple, y pasarle la escoba. Siempre tenemos que evaluar si conviene hacerlo a mano, aunque una imagen vectorizada de una fotografía *.jpg exige una aplicación que nos ahorre el trabajo duro.
¿Ya existe algo así? Debe consumir recursos a lo pavote. :-P
Claro, Furoya.
Eliminar¿Recuerdas qué ocurría al usar el m$ Word, macromedia o cualquier otro para hacer una web y después de quitar y poner elementos y guardar como página web le pasabas el validador?
Pues eso.
No es el formato si no la herramienta.
Y el emular una imagen mapa bits a chorrocientos colores "naturales" con un gráfico vectorial... como el hacerla con _box-shadow_, aplicaciones hay para esto último (alguna mencioné en este blog), pero llevarlo más allá de "curiosidad" no tiene sentido.
Un saludo
*-*... Aquí el enlace:
Eliminarhttp://qrohlf.com/trianglify-generator/
También puedes descargar la imagen en formato PNG.
Un saludo.
Karla : no estás de suerte. El elemento de la imagen también es un canvas. Pero no le quita mérito a tu aporte, es más, si internet no se hubiese llenado de vagos que queremos todo hecho, hasta serviría de incentivo para emularlo usando solamente SVG (y JS o PHP, para procesar el formulario). Lo que no me fijé es si te ofrece la imagen como mosaico. Si no lo hace ¡ahí tenemos otra mejora para ponerle! (Bah, tendrán otros, ya queda claro que yo no lo voy a hacer.)
EliminarKseso : cómo no me voy a acordar. En realidad usaba FrontPage y Word Perfect (porque MS Word en esa época no editaba HTML) y a la segunda página que tuve que limpiar ... agarré el Notepad de entrada. Después lo cambié por el Editpad (gratis) y todavía lo uso.
Saludos para ustedes también.
Tienes razón furoya y lamento el malentendido desde el principio. Ciertamente el generador no te facilita el "gráfico descargable con formato SVG" (estoy leyendo mi comentario inicial y así lo dije), sin embargo, al abrirlo con el navegador se puede acceder al código de éste y puede ser útil.
EliminarCon respecto a "los vagos de Internet" que mencionas, no lo sé...A veces las cosas que parecen fáciles terminan siendo todo lo contrario y viceversa...hay de todo y para todos.
Saludos ;)