La Guía SVG de JetPunk!

¡Hola gente! Esta es la primera parte de seis (!) de la guía de SVGs hecha por Stewart. Stewart me permitió (luego de preguntarle) el traducir su maravillosa guía al español; asique así colaboro yo mi grano de arena a esta bella comunidad.

¡Aquí verán los pasos básicos al crear un SVG para JetPunk!

Otros Links Útiles:

•Poner puntos en un mapa de JetPunk (Dot Placer)

•Selector de Colores de Google

•Referencias de CSS

Otros Idiomas:

•🇬🇧🇺🇸 The JetPunk SVG guide por... Stewart?

•🇫🇷 Le Guide SVG pour JetPunk por Elboy

•🇮🇹 Guida SVG di JetPunk por Crem

•🇵🇱 Poradnik SVG na JetPunk por youtubeplayer

Aquí encontrarás una guía para principiantes sobre que es un SVG y como editar uno, también como instalar Inkscape y como configurar una plantilla para siempre empezar con la configuración adecuada. ¡También aprenderás como hacer un SVG básico que podrás usar en JetPunk!

•¿Qué es un SVG?

•¿Cómo edito un SVG?

•Instalando Inscape

•Configurando una plantilla

•Crear tu primer SVG

•Añadir IDs y clases a tu SVG

•Añadir el SVG a JetPunk

Un SVG, o Gráfico de Vectores Escalables (inglés: Scalable Vector Graphics), es un formato de imagen con diferencias clave de otros formatos como JPG o GIF. A diferencia de estos, que solo guardan píxeles, el formato SVG guarda objetos.

Como ejemplo, un SVG podría mostrar un cuadrado y un círculo. Estos son guardados como puntos, junto con instrucciones de cómo juntar estos puntos. Esto difiere de un PNG o un GIF, ya que estos solo almacenan píxeles.

Guardar objetos y formas (llamados caminos o "path") permite mayor precisión en la imagen, específicamente que nunca se muestre pixelada: incluso al hacer zoom, el navegador puede cargar la imagen para que se muestre bien. Notarás que en JetPunk, el zoom no les quita la calidad a los mapas; se ven bien tanto con zoom como sin él.

Hay varias maneras de crear un SVG y editarlo. Las tres más destacadas son:

•MapShaper

•Editar directamente como archivo de texto

Es importante notar que un SVG, a grandes rasgos, es un archivo de texto. Son relativamente fáciles de leer, queriendo decir que los puedes abrir en lugares como Notepad o TextEdit y editarlos directamente. Está opción es la tercera listada, y tiene sus ventajas; pero para la mayoría de las personas no es fácil de entender o accesible.

La segunda opción es hablada superficialmente en este artículo de JetPunk, How to Make SVG Maps. Pero está opción requiere conocimiento de programación y es exclusiva a mapas geográficos. Aunque no se recomienda este método, si te atreves a usarlo, está explicación de MapShaper es mejor y más detallada: How to Make a Simple SVG Map.

La primera opción terminó siendo la última; la más usada y la preferida de los JetPunkers: Inkscape. Inkscape es un software gratis open-source específicamente diseñado para editar SVGs. Esta es la opción que usaremos y referenciaremos durante toda esta guía. Te permite crear SVGs fácil e intuitivamente desde cero, así como poder editarlos y añadir clases e IDs cuando sea necesario para poder conectar el mapa con JetPunk (ups, ¡me adelanté!).

Ahora veremos como instalar y configurar Inkscape. Lo primero de todo es instalarlo.

Puedes hacer eso aquí:

Deberías ver algo como esto en la página:

Necesitarás instalar la versión para tu Sistema Operativo. Para la mayoría, necesitarás o la versión de Windows o la de MacOS. Cliquea el botón para descargar el instalador. Luego de descargarlo, si estás en Mac solo arrastra y suelta la aplicación en la carpeta de aplicaciones dada cuando descargues el instalador. Si estás en Windows, luego cliquear el instalador y seguir los pasos (si te da opciones para algo, ve con lo recomendado), deberías ver algo como esto.

