Curso de Formación en

Competencias Digitales

IMAGEN Y FOTOGRAFÍA
DIGITAL
Gráficos vectoriales
Edición: 2.00
Fecha : 01/10/2022

© 2022 Escuela de Transformación digital UAM

Reservados todos los derechos

INDICE
1 INTRODUCCIÓN ........................................................................................................ 2
2 CARACTERÍSTICAS DE LAS IMÁGENES VECTORIALES ........................................................... 5
2.1 ESCALADO ............................................................................................................ 5
2.2 COLOR ............................................................................................................... 5
2.3 RELLENO Y TRAZO .................................................................................................... 6
2.4 TEXTO ................................................................................................................ 7
2.5 ORDEN ............................................................................................................... 7
2.6 ANIMACIÓN ........................................................................................................... 8
3 VENTAJAS E INCONVENIENTES DE LOS GRÁFICOS VECTORIALES ........................................... 9
4 IMPRESIÓN A TRAVÉS DE IMÁGENES VECTORIALES ............................................................10
5 USOS ....................................................................................................................12
6 FORMATOS VECTORIALES...........................................................................................14

Toma nota.

Para pensar.

Actividad.

Escuela de Transformación Digital (UAM) 1

1 INTRODUCCIÓN
Los gráficos vectoriales o imágenes digitales son un formato de archivo gráfico que se componen mediante
la utilización de objetos geométricos:
• Líneas y polilíneas
• Polígonos
• Círculos y elipses
• Curvas Bézier
• Bezígono (polígono creado con curvas de Bézier)
• Texto
Cada uno de estos objetos geométricos se define mediante atributos matemáticos, que serán diferentes
dependiendo del tipo de elemento con el que estemos trabajando. Los objetos son tratados como caminos
(trayectos, path, etc.) donde se identifica un punto inicial y un punto final junto con otros elementos como
puntos intermedios, curvas y ángulos que van apareciendo a lo largo del camino.

Ilustración 1. Ejemplo de bezígono

Los archivos vectoriales proporcionan los puntos y las dimensiones reales del objeto, sin embargo, como
ya sabemos, los archivos de mapa de bits dan aproximaciones mediante la definición de los píxeles.

Ilustración 2. Definición de una línea.

2
Ilustración 3. Definición de un cuadrado.
Si tienes interés en conocer como es un archivo vectorial SVG, puedes editarlo abriéndolo
con el bloc de notas.
Abres el bloc de notas, en el menú Archivo seleccionas Abrir. En la ventana Abrir debes
seleccionar la opción todos los archivos. Se te mostrarán todos los elementos de las
carpetas incluidos los ficheros .svg. Cuando eligas uno comprobarás su estructura y la
información que almacenan.

Los objetos que componen el gráfico son independientes y se pueden editar y manipular de forma aislada;
por otro lado, son escalables y se pueden ampliar sin que se produzca ninguna pérdida de calidad ya que
no tiene una resolución determinada. Podemos rotar, mover, escalar, distorsionar (estirar e inclinar),
combinar o separar los distintos objetos.
Practica un poco con algunos de los objetos que te proporcionan los editores de gráficos
vectoriales. Accede a las Actividades complementarias sesión 3.1. Trabajar con
figuras y realiza la práctica 2. Creación y edición de figuras.

Escuela de Transformación Digital (UAM) 3

Las herramientas de dibujo que utilizamos (pluma, mano alzada, espray, etc.) gestionan los objetos y
permiten que se adapten a las ideas del diseño en el que estemos trabajando.
Cuando trabajamos con imágenes vectoriales podemos incluir imágenes de mapa de bits
que pueden ser tratadas como objetos o convertirse en trayectos de vectores; esta
operación también puede realizarse con textos.
Una vez diseñado una imagen vectorial se puede exportar a un formato de fichero gráfico
rasterizado (mapa de bits) o guardar como gráfico vectorial.

