Empezando con Scalable Vector Graphics (SVG).

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Como diseñador web, ya es hora que sepa como implementar SVG (Scalable Vector Graphics) en sus sitios web. Ahora, vamos a echar un vistazo a los fundamentos básicos de SVG, así como también a los diseños más complejos como logotipos o iconos.

Lo Que Usted Creará

Resolución Independiente

Recientemente en la feria WWDC de 2012, Apple anunció el lanzamiento de la nueva MacBook Pro con pantalla retina. La pantalla retina tiene un densidad de pixeles (220.5ppi) más alta que las pantallas o monitores estándares y Apple afirma que la densidad de pixel de su tecnología retina es tan alta que el ojo es incapaz de notar la pixelación a una distancia de vista normal. Si ha sido testigo de la pantalla retina entonces estoy seguro que estará de acuerdo y pensará que son impresionantes. Sin embargo, estas pantallas retinas pueden empezar a causar problemas para nosotros los diseñadores web.

El problema ocurre cuando las imágenes que fueron guardadas anteriormente como 72pdi ahora empiecen a verse distorsionadas en las pantallas retina. La solución a este problema aún no ha sido resuelta al 100% y los diseñadores están buscando nuevas formas de tratar y superar este problema.

Una solución posible (en algunos casos) es usar SVG. ¿Por qué querría usar SVG? Bueno, los SVG son renderizados como vectores y, por lo tanto, pueden cambiar de tamaño en cualquier resolución de pantalla en la que los veamos, mientras mantenemos la nitidez y la calidad de cristal que pensamos cuando lo diseñamos por primera vez.

Esto no resolverá todos los problemas, no podemos usar SVG para renderizar pixeles mediante imágenes como .jpg o png (sin embargo, para eso, siempre podemos usar la etiqueta canvas). En cuanto a cosas como iconos ilustrados o logotipos entonces, SVG resulta extremadamente útil. Hoy, voy a mostrarle los fundamentos básicos para usar SVG, así como también, le demostraré cómo puede hacer con los vectores que usted diseño en Adobe Illustrator e implementarlos en sus sitios web.

SVG resumido en Diez Puntos

Antes de que empecemos, voy a darle una resumen rápido de SVG:

SVG significa Scalable Vector Graphics.
SVG es usado para definir vectores gráficos en la web.
El formato XML es usado para definir los vectores gráficos.
SVG no pierde calidad cuando han cambiado de tamaño o de visualización.
Los SVG pueden ser animados.
Los archivos SVG se integran con el DOM y pueden trabajar junto con JavaScript y CSS.
Los archivos SVG pueden ser indexados, lo que significa que si usted tiene texto en el SVG, entonces los motores de búsqueda como Google, por ejemplo, lo elegirán.
SVG puede ser impreso en cualquier resolución.
Actualmente, SVG es una recomendación por parte de W3C.
SVG funciona en los navegadores modernos, aunque no tienen soporte en IE 8 o en una versión menor. Un plugin puede ser usado para cualquier cosa debajo de eso.

Vamos a crear algunas formas SVG.

Lineas

Empecemos por algo sencillo. Crearemos una linea. Hacemos esto añadiendo el siguiente código a un documento HTML.

1	<svg>
2	<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:1"/></line>
3	</svg>

Primero, usamos la etiqueta svg y luego, dentro de esa etiqueta añadimos el marcado xml. Aquí está lo que vamos a definir:

X1: La posición inicial de la línea sobre el eje x.
Y1: La posición de la linea sobre el eje y.
X2: La posición final de la linea sobre el eje x.
Y2: La posición final de la linea sobre el eje y.

Por ejemplo, si queríamos crear una linea diagonal, entonces podríamos ajustar el atributo de Y2 a 200 y esto llevaría el punto final de la linea hacia abajo hasta que llegue a los 200, así pues, se crea una linea diagonal. Además, podemos aplicar algunos estilos a esto y hacerlo con CSS. Aquí hemos usado algunos estilos inline, pero usted puede usarlos en una hoja de estilos externa si así lo desea.

1	<svg>
2	<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0,255,255);stroke-width:10"/></line>
3	</svg>

Círculos

Los círculos se pueden crear una una forma parecida a las lineas, con la excepción de algunos atributos. Aquí crearemos un círculo plateado con un borde de color negro y un radio de 50px.

1
2	<svg>
3	<circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="silver"/>
4	</svg>

Los atributos cx y cy son los únicos donde podemos ajustar las coordenadas x - y en medio del círculo. Si omitimos estos atributos, entonces el centro del círculo estaría ajustado a '0' lo que daría como resultado que el círculo sea cortado fuera de la página. Finalmente, el atributo marcado como 'r' fija el radio del círculo.

Rectángulos

Como puede ver por ahora, crear formas con SVG, es realmente sencillo. Crear un rectángulo no es una excepción.

1	<svg>
2	<rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:5"/></rect>
3	</svg>

En una forma similar para ajustar la anchura y altura de un elemento en CSS hacemos lo mismo, pero usando los atributos 'rect' del SVG.

