Gonduana

Contenidos para traductores

  • Blog
  • Empieza por aquí
    • Encuesta: coger
    • Encuesta: ratón o mouse
    • Artículos más leídos
    • Vídeos más vistos
    • Gonduana en las redes sociales
    • ¿Quieres saber más sobre mí?
  • Recursos
    • Software para traductores
    • Hardware para traductores
    • Internet para traductores
    • WordPress para traductores
  • Servicios
  • Sobre mí
  • Contacto

Lo que la extensión SVG esconde

Publicado el 20/mayo/2017 por Jesús Prieto

lo que la extensión SVG esconde

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
    • ¿Qué significa vectorial?
  • Lo que esconde la extensión SVG
  • ¡Vamos a hacer pruebas!
  • Beneficios de la extensión SVG
  • Cómo traducir una imagen SVG
    • 1. Traducir con un programa de software de imágenes
    • Corel Draw
    • Adobe Illustrator
    • Inkscape
    • 2. Traducir sabiendo el secreto de la extensión SVG
    • 3. Traducir con una herramienta de traducción asistida
  • Conclusiones de las imágenes SVG

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:

Ejemplo de imagen de extensión SVG

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…

Descargar imagen SVG para hacer pruebas

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):

Abrir una imagen SVG con Notepad++

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):

imagen SVG - 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):

imagen SVG - 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:
imagen SVG - elementos flowPara

⁂

¡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»:

imagen SVG - elementos flowPara editados

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:

imagen SVG - elementos rec y circle editados y marcados

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á:

Ejemplo de imagen de extensión SVG - editada

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:

  1. 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.
  2. 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 1

    PNG

    PNG 1

    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

    SVG 4

    PNG

    PNG 4

    Se nota la diferencia, ¿verdad?

  3. 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 DrawCorelDRAW

Te puedes descargar una versión de prueba durante 15 días desde este enlace:
http://www.coreldraw.com/en/pages/free-download/

 

Adobe IllustratorAdobe Illustrator

 

InkscapeInkscape

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:

  1. Abre la imagen SVG con un editor de textos (mejor con Notepad++).
  2. 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 (<).
  3. Repite el paso 2 hasta traducir el último cuadro de texto.
  4. Guarda los cambios.
  5. 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:

  1. con un programa (Illustrator, Corel Draw o Inkscape);
  2. sabiendo que es un XML y abriéndola con un editor de textos (Bloc de notas o Notepad++);
  3. 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:

  • W3C
  • W3C Document License

Entradas relacionadas

Si te ha gustado el artículo, además de compartirlo en tus redes sociales,

Share on twitter
Share on linkedin
Share on facebook
Share on google
Share on pocket

puedes leer otros artículos de Gonduana del mismo estilo:

traducir una imagen SVG con Trados Studio

Cómo traducir una imagen SVG con Trados Studio

21/mayo/2017

Mi muy estimado traductor: ¿Qué pasaría por tu cabeza si ahora mismo un cliente te pidiera traducir una imagen SVG? ¿Sabrías por dónde empezar? Ya

Leer el artículo »
Insertar HTML con AutoHotkey

Cómo insertar HTML con AutoHotkey

10/noviembre/2016

Si eres programador y escribes código HTML o PHP, por ejemplo, o tienes un blog en WordPress, es muy posible que le saques mucho jugo

Leer el artículo »
extensión XLSX a ZIP

Lo que la extensión XLSX esconde

19/junio/2016

Este artículo es la continuación de este otro, donde tratamos de los documentos de Word DOCX, porque ahora veremos que los archivos de extensión XLSX, las

Leer el artículo »
extensión DOCX a ZIP fog

Lo que la extensión DOCX esconde

21/mayo/2016

Muchos reconoceremos que la extensión de archivo TXT es de un archivo de texto, que la extensión DOCX es el formato de los documentos de

Leer el artículo »
Jesús Prieto

Jesús Prieto

Querido traductor: quiero compartir contigo muchas cosas que podrás aprovechar como profesional: desde herramientas especiales hasta técnicas comerciales; desde estrategias de marketing hasta trucos de productividad personal; desde cómo diseñar tu marca personal hasta novedades de impuestos.
Todos los artículos

Archivado en:software Etiquetado con:imagen, XML

Entrada sin comentarios

Comentar Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Jesús Prieto

Jesús Prieto 2015

Sobre mí

Encuesta: coger

SUSCRÍBETE AL BOLETÍN

Serás el primero en saber que hay un nuevo artículo en Gonduana.

Lo más visto…

Artículos más leídos de Gonduana
Vídeos más vistos de Gonduana
Gonduana en las redes sociales

Últimos artículos

  • Cómo escribir letras griegas con AutoHotkey
  • Macro de VBA para pegar sin formato en Word
  • Macro de AutoHotkey para pegar sin formato en Word
  • Extranjerismos en el ajedrez
  • Cómo buscar en el diccionario de la RAE con AutoHotkey
  • Los comodines de Excel
  • Novedades en el buscador de la RAE
  • Mis macros de Word para ordinales (Marisa E Schieda)
  • Mis macros de Word para abreviaturas de “número”
  • Los 10 principios del comercial

Nube de etiquetas

anglicismos AutoHotkey cobros comodines copias de seguridad correo español Excel foto fórmulas geometría GTD imagen impagos impuestos libros marca matemáticas memoQ mouse MT negociación Outlook parábolas PDF PHP poesía power PowerPoint RAE ratón regex retrasos sector tarifas tipografía TM Trados Studio VBA vídeo webinarios Word WordPress XML zoología

Categorías

  • adaptación (3)
  • blog (10)
  • comercial (24)
  • contabilidad (2)
  • español (5)
  • etimología (4)
  • fiscalidad (2)
  • hardware (3)
  • macros (42)
  • marketing (8)
  • noticias (4)
  • productividad (42)
  • seguridad (5)
  • social (9)
  • software (41)
  • TAO (39)
  • terminología (9)
  • traducción automática (2)
  • traducción literaria (1)
  • tradumática (38)
  • vídeo (17)
Buscar en Gonduana
Política de privacidad
Política de cookies
Aviso legal
Creative Commons

Licencia Creative Commons

Blog de Gonduana: recursos para traductores

Esta web usa cookies
Es cansino, sí, pero la ley europea me obliga a avisarte que este blog, como casi el 100%, usa cookies para recabar datos. ¿Estás de acuerdo con mi Política de cookies? Vale Rechazar Más información
Política de cookies

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are as essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Siempre activado

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

GUARDAR Y ACEPTAR