Una vez que se ha descargado completamente, ya puedes abrir Inkscape. Cuando entres al programa deberías ver algo así:

Esta es la interfaz de Inkscape. Una breve discusión:

•La barra de arriba donde dice "Archivo", "Editar", etcétera; es el menú. On Mac talvez lo veas arriba de la pantalla, fuera de la ventana misma de JetPunk.

•En la izquierda tienes la barra de herramientas, con figuras como un cursor, las formas y el texto. Aquí es donde elegiremos la mayoría de las herramientas con las que trabajaremos.

•Arriba del todo, pero debajo del menú está el editor de objetos. Aquí se pueden editar fácilmente la altura

Veremos que es todo esto más adelante. Lo que tenemos que hacer ahora es configurar una plantilla.

A pesar de que este paso es opcional, es altamente recomendado para reducir problemas en el futuro. Lo que haremos sera configurar una plantilla para que, cada vez que abras Inkscape, empieces con la misma configuración que usas para JetPunk.

En el primer paso, cambiemos algunas cosas. Necesitaremos ir al panel de preferencias. En Mac, esto se hace al cliquear "Inkscape" en la esquina superior izquierda, y luego cliquear "Preferencias". En Windows, ve a "Editar" en el menú, y al fondo del todo está "Preferencias". Cuando cliquees te aparecerá una ventana parecida a esta (aunque no necesariamente en modo oscuro)

Este es el panel de preferencias, y lo primero que haremos será cambiar algunas cosas para que sean las mismas que las mias, de esta manera todo en la guía tendrá sentido. Además, ¿a quién no le gusta el modo oscuro? :)

Lo siguiente, en la parte izquierda del panel de Preferencias, ve a "Interfaz" y cliquea el pequeño triangulo a la izquierda para mostrar las opciones dentro de Interfaz, y luego cliquea en "Temas". Esto mostrará las siguientes configuraciones. Idealmente, quieres que las opciones sean similares a las mías. Diferirá ligeramente, pero esto está bien. Si no quieres tener el modo, no hay problema, pero te advierto que las cosas se verán diferentes que en mi configuración, mostrada aquí debajo.

Ahora que configuraste esto, puedes cerrar el panel de Preferencias. Ahora vamos a establecer la plantilla. Esto solucionará algunos problemas comunes:

•Tener el documento siempre en píxeles

•Asegurarse de que la escala sea 1

•Establecer el tamaño del documento al máximo de JetPunk

Para cambiar esto, necesitamos ir a las propiedades de documento. Llegamos aquí cliqueando "Archivo" en el menú y yendo a "Propiedades de Documento". Esto abrirá una pestaña como esta:

Necesitamos explicar que es cada color aquí y lo que necesitas activar:

•Verde: Estas son las unidades usadas en el documento. Lo mejor es tener ambas en píxeles (px), para asegurar que no haya problemas al exportar el SVG a JetPunk.

•Amarillo: Este es el tamaño de un documento en píxeles (luego de cambiar lo verde). Yo personalmente lo uso al máximo que JetPunk permite, que son 830px de ancho y 600px de alto, esto te asegura que nunca tengas un documento tan grande que JetPunk no pueda abrir.

•Rojo: Esta es la escala del documento, esto es importante porque afecta el zoom en JetPunk. Es posible que cambiar la unidad verde este causando problemas, por lo que siempre mantenla en 1.00000, lo que hace que cada unidad en la pantalla sea exactamente un pixel.

•Azul: Esto es opcional. Personalmente, como uso modo oscuro, me gusta tener todo oscuro también (yo tengo 42 en cada RGB). Lo que tienes que tener activado es "Borde", sino no podrás saber fácilmente donde empieza y termina tu SVG.

Una vez configurado lo anterior, podemos cerrar Propiedades de Documento. Como ya dicho, Verde, Rojo y Amarillo son necesarios para que el SVG en JetPunk funcione óptimamente; y lo azul es solo cuestiones de interfaz.

Finalmente, queremos guardar todo esto como una plantilla. Lo que hemos hecho solo ha cambiado las configuraciones del documento sin guardar; pero nosotros queremos que esto sea lo predeterminado en Inkscape. Para hacer esto, cliquea Archivo en el menú y selecciona "Guardar Plantilla...". Una pequeña ventana va a aparecer. Solo necesitas poner el nombre como "Default" y activar la casilla "Definir como plantilla predet."

Ahora puedes guardarlo. Te podrá preguntar si quieres reemplazar la platilla actual, y tu dale que si cliqueando "Reemplazar". Esto reemplazará la plantilla predeterminada, ¡asique cada vez que abras Inkscape empezarás con el pie derecho!

Empezaremos por hacer un dibujo muy simple para poder entender Inkscape, ¡y le añadiremos los atributos XML necesarios para qué funcione con JetPunk!

Asique lo primero, explicaré brevemente las herramientas importantes que estaremos usando de la barra de herramientas (del lado derecho de la pantalla). Los símbolos pueden diferir brevemente:

Como ya se dijo, usaremos la Pluma. Esta puede verse de estas maneras en diferentes versiones:

Primero, cliquea la Pluma y haz clic izquierdo en el documento. Esto creará un "path" y verás que una guía roja te está mostrando donde se hará la línea cuando vuelvas a cliquear. Asegúrate de no arrastrar el mouse cuando cliquees, sino obtendrás una línea curva, no recta. Si eso pasa, lo arreglaremos en un momento. Asique ve cliqueando. Cuando quieras terminar esta figura y cerrar el path, cliquea el primer punto que dibujaste. Este es un ejemplo de como puede quedar:

Nota que tu figura puede ser blanca, negra o no tener color. Lo editaremos en un momento. Pero primero, arreglemos la forma de nuestra figura. Lo siguiente, cliqueando el Selector de Nodos (justo debajo del Selector). La herramienta Nodos también puede lucir así:

¿Notas la curva de nuestra figura? Bueno, queremos deshacernos de ella, y eso lo podemos hacer usando el Selector de Nodos. Cuando elijas tu figura, pequeñas figuras aparecerán en las esquinas de tu figura, los famosos "vértices":

Estas pequeñas figuras marcan las esquinas o nodos, por los cuales nuestra figura se define. Nota como los diamantes muestras esquinas, o sea que las líneas entre los diamantes son rectas; pero los cuadrados representan líneas curvas. Queremos arreglar eso. Para hacer esto, selecciona el nodo cuadrado, notarás que unas "guías" aparecen a los lados del triángulo, estas te indican como la curva está definida:

Si mueves los pequeños círculos (llamados Tiradores Bezier), la curva del objeto cambiará. Sin embargo, lo que queremos es eliminar la curva por completo, asique cambiaremos el tipo de nodo.

Podemos hacer esto en la susodicha Barra de Herramientas, la cual estaba debajo del menú. En particular, mientras seleccionamos los nodos a cambiar, tienes que ver a por estos símbolos:

Estas cuatro herramientas definen los tipos de nodos. Nosotros ahora necesitamos marcar la opción a la izquierda, que dice "Hacer los nodos seleccionados esquinas". Una vez cliqueado, notarás que los cuadraditos se han convertido en diamantes. ¡Pero! También notarás que la curva no se ha eliminado, esto es porque aún tenemos las guías definiendo las curvas; y aunque hayas cambiado el tipo de nodo, aún necesitamos removerlos. Por suerte, solo toca el mismo botón otra vez y los removerá. Después de haber hecho esto con los nodos que necesites, tendrás tu path con todos los nodos de esquina:

Ahora queremos editar el estilo del path. Para hacer esto, vuelve a la herramienta del selector y hazle clic derecho a la figura, y selecciona "Relleno y borde..."; esto mostrará un panel en la parte derecha similar a este:

Con este panel puedes editar el relleno y el color y estilo del trazo del path actualmente seleccionado. Dese a entender que el "trazo" del path simplemente significa el borde de este. Normalmente querrías que el tipo de relleno y de trazo sea plano, lo cual elijes al cambiar al cuadrado al lado de la "x". Esto te asegura usar colores uniformes y no un patrón. Te puedes asegurar que la opción de "Color Uniforme" está seleccionada mirando arriba de las líneas "RGB" y "HSL". Pero no es incorrecto usar otros tipos de relleno.

También hay un selector de color RGBA, esto significa que el color de la forma se define por la cantidad de Rojo, Verde y Azul que tenga, junto con un canal Alfa para la transparencia. Puedes cambiar estos valores directamente haciendo clic en las barras de color, ingresando los números directamente, o introduciendo un código de color hexadecimal en el campo "RGBA" (actualmente completado con ffffffff arriba). También existe el HSLA, el cual usa Color, Saturación, Luminosidad y un componente alfa.  Si tu código de color hexadecimal tiene solo 6 caracteres, añade "ff" al final para maximizar la transparencia. También puedes cambiar la opacidad del objeto en la parte inferior de Relleno y Trazo. Esto afectará por igual al relleno y al trazo, ya que está modificando la transparencia de todo el trazado, no solo del relleno o del trazo por separado.

La pestaña del color del trazo es idéntica a la del relleno, exceptuando que los cambios hechos en esta afectan al borde del path, no al relleno o a la forma. La otra pestaña es la del Estilo de trazo:

Una explicación rápida sobre cada fila de la ventana:

•Ancho: Este es el ancho del borde en píxeles. Para la mayoría de las cosas, 1 píxel se verá bien.

•Guiones: Raramente usado, pero esta te da la opción de cambiar el borde sólido a un borde de guiones o con un patrón.

•Marcadores: También rara vez usado, este te permite añadir formas al inicio, medio y final del borde; por ejemplo, poner un círculo en cada esquina.

•Juntar: Las instrucciones de como tienen que ser las esquina: la primera da esquinas biseladas, la segunda da esquinas redondas y la última da esquinas de tipo inglete.

•Punta: Similar a Juntar, pero para paths abiertos con finales sin juntar en vez de figuras cerradas.

•Orden: Las instrucciones de como tienen que renderizarse las esquinas; lo que quiere decir en que orden los marcadores, borde y relleno son renderizados. La superior izquierda es la más lógica.

Ahora que sabes hacer formas con bordes y coloreado como tú quieres, ¡ya puedes hacer tu SVG! Cuando termines de hacerlo, tendremos que editar el XML del SVG para poder conectarlo correctamente a JetPunk.

Como ya dicho, ahora necesitamos a los "ids" y a las "clases" para hacer nuestro SVG reactivo a JetPunk. ¿Pero qué quiere decir todo esto? Ahora, ten en cuenta que esto podrá ser complicado, pero toma tu tiempo para digerirlo; realmente no es tan malo. Primero, un poco de XML básico, miremos el XML del "path" de debajo:

<path d="___" id="mi-path" class="clase1 clase2 clase3"/>

Miremos brevemente que significa cada cosa de estas:

•< - este es el inicio de una "etiqueta", todo el XML es definido usando etiquetas, en otros lugares talvez hayas visto etiquetas "<a>" para links o "<html>" para documentos.

•path - aquí le estamos diciendo al navegador que esta es una etiqueta de "path", asique va a renderizar su contenido mediante el atributo "d".

