SVG para tus páginas webs, pasa de los gradientes css

En nomaspatanes algunos somos desarrolladores web y en la medida que podamos daros consejillos que os faciliten la vida pues mejor que mejor.

Muchos de vosotros haréis vuestros pinitos en páginas web, algunos no pasarán de poner la letra en "comic sans" pero los que seáis un poco más avanzados sabréis que el CSS3 permite muchas cosas que hacía tiempo que hacían falta.

A consecuencia de este artículo me he decidido a daros un consejillo al respecto

Imagina que quieres poner un degradado en un fondo, en CSS paa que vaya en los diferentes navegadores (que soporten el gradiente) sería una cosa así:



.fondo-degradado {
background: -moz-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Es un tochaco ¿no? Y esto no servirá para muchos navegadores que no soportan el gradiente (por ejemplo el circular)
Sin embargo, está el SVG ¿Que es el SVG? es un formato de imagen vectorial abierto. Sus principales cosas buenas son:

1. Si lo agrandas o reduces no pierden calidad. Lo que lo hace perfecto para móviles
2. Puedes crearlos con un blog de notas, con inkscape, illustrator, freehand o lo que más te guste, incluso hay herramientas web gratuitas.
3. Ocupan muy muy poco, porque son para dibujos sencillos (logotipos, gráficas,etc...) no para fotografías. 
4. Lo soportan más navegadores que los gradientes radiales, por ejemplo y no hay que escribir 20 veces el código tipo: -webkit-radial-gradient, -moz-radial-gradient, o-radial-gradient...
5. Soportan animaciones por lo que en muchos casos son ideales para ponerlos de fondo de algo.
6. Te permite separar el css de las imágenes quitando mucho código de la hoja de estilos.

animación en SVG

El código cómo el de arriba sería

.fondo-degradado {

background:url(gradiente.svg);

}

fichero gradiente.svg

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">

 <title>gradiente</title>

 <defs>

  <radialGradient r="0.5" cy="0.5" cx="0.5" id="svg_1">

   <stop stop-opacity="0.8" stop-color="#373737" offset="0.3"/>

   <stop stop-color="#000000" offset="1"/>

  </radialGradient>

 </defs>

 <g>

  <title>Capa 1</title>

  <rect id="svg_1" width="640" height="480"  y="0" x="0" stroke-width="4" stroke="#000000" fill="url(#svg_1)"/>

 </g>

</svg>

Es más claro, es más fácil (lo puedes hacer con un programa de diseño vectorial) y te ahorras aprender el lenguaje de cada navegador.