L3: Diseño 2D. Inkscape
- Tiempo: 40 minutos
-
Objetivos de la sesión:
- Introducción a los gráficos por ordenador
- Formato SVG
- Puesta en marcha de Inkscape
- Introducción
- Practicando con VSCODE y SVG
- El programa Inkscape
- Resumen de tareas a realizar
- Conclusiones
- Autores
- Licencia
- Enlaces
En esta sesión veremos técnicas y conceptos de diseño 2D, que practicaremos con el programa de dibujo vectorial Inkscape
Los ordenadores, desde hace muchas décadas, nos permiten definir, almacenar y mostrar información gráfica. Es lo se denomina Gráficos generados por ordenador. Las imágenes se pueden definir y almacenar de diferentes maneras. Las clasificaremos en estos dos tipos: Mapas de bits y gráficos vectoriales
Las imágenes están formadas por una rejilla de píxeles. Reciben también el nombre de imágenes ráster (o imágenes de pixels). Son las imágenes originales, utilizadas desde el principio de la existencia de los ordenadores. En los ordenadores retro, de baja resolución, se pueden ver todos los píxeles que componen la imagen
En los ordenadores actuales, con más resolución, los píxeles no se aprecian. PERO la imagen sigue estando formada por píxeles, por lo que si se hace zoom, se podrán ver. En esencia, son imágenes discretas, generadas mediante la unión de píxeles individuales
Estas imágenes se almacenan en memoria en su formato crudo (raw): Una tabla (array) en la que cada elemento contiene el color de un pixel
En esta figura se representa esta idea, con un ejemplo en el que se usa 1 bit para representar a cada píxel
Esta imagen de ejemplo está formada por 8 filas y 11 columnas de píxeles. En cada posición hay un bit que indica si el píxel está encendido (1) o apagado (0). Cada uno de estos bits se almacena en un array de 8x11
La cantidad de bits usados para representar un pixel se denomina profundidad. En este ejemplo, al usar 1 bit de profundidad, sólo se pueden representar imágenes en un único color (monocromo)
Este array de bits en la memoria se vuelca a fichero para su almacenamiento en el disco duro. Si se almacena directamente, sin ningún tipo de conversión, es lo que se llama una imagen en formato crudo: igual que como está en memoria. Las imágenes en crudo ocupan mucho espacio. Estos ficheros suelen tener la extensión .raw, .bin, .hex...
Otra posibilidad es comprimir la información y luego almacenarla en el fichero. Cada formato de fichero tiene su propio algoritmo de compresión. Los ficheros tienen las extensiones .jpg, .gif, .png...
En los graficos vectoriales se puede hacer zoom sin ver los píxeles. Esto es posible porque están definidos por elementos geométricos: rectas, curvas, polígonos... en vez de píxeles discretos
En esta figura se muestra gráficamente la diferencia entre las imágenes por mapas de bits, y los gráficos vectoriales
Las pantallas están contruidas físicamente mediante píxeles (por ejemplo LEDs). Es decir, que son de naturaleza discreta. Por eso las imáganes de píxeles se proyectan directametne en las pantallas
Pero en el caso de las imágenes verctoriales hay que hacer un procesado. Los elementos geométricos se procesan según la vista actual de la figura (mayor o menor zoom) y se obtiene el mapa de bits correspondientes. Esta mapa de bits es el que se muestra en la pantalla
En esta figura se muestra un ejemplo en el que se dibuja una circunferencia. Vectorialmente está definida mediante 4 parámetros: La posición del centro (x,y), el radio (r), y el grosor del trazo (th). La imagen que se muestra en la pantalla del ordenador se recalcula según la vista. Así, en la vista 1, se muestra la figura completa. Sin embargo, en la vista 2 se visualiza sólo un segmento de la circunferencia. En ambos casos la imagen correspondiente se recalcula a partir de los parámetros
El formato SVG es un estándar internacional abierto, creado por el W3C, para la definición de gráficos 2D vectoriales
La docuentación del estándar se encuentra en esta web: SVG 2, del W3C
Los ficheros SVG son archivos de texto en XML. Esto permite modificarlos usando cualquier editor de texto. También generarlos desde nuestros programas
Este es un ejemplo en el que se dibuja un círculo azul (Ejemplo tomado de Esta página de wikipedia)
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" >
<title>Estructura basica del SVG</title>
<style>
.circle {fill: blue}
</style>
<circle class="circle" cx="5" cy="5" r="5" />
</svg>Creamos un fichero de texto llamado, por ejemplo, Ex-01.svg. Lo puedes meter, si quieres, en tu repositorio personal, para hacer pruebas. Si lo creamos con vscode, se nos resaltará la sintáxis:
Guardamos el ficheros y lo visualizamos desde el explorador de ficheros. Veremos cómo se renderiza el icono en Linux. Si hacemos doble click se abre un visualizador para verlo. Hacemos zoom para observarlo de cerca:
También se puede ver directamente desde el navegador:
Para tener algo de intuición sobre el SVG, y practicar, vamos a hacer algunos de los ejemplos. Utilizamos el VSCode para editar los ficheros SVG, y los visualizamos en el navegador
Para definir un dibujo en SVG utilizamos etiquetas en XML. El nombre de estas etiquetas lo define el estándard SVG
Todo documento SVG está delimitado por las etiquetas <svg> y </svg>. También se pueden incluir comentario utilizando las etiquetas especiales <!-- (Abrir comentario) y --> (Cerrar comentario)
Para que este documento XML se pueda integrar dentro de otros ficheros XML, y NO haya colisiones con los nombres de las etiquetas, se define el espacio de nombres con el parámetro: xmlns="http://www.w3.org/2000/svg"
Se usa un nombre para este espacio que tiene forma de URL, pero NO es una URL necesaria para hacer ningún procesamiento del SVG. Ni los programas que gestionan SVGs acceden a esa URL. Es simplemente un nombre único, escrito con sintáxis de URL. Se aprovecha para escribir documentación en esa URL: https://www.w3.org/2000/svg
<!-- Comienzo del documento -->
<!-- Con los atributos `width` y `height` se define el tamaño de la página
que contiene el dibujo
-->
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
<!-- Dibujar un rectángulo azul
Atributos:
* x,y: Coordenadas del punto superior izquierdo del rectangulo
* width, height: Anchura y altura del rectángulo
* fill: Color del relleno del rectángulo
-->
<rect width="200" height="100" x="10" y="10" fill="blue" />
</svg> Como atributos de la etiqueta <svg> se puede definir el tamaño de la página que contiene el dibujo: width y height
Para dibujar un rectángulo se usan las etiquetas <rect> y </rect>
Note
Si no hay contenido entre las etiquetas de apertura y cierre en XML, se puede utilizar sólo una única etiqueta con la sintaxis <etiqueta />
En el rectángulo se definen los parámetros:
- x,y: Coordenadas de la esquina superior izquierda del rectángulo (en píxeles)
- height y width: Altura y anchura del rectángulo (en píxeles)
Esto es lo que aparece si lo abrimos con el navegador:
Observa que si haces zoom en el navegador, la imagen NO se pixela, ¡¡Por que es VECTORIAL!! 😃
Los rectángulos pueden tener las esquinas redondeadas. Para definirlo se usa el parámetro rx, que especifica el radio (en píxeles) del arco del redondeo. Si rx=0 las esquinas no tienen redondeo
En este ejemplo se dibuja un rectángulo verde con las esquinas redondeadas, con radio de 20 píxeles
<!-- Comienzo del documento -->
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
<!-- Dibujar un rectángulo verde, con bordes redondeados -->
<!-- Atributos: -->
<!-- * rx="20": Radio de redondeo de las esquinas -->
<rect x="10" y="10" width="200" height="100" rx="20" fill="green" />
</svg> Este es el renderizado en el navegador:
Los círculos se dibujan utilizando la etiquetas <circle> y </circle>. Como parámetros se pasan:
-
cx,cy: Coordenadas del centro del círculo -
r: Radio del círculo
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<!--
Dibujar un círculo amarillo
Atributos:
* cx,cy: Centro del circulo
* r: Radio
-->
<circle cx="50" cy="50" r="45" fill="yellow" />
</svg> Este es el resultado del renderizado:
Las elipses se dibujan como círculos, pero especificando el radio horizontal con rx y el radio vertical con ry
<svg height="140" width="500" xmlns="http://www.w3.org/2000/svg">
<!-- * Dibujar una elipse
* cx,cy: Centro de la elipse
* rx: Radio horizontal
* ry: Radio vertical
-->
<ellipse rx="100" ry="50" cx="120" cy="80" fill="orange"/>
</svg> El renderizado lo vemos en el navegador, PERO ahora en vez de poner una captura, incluyo en esta wiki el fichero SVG directamente. En el formato Markdown se puede incluir imágenes SVG:
También puedes incluir el fichero SVG desde tu fichero .md, y previsualizarlo desde el VSCODE
Para dibujar líneas usamos la etiqueta <line>, con los siguientes parámetros:
-
x1,y1: Punto inicial -
x2,y2: Punto final
Atributos de estilo:
-
stroke: Color del trazo
Ejemplo de línea que parte del origen (0,0) y tiene su extremo en (300,200)
Código SVG
<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">
<!--
Dibujar una línea recta:
* x1,y1: Punto inicial
* x2,y2: Punto final
* Atributos de estilo:
* stroke : Color del trazo
-->
<line x1="0" y1="0" x2="300" y2="200" stroke="red" />
</svg> Con SVG se crean Polígonos usando la etiqueta <polygon>. Tienen un parámetro llamado points donde se indican todos los vértices del polígono. Los vértices se especifican como pares de números (x,y) separados por un espacio: x1,y1 x2,y2 x3,y3...
Los polígonos más sencillos son los triángulos. En este ejemplo se muestra un triángulo azul con trazo negro. El parámetro stroke nos permite especificar el color del trazo
Código SVG
<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">
<!-- * Dibujo de un triángulo azul, con trazo negro
* points: Secuencia de puntos x,y del poligono
-->
<polygon points="10,10 100,10 50,150" fill="blue" stroke="black" />
</svg> El caso más general es utilizar una serie de puntos unidos mediante rectas. Si el punto inicial es igual al final, tenemos un polígono. Estos objetos los llamamos Multilíneas. Se utiliza la etiqueta <polyline>, con el mismo parámetro points de los polígonos
Código SVG
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<!-- * Dibujo de una polilinea:
* Mismos parámetros que un polígono: una lista de puntos
-->
<polyline points="0,0 50,150 100,75 150,50 200,140 250,140"
fill="none" stroke="green"/>
</svg> En SVG se puede renderizar texto, utilizando la etiqueta <text>. Parámetros:
-
x,y: Coordenadas de la parte superior izquierda del texto
Código SVG
<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
<!-- * Escritura de texto
* x,y: Coordenadas de la parte superior izquierda del texto
-->
<text x="50" y="100" fill="green">¡SVG a tope!</text>
</svg> En todos los ejemplos anteriores sólo hemos mostrado un único objeto, pero se pueden añadir a la imagen todos los que quieras. En este ejemplo se muestra texto, un rectángulo y un círculo, en diferentes partes de la pantalla
Código SVG
<svg height="200" width="300" xmlns="http://www.w3.org/2000/svg">
<!-- Escritura de varios objetos -->
<!-- Rectángulo y texto -->
<text x="10" y="50" fill="black">Rectangulo</text>
<rect x="10" y="100" width="40" height="20" fill="green" />
<!-- Circulo y texto -->
<text x="150" y="50" fill="black">Circulo</text>
<circle cx="170" cy="100" r="10" fill="red" />
</svg> Con SVG también se pueden crear animaciones
Utilizamos la etiqueta <animate> para indicar cómo queremos que varía un parámetro del objeto (posición, radio...)
- attributeName: Nombre del parámetro del objeto a variar en el tiempo
- begin: Tiempo en el que se quiere que comience la animación, tras la carga del SVG
- dur: Duración de la animación
- from: Valor de inicio del parámetro
- to: Valor final del parámetro
- repeatCount: Numero de veces a repetir la animación
Código SVG
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- * Animar un circulo: Circulo en movimiento en horizontal
Hacia la derecha
-->
<circle cx="50" cy="50" r="5" fill="red" >
<!--
* Atributo a animar: Coordenada x
* Animar desde el principio: begin="0s"
* Duracion de la animacion: dur="2s" (2 segundos)
* cx varia desde 50 a 200
* Repetir indefinidamente
-->
<animate
attributeName="cx"
begin="0s"
dur="2s"
from="50"
to="200"
repeatCount="indefinite" />
</circle>
</svg> En esta página se pueden encontrar más ejemplos, y aprender sobre los atributos de cada elemento: Tutorial básico de SVG, del w3school
El Inkscape es un programa de dibujo 2D, para crear gráficos vectoriales, que utiliza el SVG como formato nativo. Se usa sobre todo para dibujos artísticos. NO es una herramienta específica de Dibujo técnico, pero contiene herramientas que nos son útiles para tareas más técnicas
Es un programa libre y multiplataforma, por lo que pertenece al patrimonio tecnológico de la humanidad. Esto significa que está diponible para que cualquiera lo pueda estudiar, usar, modificar... El código está disponible en su repositorio de GitLab:
Pasemos unos minutos cotilleando el código, y viendo los últimos commits. ¿Por qué?. Porque podemos 😎️
La primera vez que arrancas Inkscape te aparecerá una ventana como la siguiente
Por defecto se configura con la apariencia que tengas en tu sistema operativo. Yo tengo el tema dark por defecto, por lo que me aparece en oscuro. Dejamos las opciones que vienen por defecto, y pinchamos en Guardar
En la siguiente pantalla pinchamos en Gracias
Por último desmarcamos la casilla que pone Mostrar esto siempre, para que nos vuelva a aparecer esta pantalla de Bienvenida, y pinchamos en Documento nuevo
Ahora nos aparece la ventana principal, donde ya podemos dibujar. Fíjate en los iconos señalados en la parte superior
Según cómo sea tu pantalla, te pueden aparecer en la parte de la derecha, en vertical o bien en la parte superior. A mí me gusta tenerlos en la parte superior. Si te aparecen en la derecha, ve a la opción Ver y desmarca la casilla que pone Pantalla Ancha
¡¡Ya estamos listos para dibujar!!
La configuración actual de Inkscape se guarda la carpeta inkscape que en Linux se encuentra en tu carpeta de usuario (Home), dentro de la carpeta .inkscape. Así por ejemplo, en mi máquina está en la ruta /home/obijuan/.config/inkscape
Para saber dónde está tu configuración, ve al menú Edición/Preferencias:
En la ventana que aparece, pincha en Sistema y podrás ver las rutas de la carpeta de configuración y de resto de ficheros de configuración:
La carpeta inkscape la puedes borrar con seguridad. Perderás la configuración actual, pero podrás arrancar Inkscape de nuevo con su configuración por defecto
En el menú de Ayuda encontramos mucha información útil (aunque en inglés), para comenzar los primeros pasos. En concreto, hay unos Tutoriales de arranque, que en realidad son dibujos creados con el propio Inkscape. Vamos a cargar el primero: El tutorial básico
Se nos abre una ventana nueva de Inkscape y se carga el documento con el tutorial básico
Sguimos con el Tutorial básico abierto. Lo usaremos como primer elemento para practicar la navegación
Usando la rueda del ratón, desplazamos el documento hacia arriba y hacia abajo. También podemos usar la barra de desplazamiento lateral
Si apretamos la tecla Ctrl y a la vez damos a la rueda del ratón hacemos un zoom hacia dentro o hacia afuera. Se hace hacia donde esté situado el puntero del ratón:
Si mantenemos pulsada la rueda y arrastramos el ratón, nos movemos por el documento hacia la dirección del ratón
Al navegar por un dibujo solemos utilizar esos dos movimiento: Zoom para acercarnos y luego el desplazamiento para ver los objetos situados alrededor
- Prueba los ejemplos de SVG, con vscode y el navegador
- Experimenta con el Tutorial básico de SVG, del w3school
- Instálate Inkscape 1.4-Beta3
- Experimenta con el Inkscape
- Guarda los ejemplos y ejercicios que hagas en tu repositorio personal. Descríbelos en la bitácora (¡Cuantos más commits, mejor!)
Para los dibujos en 2D utilizaremos el formato verctorial SVG. Es un formato abierto, y de texto, que podemos editar con cualquier editor, como si se tratase de código fuente. Además, este formalo lo podemos utilizar también para crear programas que generen como salida SVG, lo que nos permite crear dibujos paramétricos, gráficas, etc. Para el Diseño 2D vamos a aprender a utilizar el programa Inkscape. Tiene la peculiaridad de que utiliza el formato SVG como formato nativo para almacenar los dibujos
- Juan González-Gómez (Obijuan)
- Logo de Markdown: De Dustin Curtis - https://github.com/dcurtis/markdown-mark/tree/master/svg, CC0, https://commons.wikimedia.org/w/index.php?curid=31095459
- Logo de SVG: By W3C, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=89557878