Elipse

La elipse funciona casi de la misma forma como crear un círculo, sin embargo, esta vez en lugar de tener un radio fijo, tenemos atributos separaos para los radios x y y.

1	<svg>
2	<ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/></ellipse>
3	</svg>

Polígonos

Los polígonos son un poco más difíciles de hacer (pero solo un poco). Empezamos dándole un color al polígono, un contorno de color naranja y un trazo con un grosor de 10. Después, le asignamos el atributo punto. Cada para de coordenadas define las coordenadas x y y de cada punto de las esquinas del polígono. En esta demostración he creado una estrella.

1	<svg>
2	<polygon fill="green" stroke="orange" stroke-width="10" points="350, 75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"/><polygon>
3	</svg>

Texto

Como mencione anteriormente, SVG es magnífico porque cuando incluimos texto los motores de búsqueda pueden indexarlo, a diferencia de otros motores de renderizado como Flash.

Así es como agregamos texto:

1	<text x="0" y="34" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:34; fill :#000; ">webdesigntuts+</text>

En el código de arriba puede ver que hemos agregado las coordenadas x y y. Luego, ajustamos algunos estilos CSS tales como el font-family, weight, size y color.

Trazos

Dentro de la etiqueta Path necesitamos concentrarnos en el atributo 'd'. Este atributo 'd' describe el trazo para crearse. Cada comando dentro del atributo 'd' es una de las letras controladores que aparecen abajo, seguido por sus parámetros: Los controladores para el atributo 'd' son los siguientes:

M: moveto
L: lineto
H: horizontal lineto
V: vertical lineto
C: curveto
S: smooth curveto
Q: quadratic Bezier curve
T: smooth quadratic Bezier curveto
A: elliptical Arc
Z: closepath

Aquí están algunos ejemplos de código:

1
2	<svg>
3	<path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428" style="fill:none;stroke:2;"></path>
4	</svg>

Incluso, podemos ajustar el texto desde arriba hasta seguir ese trazó así como esto:

  
<svg>  	
	<defs>  		
		<path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428"></path>  	
	</defs>  
	<text x="0" y="34" fill="black" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:22; fill :#000; ">  	
		<textPath xlink:href="#path1">webdesigntuts+</textPath>  	
	</text>  
</svg>

Basicamente, hemos definido el trazo en la etiqueta 'defs' y le hemos dado un id de 'path1'. Después, podemos aplicar esto al texto usando el atributo 'textPath'.

Crear un Logotipo SVG y un Icono que cambian de tamaño.

Ahora que hemos cubierto los conceptos básicos para crear formas usando SVG, es hora de continuar con algo un poco más complejo. Por fortuna para nosotros, aunque no tiene que ser tan complejo, de hecho, es en realidad muy sencillo gracias a Adobe Illustrator. Para aquellos de ustedes que no saben algo sobre Illustrator, éste puede ser descrito como:

El ambiente principal de la industria de dibujo y vectores para crear gráficos que pueden cambiar de tamaño a través de los diferentes medios.

Abra Illustrator y cree su logotipo nuevo o su icono. La mayoría de los logotipos deberán ser creados usando vectores así es como usted deberá conseguirlos para sus clientes. Si no es así, entonces podría tratar de recrearlos usted mismo. Si usted no está familiarizado con trabajar con Illustrator, le sugiero visitar Vectortuts+ en donde hay una abundante cantidad de información al respecto.

Una vez que usted tenga su logotipo o su icono, diríjase a 'File > Save as; y desde el menú desplegable seleccione la opción 'Save as type'. De a su archivo un nombre y luego haga clic en 'Save'. Entonces, deberá de abrir el diálogo de opciones SVG. Desde ahí seleccione la opción 'Show SVG code'. Esto abrirá el código en el navegador. Usted simplemente necesita copiarlo e incluirlo entre las etiquetas svg dentro de su documento HTML y eso es todo. ¿Cuán sencillo fue eso?

También puede usar Illustrator para crear trazos. Simplemente dibuje una linea en Illustrator, arrastre el dato del atributo 'd' que usted puede usar para un trazo como se describió anteriormente. Por ejemplo, el trazo que he creado para el texto 'webdesigntuts+' que está arriba, fue creado en Illustrator y luego exportado dentro de mi documento.

Entonces puede agregar estilos o ubicar la etiqueta SVG dentro de su documento usando los métodos estándar de CSS. También puede ponerlo en una etiqueta de anclaje <a> para crear un enlace, o seleccionarlo con JavaScript para agregar una funcionalidad extra.

Conclusión

Ahora, solo es cuestión de tiempo antes de la densidad retina y pixel sean parte de cada dispositivo y pantalla que usamos y esto continuará avanzando con grandes densidades en el futuro. Al usar SVG somos capaces de crear gráficos que pueden cambiar de tamaño que son renderizaos con mucha claridad y que estarán listo para el futuro a medida que las resoluciones de pantalla sean mayores. Por supuesto, los SVG no son prácticos en cada situación, pero para los vectores basados en ilustraciones en la web es definitivamente la mejor manera.