Escuela de Transformación Digital (UAM) 4

2 CARACTERÍSTICAS DE LAS IMÁGENES VECTORIALES

2.1 Escalado
Las imágenes vectoriales permiten un escalado hasta el infinito sin que se produzca pérdida de calidad. En
este sentido deberemos tener en cuenta dos aspectos:
• Cuando estamos editando una imagen vectorial, en un programa específico para el tratamiento de
este tipo de gráficos, lo que estamos viendo es una imagen de mapa de bits, ya que es la forma en
la que el ordenado presenta la información por pantalla.
• El tamaño de la impresión de una imagen vectorial debe ser configurado antes de su realización.
Deberemos tener en cuenta que las impresoras funcionan con gotas, sistema más parecido a las
imágenes de mapa de bits.

Al escalar una imagen vectorial no se produce el efecto de aliasing o escalón, que hace que las líneas se
muestren con una secuencia de cuadrados similares a una escalera.

Ilustración 4. Efecto aliasing en una línea.

En la ilustración podemos ver cómo una línea vectorial a mayor ampliación sigue
manteniendo la nitidez, mientras que en un formato de mapa de bits aparece el efecto
conocido como aliasing.

2.2 Color
Al no depender de los píxeles, los colores se asignan a los objetos mediante sus propiedades de color.
Utiliza los mismos modos de color que las imágenes de mapa de bits, aplicando el mismo sistema de canales.

Ilustración 5. Modos de color de una imagen vectorial.

Podemos definir los colores empleando el método que mejor se adapte a nuestras necesidades, aunque
conviene recordar que el modo CMYK es el más adecuado para las imágenes que van a ser impresas.
El color se aplica de forma diferenciada al relleno y a la línea, pudiendo un objeto tener diferenciados
ambos componentes.

Escuela de Transformación Digital (UAM) 5

2.3 Relleno y trazo
Los objetos que componen un gráfico vectorial disponen de dos propiedades particulares para ser definido,
el relleno y el trazo. El relleno es la zona que se encuentra entre los puntos inicial y final del objeto y el
trazo es la línea que une, siguiendo el camino que se haya determinado, ambos puntos. Una línea recta
solo mostrará el trazo, pero si se une a otra formando un ángulo aparecerá el color de relleno.

Ilustración 6. Relleno y trazo

Además de su color, es posible configurar la trasparencia, el desenfoque, el degradado y el orden en el
que se mostrarán en el diseño tanto el trazo como el relleno.

Ilustración 7. Círculos en los que se muestran en distinto orden el relleno y el trazo.

Ilustración 8. Efectos de desenfoque y opacidad en la misma figura.

Puedes trabajar con las propiedades de relleno y trazo si accedes a las Actividades
complementarias sesión 3.1. Trabajar con figuras y eliges la práctica Relleno y trazo.
Verás qué sencillo es modificar estas propiedades con los programas de diseño vectorial.

Escuela de Transformación Digital (UAM) 6

2.4 Texto
Los gráficos vectoriales tienen una gestión óptima del texto ya que una vez incluido puede ser convertido
en un elemento vectorial y, por lo tanto, adquiere todas sus propiedades.
El relleno y el trazo, al ser aplicables a cualquier objeto, también se pueden utilizar en el texto, generando
efectos muy interesantes.

Ilustración 9. Efecto degradado en el texto

Ilustración 10. Efecto de desenfoque aplicado al texto y asignado a una capa inferior

Ilustración 11. Texto convertido en vector

2.5 Orden
Los objetos creados en programas de diseño vectorial pueden superponerse unos sobre otros y disponemos
de distintas opciones para poderlos organizar dentro del lienzo.

Es importante tener en cuenta que, aunque los programas de diseño gráfico pueden
trabajar por capas, no deberemos considerar que estamos cambiando el orden de las
capas de un gráfico solo por cambiar el orden vertical de los objetos.

