Siguiendo con la serie de artículos «Lo que esconde la extensión», ahora le toca al turno a un tipo de archivo no muy conocido aún, pero que va a ser cada vez más común: la extensión SVG.
La extensión SVG es un archivo gráfico, es decir, sirve para definir imágenes.
El problema que plantemos aquí es si tu cliente te envía un archivo SVG para traducirlo.
¿Qué harías?
Empezaré desentrañando este tipo de archivo para terminar con algún truco de cómo traducirlo.
¿Empezamos?
Índice
Qué es un archivo de extensión SVG
Ya dijimos que extensión SVG es un formato para diseñar imágenes.
Además, SVG (Scalable Vector Graphics) es un formato estándar abierto y desarrollado por el W3C. Puedes echarle un vistazo al material supertécnico de este enlace.
Se trata de un formato bidimensional de imágenes, ya sabes, solo ancho por alto, nada de 3D, que es más complicado…
Además, es un formato vectorial de imágenes.
¿Qué significa vectorial?
Lo entenderás enseguida con un ejemplo.
Los formatos de imágenes más habituales, como JPG, GIF o PNG, son formatos de mapas de bits. En estos formatos cada píxel de la imagen viene definido por un color, por ejemplo en el espacio de color RGB y con 8 bits de resolución por cada componente, el color definido por la tríada (255, 0, 0) corresponde a un punto de color rojo, mientras que el color (255, 255, 0) corresponderá a un color amarillo. Así para cada uno de los píxeles de la imagen, que pueden ser millones.
¿Está claro con las imágenes de mapas de bits?
Pues bien, las imágenes vectoriales tienen una filosofía completamente distinta: en lugar de almacenar el color de cada píxel, se guarda información de figuras geométricas, lo cual tendrá interesantes beneficios, como ya veremos.
Por ejemplo, para representar una recta en un SVG bastará guardar 4 números: 2 para las coordenadas de la posición inicial y otros 2 para la final. En realidad se necesitan más datos, porque es necesario determinar otros parámetros de la recta, como el color, el grosor, la opacidad, la sombra y cosas por el estilo…
Otro ejemplo, para representar un rectángulo en un SVG bastará guardar 4 números: 2 para las coordenadas de un vértice y otros 2 para el vértice opuesto. Al igual que con la recta, se necesitará algún parámetro más para determinar el color el grosor del borde, el color de relleno, la opacidad, la sombra…
Si me preguntas por un círculo, podrás adivinar que necesitarás el punto central y el radio (más el resto de parámetros accesorios).
Por si no había caído: el texto se representa por los caracteres (más la tipografía, el color, la posición de cada cuadro de texto, etc.).
Date cuenta que se puede representar cualquier polígono, por complejo que sea, simplemente mediante una lista de todos los vértices.
Se entiende lo que es una imagen vectorial, ¿verdad?
⁂
Lo que esconde la extensión SVG
Como ejemplo de una imagen SVG, vamos a ver la siguiente:
Como puedes ver, es una imagen muy sencilla que contiene un círculo rojo, un rectángulo gris y un par de textos. Nada más… Te la puedes descargar para que compruebes por ti mismo lo que vamos a hacer a continuación y veas que no hay magia…
Nota: en este enlace, elige Descargar como.
Si eres un asiduo de Gonduana, recordarás que todas las extensiones que hemos visto hasta ahora (DOCX, XLSX y paquetes de Studio) eran en realidad archivos comprimidos ZIP.
Entonces… ¿qué será un archivo de extensión SVG?
Se admiten apuestas…
Pues una imagen SVG es, en realidad, ¡un archivo XML!
La demostración es muy sencilla:
En el Explorador de archivos de Windows, abre el archivo SVG con un editor de textos (como el Bloc de notas, Notepad++ o un buen editor de XML) y, tachán, tachán… se abre un archivo de texto en el que podrás ver en la cabecera que se trata de un XML creado con la aplicación Inkscape (veremos después qué es Inkscape):
Nota: si abres el XML con el Bloc de notas, verías lo mismo, pero se ve mucho mejor con los colores de una aplicación como Notepad++.
Puedes ver también el rectángulo gris (elemento rec):
¿Puedes identificar los parámetros de ancho, alto, y la posición del primer vértice?
Justo debajo tienes definido el círculo rojo (elemento circle):
¿Ves las coordenadas del centro y el radio?
También distinguirán los dos cuadros de texto: están dentro de elementos flowPara que, a su vez, están dentro dentro de elementos flowRoot:
⁂
¡Vamos a hacer pruebas!
En la imagen SVG (ya sabes que es un XML) cambia los textos, por ejemplo, de «gris» a «verde» y de «rojo» a «AZUL»:
Vamos a cambiar también los colores de relleno del círculo y del rectángulo. Se consigue modificando los valores de fill dentro del atributo style de ambos elementos:
Donde, en el espacio RGB, 0ff00 es el valor hexadecimal que corresponde a un verde en la definición del rectángulo; de la misma forma, 0000ff corresponde a un azul en el círculo.
La imagen final modificada será:
Compara esta imagen con la original, y comprueba los cambios implementados: texto y colores de relleno.
En el archivo XML también podríamos haber modificado la posición de los textos o el tamaño de las cajas que contienen los textos y, podríamos ver el cambio en la imagen.
⁂
Beneficios de la extensión SVG
Básicamente son tres los beneficios de trabajar con imágenes SVG:
- Como puedes imaginar por el número de datos que se guardan en una imagen SVG, el tamaño puede ser mucho menor que en una imagen de mapa de bits. En la imagen de ejemplo que estamos viendo, el archivo SVG era de unos 4 KB, su versión en formato PNG era de 9 KB, mientras que en JPG eran 12 KB.
Nota: el formato SVG también admite un tipo comprimido de archivo, de extensión SVGZ, comprimido con la herramienta gzip. En la misma imagen, el tamaño de archivo comprimido queda en algo más de 1 KB. - El mayor beneficio desde mi punto de vista es que escalable hasta el infinito: puedes hacer zum a un archivo SVG y siempre lo verás con la misma nitidez, sin la pérdida típica en la resolución de las imágenes JPG, PNG y GIF.
Por ejemplo, si vemos la imagen completa, no habrá mucha diferencia entre la imagen SVG y su contrapartida en PNG:SVG
PNG
Pero si hacemos zoom hasta ver solo una parte de la palabra «Círculo», entonces la diferencia será evidente y es donde el formato SVG se muestra muy superior a cualquiera de los formatos de mapas de bits:
SVG
PNG
Se nota la diferencia, ¿verdad?
- El formato SVG admite efectos, desplazamientos y giros. Puede añadirse interactividad, por ejemplo, al pasar el ratón por encima del círculo, puedes ejecutar una acción concreta.
Gracias a estos beneficios, en la actualidad, todos los navegadores web modernos son compatibles con las imágenes SVG y todo indica que este formato se usará cada vez más.
Así que no te extrañe que un día de estos, y más pronto que tarde, tu cliente te pida traducir una imagen SVG.
¿Estarías preparado para ayudarle con esta traducción?
⁂
Cómo traducir una imagen SVG
En este artículo vamos a ver tres formas de traducir una imagen SVG:
1. Traducir con un programa de software de imágenes
Hay algunos programas compatibles con este formato SVG:
Corel Draw
Te puedes descargar una versión de prueba durante 15 días desde este enlace:
http://www.coreldraw.com/en/pages/free-download/
Adobe Illustrator
Inkscape
Inkscape es un programa de código abierto y de libre distribución que te puedes descargar gratuitamente desde:
https://inkscape.org.
Inkscape es compatible con la extensión SVG y con la versión comprimida SVGZ.
Los dos primeros programas (Illustrator y Corel Draw) son de pago, y bastante caros, por cierto, pero llevan mucho tiempo en el mercado, mientras que Inkscape es gratuito, pero el diseño que puedes conseguir no llega al nivel profesional de los dos primeros.
2. Traducir sabiendo el secreto de la extensión SVG
La segunda forma de traducir una imagen SVG es aprovechando que en realidad es un XML: lo abres en un sencillo editor de textos, como el Bloc de notas, y buscas y traduces uno a uno los textos.
Es un proceso algo peligroso, porque si borras sin querer alguna de las etiquetas, seguramente no podrás abrir esta imagen nunca más.
Advertidos estamos…
El proceso completo sería:
- Abre la imagen SVG con un editor de textos (mejor con Notepad++).
- Busca el primer cuadro de texto y tradúcelo.
OJO: con mucho cuidado para no borrar nada del código XML, como los signos mayor que (>) o menor que (<). - Repite el paso 2 hasta traducir el último cuadro de texto.
- Guarda los cambios.
- Opcional: Abre la imagen SVG con Inkscape, por ejemplo, para verificar los cambios visualmente.
Nota: Si el texto traducido es más largo que el original, es posible que necesites redimensionar alguna caja de texto.
Lo más seguro es que solo te compense este método si se trata de una minitraducción, que consista en un puñado de palabras sueltas.
3. Traducir con una herramienta de traducción asistida
En el próximo artículo veremos con detalle esta tercera forma de traducir una imagen SVG en un programa de traducción asistida, como SDL Trados Studio.
No te cuento más, lo veremos en profundidad la semana que viene.
⁂
Conclusiones de las imágenes SVG
Hemos visto que los archivos de extensión SVG son imágenes:
- vectoriales;
- bidimensionales;
- estáticas o dinámicas;
- de extensión SVG, es verdad, pero en realidad son archivos que siguen el estándar XML.
Hemos visto tres formas de traducir una imagen SVG:
- con un programa (Illustrator, Corel Draw o Inkscape);
- sabiendo que es un XML y abriéndola con un editor de textos (Bloc de notas o Notepad++);
- con una herramienta de traducción asistida (profundizaremos en el próximo artículo).
⁂
Nada más, si no te quieres perder el siguiente artículo de Gonduana, suscríbete al boletín del blog, o sígueme en LinkedIn, Facebook o Twitter (@jssprt). De esta manera, serás el primero en enterarte de la publicación del artículo.
La licencia de uso del logotipo de SVG de la cabecera de este artículo me obliga a dar los siguientes enlaces: