Una imagen vectorial es una imagen digital formada por objetos geométricos dependientes (segmentos, polígonos, arcos, muros, etc.), cada uno de ellos definido por atributos matemáticos de forma, de posición, etc. Por ejemplo un círculo de color rojo quedaría definido por la posición de su centro, su radio, el grosor de línea y su color.
Este formato de imagen es completamente distinto al formato de las imágenes de mapa de bits, también llamados imágenes matriciales, que están formados por píxeles. El interés principal de los gráficos vectoriales es poder ampliar el tamaño de una imagen a voluntad sin sufrir la pérdida de calidad que sufren los mapas de bits. De la misma forma, permiten mover, estirar y retorcer imágenes de manera relativamente sencilla. Su uso también está muy extendido en la generación de imágenes en tres dimensiones tanto dinámicas como estáticas.
Principales formatos de imagen vectorial
AI: Formato del programa Adobe Illustrator. Tiene muchas capacidades, según la versión de Illustrator que se haya usado. Es compatible con PDF, de manera que cualquier programa que pueda abrir PDFs lo podrá abrir también, aunque sólo sea para imprimir y no para modificarlo. Permite incluir mapas de bits.
ODG: Formato del tipo Open Document, como el ODT en texto. Lo usa el OpenOffice.org Draw y el LibreOffice Draw. Los formatos del tipo OpenDocument están pensados para el desarrollo de software libre. Permite incluir mapas de bits.
WMF: Formato creado por Microsoft. Las imágenes de los cliparts de Microsoft Office están en este formato. Su uso está muy extendido en las imágenes prediseñadas de los catálogos, pero no suele ser muy usado a nivel profesional. No permite incluir mapas de bits en su interior.
SVG: Formato vectorial recomendado por el W3C (organización internacional que crea estándares para la web). Es un estándar abierto, con lo que cualquiera puede implementarlo en un programa. Muchos navegadores pueden mostrar archivos en este formato, aunque algunos por medio de añadidos. Permite incluir mapas de bits. Es el nativo en Inkscape.
SVG (Scalable Vector Graphics) es un formato vectorial poco conocido pero muy útil para su uso online por su flexibilidad y por la capacidad de ofrecer gráficos con calidad.
(Fuente: http://www.proyectoautodidacta.com)
El formato SVG es para muchos un total desconocido. Cuando queremos colocar algún gráfico en la web, en la mayoría de ocasiones optamos por JPG o alguna vez por un PNG o GIF, en caso de necesitar transparencia o animación. Lo que muchos no saben es que se pueden usar archivos vectoriales para su uso en navegadores.
Vectorial
SVG es vectorial, lo que supone tener todas las ventajas de cualquier formato vectorial. Es escalable, pesa poco y permite una definición mayor a tamaños reducidos, mucho mayor que los archivos bitmap. El formato es igual al que se utiliza con cualquier programa vectorial como Corel Draw o Adobe Illustrator.
Standard abierto y compatible
Así como el formato Flash, que también era vectorial, propiedad de Macromedia, es decir de Adobe, el formato SVG es un formato abierto, estándar y basado en XML. Aunque las primeras versiones no se podían ver en los diferentes navegadores, hoy ya es un estándar que funciona sin problemas en todos los navegadores. SVG se convirtió en una recomendación del W3C en septiembre de 2001 con lo que en estos momentos ya es admitido por todos. A ser un formato basado en XML necesitamos cierto control de código para hacer que un archivo SVG funcione adecuadamente.
Tipografías
El formato SVG nos permite por un lado utilizar las tipografías con trazados pero también nos permite incluirlas dentro del propio archivo en formato TrueType y Tipo 1, lo que nos da una capacidad extraordinaria en cuanto a que los motores de búsqueda son capaces de indexarlo. Hay que tener en cuenta que para el texto puro colocado como tipografía tiene que ser o bien de las fuentes instaladas en el sistema o bien incluidas como estilo CSS.
Proyectos como Iconic también usan el formato SVG para hacer que una tipografía con iconos nos sirva para los diferentes usos y necesidades de tamaño y variación en función de las acciones que deseemos. Puedes ver ejemplos en su web con los que se entenderás realmente y en profundidad el verdadero uso del formato SVG.
INTERACTIVO
Los archivos SVG pesan poco, igual que lo haría un archivo vectorial. Soportan estilos CSS, con lo que si cambiamos el estilo en nuestra web también cambiará dentro del archivo. Puede incluir scripts que permiten caminos dinámicos. Puede admitir acciones como los rollovers o cambios al hacer click. Puedes ver un ejemplo en este enlace: http://codepen.io/chriscoyier/pen/evcBu
ICONOS RESPONSIVE
En la actualidad todas las webs están migrando al formato responsive, así que nos encontramos multitud de iconos que se redimensionan en función del ancho de la pantalla. Normalmente el funcionamiento suele ser sustituir un icono bitmap por otro más pequeño. Con SVG podemos utilizar el mismo y que se vaya reduciendo poco a poco, o bien que utilizar varios tamaños pero que todos ellos sean SVG con la ventaja de la mejor visualización al ser vectorial.
No hay comentarios:
Publicar un comentario