Escuela de Transformación Digital (UAM) 7

 Practica las opciones de orden de objetos dentro de un lienzo de Inkscape o de Omber.
Realiza dentro de las Actividades complementarias sesión 3.1. Trabajar con figuras
la práctica Ordenar objetos. Verás qué sencillo es modificar estas propiedades con los
programas de diseño vectorial.

2.6 Animación
Las imágenes vectoriales permiten crear animaciones manipulando su código. Esta alteración para ofrecer
la animación se puede realizar con programas específicos o con programas de edición de lenguaje xml, css,
html, etc.
En principio, no es una tarea sencilla y requiere un conocimiento de lenguajes de programación o, al menos,
comprender su lógica.

Escuela de Transformación Digital (UAM) 8

3 VENTAJAS E INCONVENIENTES DE LOS GRÁFICOS VECTORIALES
Por sus características las imágenes vectoriales presentan las siguientes ventajas:
• Al trabajar generalmente con colores planos y degradados sencillos, las imágenes vectoriales suelen
ocupar menos espacio de almacenamiento en el ordenador. Dos imágenes con distinto tamaño en
pantalla, si se componen de los mismos elementos ocuparán el mismo espacio en disco, ya que la
información que se almacena está relacionada con los elementos que componen el diseño.
• Los gráficos vectoriales se pueden ampliar y disminuir sin problema, por lo que son muy versátiles
a la hora de generar imágenes distintas para su utilización en contextos diferentes: logotipos,
murales, portadas, etc.
• Las líneas y relleno que componen los objetos se mantienen siempre proporcionales para mantener
las características visuales del gráfico aunque se realice una ampliación sobre ellos.
• Los gráficos vectoriales pueden editarse una y otra vez, sin pérdida de calidad y modificando los
distintos elementos de forma independiente.
• Los gráficos vectoriales se exportan fácilmente a imágenes de mapa de bits consiguiendo efectos
de diseño muy realistas.
• Admiten transparencia.
Los inconvenientes más evidentes de los gráficos vectoriales son:
• Presentan dificultad para representar la realidad, no pueden competir con la imagen de mapa de
bits en el tratamiento fotográfico y en caso de intentarlo hacer, ocuparían mucho más espacio en
disco.
• Animaciones difíciles de implementar.
• Los gráficos vectoriales deben ser procesados por el ordenador o el dispositivo electrónico para
poder representarlo, lo que puede restar cierta capacidad de gestión.

Ilustración 12. Manzanas en formato vectorial y de mapa de bits

Escuela de Transformación Digital (UAM) 9

4 IMPRESIÓN A TRAVÉS DE IMÁGENES VECTORIALES
La posibilidad del escalado de las imágenes vectoriales facilita en gran medida la impresión de documentos
de alta calidad, con independencia de su tamaño.
La imagen se suele diseñar dentro de un área de trabajo que es la que va a condicionar el tamaño de
exportación del documento en formato de mapa de bits, sin embargo, su exportación a formatos vectoriales
permite generar documentos de alta calidad. Ejemplos de archivos vectoriales son, por ejemplo, el PDF y
PostScript.

Ilustración 13. Plotter. Imagen de Dilan arezzome en Pixabay

¿Por qué son ideales para los trabajos de impresión?, por varias razones:
• Contornos y líneas están perfectamente definidos.
• Escalado versátil.
• Gran calidad de color.
• Facilidad de reedición y ajuste.
• Compatibilidad con todos los medios de lectura de imágenes.

Escuela de Transformación Digital (UAM) 10

Ilustración 14. Opciones para generar documentos preparados para impresión desde un programa de
diseño vectorial

Escuela de Transformación Digital (UAM) 11

5 USOS
Las características de los gráficos vectoriales los hacen especialmente útiles para las siguientes tareas:
• Modelado 3D. Este tipo de diseño se basa en la creación de mallas poligonales con referencias a
coordenadas espaciales en un sistema tridimensional de representación espacial. Estas mallas
ofrecen una andamiaje sobre el que después se crean las texturas y se trabaja el aspecto final de
los objetos.

