Autor: Esther Moreno

He buscado información de cómo optimizar SVGs incluso entrando en el código a tirar tabiques, pero no ha habido manera. Así que después de aprender con un compi del trabajo y haciendo pruebas de todo tipo, voy a dejar aquí lo aprendido. ¡Empecemos!

Para optimizar lo más posible un SVGs debemos hacerlo en varios pasos con diferentes herramientas:

1. Programa de dibujo vectorial (inkscape, illustrator, …)
2. Página web SVGO (https://jakearchibald.github.io/svgomg/).
3. Editor de texto (por ejemplo Atom)

1. Con el programa vectorial haremos el icono, logo o dibujo que queramos, y lo guardaremos con el formato .svg

Dependiendo del programa, al guardar puede ofrecerte diferentes tipos de SVGs. Por ejemplo  Inkscape te da 5 opciones (svg de inkscape, svg optimizado, svg plano, svgz comprimido, svgz plano comprimido). Las opciones comprimidas no nos sirven y de las otras yo te recomiendo el formato inkscape o el plano porque al final quedará un poco más reducido con la misma calidad.

2. Abre en tu navegador la página SVGO (https://jakearchibald.github.io/svgomg/). Verás algo parecido a esto:

Pinchando en “Open SVG” puedes buscar tu archivo svg y aparecerán tu dibujo (en este caso el ojo) y las opciones para optimizarlo a la derecha.

De las 3 primeras opciones puedes dejar sólo marcada la segunda (Compare gzipped). Del resto, lo ideal es marcar todas las que puedas sin que la imagen pierda su forma. Cuantas más marques más optimizado estará. Te recomiendo que empieces marcando todas menos “Remove xmlns” y la precisión al mínimo, para luego ir subiendo la precisión si es necesario.

Lo que pasa a menudo es que alguna parte del dibujo pierde su forma o aparecen pequeñas incorrecciones. Entonces es el momento de darle más precisión subiendo lo que nos haga falta hasta corregir el defecto, pero no más.

Abajo va calculando el nivel de optimización que estás consiguiendo. En este caso, de 1.43K vamos a convertirlo en uno de 390 bytes (26,58% más pequeño).

Ahora ya lo puedes descargar en el botón azul. O si prefieres puedes copiar el svg en modo texto.

Modo texto: 

Es conveniente que antes de pasar al siguiente paso, abras en el programa vectorial (inkscape, illustrator, …) el nuevo svg que has descargado para verlo a mayor tamaño y asegurarte de que no ha perdido calidad.

3. El archivo svg lo tienes que abrir en un editor de texto.

O si le has dado a copiar en modo texto, abre un documento nuevo y pégalo. Dependiendo del editor que uses lo verás más bonito o más cómodo, pero en el fondo es el mismo texto.

Este podría ser un editor de texto estándar:

Esto es Atom, un editor de código:

Como ves el contenido es el mismo.

Ahora hay que eliminar todo lo que no es necesario. Lo interesante de un svg es que es escalable sin perder calidad y que puedes cambiar el color directamente con el código de la página web donde lo insertes. Así que vamos a quitar todo lo referente a color, tamaño o estilo que el programa vectorial ha incluido en el archivo. Debería quedar así:

Vamos a verlo por partes. Esta referencia viene siempre al inicio:

Y luego cada trazado de nuestro dibujo tiene una etiqueta “path” que sólo debe incluir el “d”, el resto lo eliminamos. En este caso son estos:

Y la etiqueta de cierre final:

Ahora tu svg está totalmente optimizado! 🙂

 

 

 

 

 

Estos Reyes me han traído unos números de un comic que no conocía: Paper Girl. Y es estupendo!

Es una historia de invasión alienígena, recuerda a E.T, los Goonies, la última serie de moda: Stranger Things… Sí, todo eso, pero sobretodo me gusta que las protagonistas son unas chicas, para variar.

El caso es que los alienígenas hablan su propia lengua, la cual no viene traducida por supuesto, ni siquiera una pequeña pista. Un suculento reto imposible de no aceptar.

Tenía 3 números y aparecía este lenguaje encriptado en varias viñetas de cada uno. Las suficientes. El primer paso fue escribir cada símbolo y contar cuántas veces aparecía. Una vez hecho esto se puede comparar con las proporciones de aparición de letras en la lengua inglesa, el idioma original del comic. Asumí que no lo habrían traducido al castellano, menuda trabajera.

Hay diferencias entre la aparición de cada letra en el diccionario inglés y en textos escritos en inglés. Para este caso usé las proporciones en textos escritos, claro. La E es con diferencia la letra que más aparece en el inglés, seguidas de la T y la A. Luego a cierta distancia la I, la O, la N… y así escribí las proporciones orientativas y las comparé con mis símbolo. Sabía que no era determinante pero era una gran ayuda.

Otro aspecto peculiar era que la mayoría de las frases acababan con un símbolo concreto. Era fácil deducir que sería un punto, una exclamación o interrogación.

Tercer paso: buscar las letras dobles. En inglés a diferencia del castellano hay muchas letras dobles: ll, mm, ss, oo, cc, pp, ee, … Curiosamente aquí sólo aparecía dos dobles diferentes, pero aparecían varios pares de letras reflejadas. Revisando de nuevo mis dos únicos casos de letras dobles me di cuenta de que los símbolo eran simétricos en ambos casos, así que realmente las dobles se representaban todas como letras espejadas. Bingo!

El último pero más importante, una de las palabras estaba compuesta por (2 símbolos -apostrofe- 2 símbolos iguales). Del primer par de símbolos, el segundo era muy probablemente una E. Tenía algo como ¥E’##, sólo podía ser WE’LL o HE’LL y por el contexto, que por supuesto ha sido de gran ayuda siempre, tenía todas las papeletas para ser WE’LL. Ya tenía 3 letras casi seguras!

La única dificultad seria fue con la A. Según las estadísticas, la E, la T y la A, son las tres letras más usadas en inglés con diferencia. Pero en mis textos la A aparece poquísimo. Y sin embargo yo tenía 3 símbolos claramente más repetidos que el resto. Pero no era la A sino la O y estuve bastante tiempo sabiendo que algo no encajaba pero sin entender qué estaba pasando.

Este es el resultado:

Con el número 5 he podido completar casi* todo el abecedario. Casi, porque hay un símbolo que se ha usado para la Z y para la X, supongo que será un error pero no he podido aclarar si es uno u otro. Es más posible que sea X, ya lo comprobaré con los próximos números.

Las frases son:

(Número 1)

– Goddammit!

– Split up!

– We’ll meet at the second folding!

– Stay away from me!!

– Stop!!

– Please!!

– You’re going to get yourselves killed!!

– You people are out of your

– No

(Número 2)

– Shit!

– Shit!!

(Número 3)

– No!

– Not Jude!

– My love!

– Goodbye!

– Why would they do this, Heck?

– I got no clue!

– but shit just got messy!

– But I did!

– everybody be cool!

– were the good guys!

– like hell!

– yeah!

(Número 4)

– Shit, was that an editrix?

– that!

– Heck!!

– this way!

– I’ll start her up

– no!

– But it will take her someplace that can!

– stay right here!

– we’ll be back soon!

(Número 5)

– I’m on it!

– warning vertex has been breached!

– evacuate the tuplequad immediately!

En fin! Qué gran entretenimiento por sorpresa 🙂 Quiero más!

¿Y si vuelvo a escribir ahora que nadie lo espera? Por llevar la contraria más que nada 🙂 Por hacerlo antes que se derrumbe el mundo con la subida de Trump al trono.

De momento voy a recuperar las imágenes del blog poco a poco. No tengo muy claro cómo se han perdido, supongo que no venir a regarlas en varios años debe tener algo que ver.

El último powerpoint que he recibido no era de gatitos para variar, sino de números, así que lo he abierto. No hacen falta explicaciones para admirar la indiscutible belleza de los números.

Y ya que estamos, recuerdo que me explicaron en el cole, que la forma de cada número estaba relacionado con el número de ángulos que tenía. El 1 tiene un ángulo, el 2 tiene dos ángulos…

coquetos ellos 🙂

historia 1
Un día en el instituto nos contaron, no sé a santo de qué, que sólo una parte de la población podía doblar la lengua en forma de U. Está comprobado, es una cuestión genética.
Aunque es una gilipollez, tengo que reconocer que me jodió estar en el grupo de los que «no pueden». No puedo? … cómo que no puedo!!!????.

Pero entonces me di cuenta de que si doblas unas cuantas veces (suficientes veces) la lengua con ayuda de los dedos, aprendes a hacerlo perfectamente.

historia 2
Aún mayorcita, unos 12 añitos, lo de pedir la hora por la calle era una prueba insuperable: no podía evitar ponerme colorada de una forma bastante humillante. Pero si te colocas en el centro de la ciudad y preguntas cada 5 minutos la hora, hasta que el aburrimiento sea mayor que la inseguridad, te deshaces del problema para siempre.

aprendiendow: si quieres superarte, ni la genética puede evitar que lo consigas.