•d="___" - este es un atributo de la etiqueta "path", esto quiere decir que "d" es una propiedad. Los atributos pueden ser tanto obligatorios como opcionales, y en este caso el único atributo requerido para una etiqueta "path" funcione es el atributo "d", el cual define su forma y estructura. No explicaré más a fondo cómo funciona, porque eso va más allá de lo que es necesario ed entender sobre SVGs, pero usualmente el atributo "d" contiene un montón de números que definen la forma de tu figura.

•id="mi-path" - la id de la etiqueta, este es un atributo opcional que le da a la etiqueta "path" una manera de ser identificada únicamente para poder ser referenciada de en cualquier lugar; o sea que no puede haber dos paths con la misma id. Estos deben contener estrictamente letras, números y guiones.

•class="clase1 clase2 clase3" - el atributo "class" es una manera de comunicarse con tanto la etiqueta path como con otras etiquetas. Usualmente las clases se usan para darle a las etiquetas estilos con ayuda de CSS, pero en JetPunk eso tiene otros usos explicados aquí debajo. Esta etiqueta tiene tres clases, ya que las clases se separan por espacios (lo que significa que una clase no puede contener espacios). Además, tienen que ser alfanuméricas, con posibles guiones; igual que las IDs.

•/>= esta combinación establece el final de la etiqueta, o sea que la cierra. Después de "/>" puedes crear otra etiqueta.

¡Acabas de tener una lección básica de XML/HTML! En JetPunk, usamos las clases y los IDs para colorear los SVG después de adivinar las respuestas; o sea que necesitamos las clases y los IDs para darle a JetPunk algo con lo que comunicarse, o sino no tendrá idea de que partes iluminar.

Para editar los atributos XML de un path, necesitas abrir tu SVG en Inkscape y hacer una de dos:

•Ir al menú, cliquear "Editar" y luego cliquear "Editor XML"

•Presiona Ctrl + Shift + X

De cualquier manera, de abrirá esta pestaña:

Ahora, sé que hay personas que dirán "¡Ah! ¡Hay código y no sé cómo programar!", pero les aseguro que no es tan malo.

El editor XML de Inkscape muestra alguna información en la parte superior, en particular el orden de los objetos/paths y de sus ids. Nótese que "svg:defs", "svg:metadata" o cualquier cosa que empiece por "sodipodi" puede ser ignorada para cualquier cosa no avanzada. Si una etiqueta tiene un pequeño triángulo o un "+" a su izquierda, esto indica que hay objetos dentro. Por ejemplo, podemos ver una etiqueta "g" con dos etiquetas "path" contenida dentro.

Cuando selecciones un objeto, en este caso la etiqueta "path" seleccionada en azul, puedes ver y editar sus atributos. Tendrías que tener al menos un atributo "id" y uno "d" para tus paths. ¡Estos son explicados arriba! Puedes tener otros atributos, pero ahora concentrémonos en "id".

Lo que quieres hacer es simplemente cliquear la "id" del path (en este caso Gabon) y cambiar el texto a lo que quieras, y presionar "Guardar " en el teclado. Renombraré el mío a "my-path" como en el ejemplo ya dado.

¡Eso es todo! Has añadido una id customizada a tu path, y ahora lo podrás conectar en el próximo paso.

Si también quieres añadir clases, puedes hacerlo cliqueando el "+" (a la derecha de "Nombre" en la imagen de abajo), escribe "class" como el Nombre; y escribe tus clases (separadas por espacios) como el Valor. El nombre tiene que ser exactamente "class", ni "Class", ni "clase" o lo que sea.

Este path ahora tiene la id de "mi-path" y tres clases distintas, llamadas "clase1", "clase2, y "clase3".

Ahora que hemos hecho el SVG, lo que tienes que hacer es conectar el SVG a JetPunk. Nosotros explicamos como hacer esto enteramente en la siguiente sección de la Guía de SVGs. Vuelve de vuelta al "menú" y entra a "SVGs para JetPunk". Alternativamente, haz quiz aquí: SVGs para JetPunk

•Ir al inicio de página

•Ir a la siguiente guía