Ilustración 15. Malla poligonal, vectorial, para la creación de un modelo 3D. Imagen de Gordon
Johnson en Pixabay
• Videojuegos. Asociado a la propiedad anterior, las imágenes vectoriales se utilizan para la creación
de videojuegos, tanto en 3D como en 2D ya que generan entornos ligeros fácilmente gestionados
por las consolas.
• Generación de gráficos. La imagen vectorial está especialmente indicada para la gestión de logos,
iconos y gráficos ya que permiten una gran variedad de tamaños sin ninguna pérdida de calidad ni
al ampliar ni al reducir el tamaño de las imágenes.
• Creación de documentos. Los archivos vectoriales, al incorporar texto e imágenes de mapa de bits
son un soporte idóneo para la creación de documentos que deben ser impresos. Este formato de
archivo facilita que las impresoras o los dispositivos de salida interpreten perfectamente la
información sin pérdida de calidad.
• Diseño de tipografía. Las tipografías que se cargan en el ordenador se suelen general con gráficos
vectoriales ya que cada fuente es un conjunto de líneas y curvas.

Escuela de Transformación Digital (UAM) 12

Ilustración 16. Diseño de fuentes
• Internet. Los gráficos vectoriales se adaptan perfectamente a la visualización en navegadores y
suelen seguir estándares abiertos que facilitan su compatibilidad en distintos entornos.

Escuela de Transformación Digital (UAM) 13

6 FORMATOS VECTORIALES
Por regla general, los editores de gráficos vectoriales permiten guardar los archivos en cualquiera de los
formatos de gráfico vectorial. En el menú Archivo > Guardar como… se puede optar por el elegir el formato
en el que se desea guardar el documento.

Ilustración 17. Guardado de documento de gráfico vectorial

No debemos confundir Guardar en formato vectorial con exportar a formato de mapa de

bits.

Escuela de Transformación Digital (UAM) 14

 Formato vectorial Extensión Uso Explicación

Adobe Illustrator AI Gráficos para Es un formato privativo de edición de

impresión y gráficos vectoriales generado por el
web programa que lleva ese mismo nombre.

Scalable Vector SVG Web Los gráficos vectoriales escalables o

Graphics gráficos vectoriales redimensionables (del
inglés: Scalable Vector Graphics (SVG) es
un formato de gráficos vectoriales
bidimensionales, tanto estáticos como
animados, en formato de lenguaje de
marcado extensible XML (Extensible
Markup Language), es decir que se
compone por código y cuya especificación
es un estándar abierto desarrollado por el
W3C desde 1999.1

Encapsulated EPS Impresión PostScript Encapsulado, basado en el

PostScript lenguaje de programación PostScript, es
un formato de archivo que incluye “ayudas”
para facilitar el proceso de impresión.

Portable PDF Impresión, Estándar mundial para compartir

Document web, archivo documentos electrónicos que permite
Format almacenar los documentos digitales con
independencia de la plataforma en la que
se vaya a utilizar.

Freehand Format FH Ilustraciones Formato propietario que almacena

en color y sin ilustraciones con colores y rellenos para
color que puedan ser editadas y exportadas en
otros formatos.

Windows Metafile WMF Web Formato de gráfico vectoriales para su

visualización web

Puedes prácticar a guardar y exportar archivos con el programa de diseño vectoria.

Realiza la actividad Gestión de archivos, dentro de las Actividades complementarias
sesión 3.1. Trabajar con figuras

1
Gráficos vectoriales escalables. (2022, 26 de marzo). Wikipedia, La enciclopedia libre. Fecha de consulta:
11:50, marzo 29, 2022 desde
https://es.wikipedia.org/w/index.php?title=Gr%C3%A1ficos_vectoriales_escalables&oldid=142509525.

Escuela de Transformación Digital (UAM) 15