ProInf.net

Comandos de Linux para extraer iconos de un PDF a SVG y finalmente a PNG

Francisco 03-12-12
Iconos planos

Estaba buscando unos iconos con un diseño minimalista y encontré el fichero Helveticons.pdf que contiene 500 iconos, cada uno en una página. Quería extraer del PDF todos los iconos a formato SVG para poderlos cambiar a mi gusto con el programa InkScape. Finalmente quería automatizar la creación de los iconos PNG a partir de los ficheros SVG. Aquí describo el procedimiento que he seguido por si a alguien le pudiese interesar.

Archivo fuente

El archivo PDF es Helveticons.pdf Contiene 500 iconos minimalistas, cada uno en una página

Este archivo se puede abrir directamente con el programa GIMP para trabajar en píxeles. Con GIMP se puede extraer las páginas que se quiera y pasarlas a capas.

También se puede abrir con el programa InkScape para usar el formato vectorial SVG. En este caso sólo deja obtener una página, la que se quiera, pero sólo una

*) Extraer los iconos PNG directamente desde el PDF

Esto no es lo que quiero hacer pero describo cómo hacerlo por si a alguien le es de utilidad. Se trata de usar el comando pdftocairo. Para obtener ayuda de dicho comando:

man pdftocairo

Por ejemplo para extraer los los 10 primeros iconos en formato PNG a 32×32 píxeles y con fondo transparente:

pdftocairo -png -transp -scale-to 32 -f 1 -l 10 Helveticons.pdf

Esto crea los ficheros: "Helveticons-001.png", "Helveticons-002.png", etc. Para renombrarlos a "icono01.png", "icono02.png", etc. usamos el comando rename:

rename s/Helveticons-0/icono/ *.png

Resultado:

1) Extraer las imágenes SVG contenidas en el PDF

Usaremos los comandos pdftk para extraer las páginas del PDF y el comando pdftocairo para extraer las imágenes SVG.

Veamos un ejemplo:

  1. Extraer un pdf con las 10 primeras páginas:

    pdftk Helveticons.pdf cat 1-10 output 1-10.pdf

  2. Crear un fichero PDF por cada página:

    pdftk 1-10.pdf burst

    Esto crea los ficheros: "pg_0001.pdf", "pg_0002.pdf", etc.

  3. Convertir las páginas obtenidas en imágenes SVG:

    for f in pg*.pdf; do pdftocairo -svg $f; done

    Esto crea las imágenes: "pg_0001.svg", "pg_0002.svg", etc.

  4. Renombrar las imágenes a "icono01.svg", "icono02.svg", etc.

    rename s/pg_00/icono/ *.svg

  5. Borrar los ficheros intermedios:

    rm pg*.pdf
    rm 1-10.pdf
    rm doc_data.txt

Resultado:

icono01.svg, icono02.svg, icono03.svg, icono04.svg, icono05.svg, icono06.svg icono07.svg, icono08.svg, icono09.svg, icono10.svg,

2) Cambiar el color de las imágenes SVG

Todos las imágenes SVG son negras y yo quiero que sean azules. Un fichero SVG describe una imagen con etiquetas de texto de forma muy parecida a una página HTML.

Si abrimos por ejemplo "icono02.svg" con un editor de texto plano cualquiera (yo uso el programa Geany) encontraremos el siguiente código:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512pt" height="512pt" viewBox="0 0 512 512" version="1.2">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero; fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 271.6875 269.980469 L 271.6875 459.851562 L 436.65625 364.609375 L 436.65625 174.738281 Z M 75.953125 364.609375 L 240.917969 459.847656 L 240.917969 268.742188 L 75.953125 173.5 Z M 256.304688 52.238281 L 91.875 147.164062 L 257.375 242.707031 L 421.796875 147.785156 Z M 256.304688 52.238281 "/>
</g>
</svg>

El color de la figura está indicado en fill:rgb(0%,0%,0%). Se trata de cambiar este texto por otro que diga azul fill:#00aaff. Para reemplazar un texto por otro en varios ficheros usaremos el comando sed:

sed -i 's/fill:rgb(0%,0%,0%)/fill:#00aaff/g' *.svg

Resultado:

icono01.svg, icono02.svg, icono03.svg, icono04.svg, icono05.svg, icono06.svg icono07.svg, icono08.svg, icono09.svg, icono10.svg,

3) Editar los iconos con InkScape

Ya tenemos los imágenes SVG de color azul. Ahora se trata de moldear cada imagen para que se ajuste a lo que necesitamos. Esto lo hago imagen por imagen con el programa InkScape.

Al abrir una imagen con InkScape seguramente necesitaremos "desagrupar el objeto" si queremos editar el trayecto o cambiar los colores. En fin se trataría de usar libremente todo lo que nos ofrece este programa: Propiedades, Capas, Alineación, Pluma, etc.

4) Extraer los iconos PNG a partir de los ficheros SVG

Ya tenemos las imágenes SVG acabadas. Ahora quiero extraer de estas imágenes los iconos PNG a 32×32 píxeles. El propio programa InkScape tiene una orden para tal fin, pero tendríamos que ir imagen por imagen y yo lo quiero hacer todo de un tirón. Hacerlo manualmente sería una tarea colosal si fuesen los 500 iconos a varias resoluciones: 128×128, 64×64, 24×24 etc.

Usaremos el comando rsvg-convert. Para obtener ayuda del mismo:

rsvg-convert --help

Convertir los ficheros SVG a PNG:

for f in *.svg; do rsvg-convert -w 32 -h 32 $f -o $f.png; done

Esto crea los ficheros "icono01.svg.png", "icono02.svg.png", etc. Renombramos los ficheros a "icono01-32.png", "icono02-32.png" etc

rename s/.svg.png/-32.png/ *.png

Resultado:

Eso es todo

Resumen de los comandos utilizados

Comando Descripción
pdftk Extrae PDF de PDF
pdftocairo Convierte de PDF a SVG o a PNG
rsvg-convert Convierte de SVG a PNG
sed Reemplaza un texto por otro en varios ficheros
rename Cambiar el nombre de varios ficheros
for f in *; do $f; done Repite una instrucción por cada fichero
Compartir



Añade tu comentario:

(El correo no será publicado)
 

Artículos relacionados:

Ir arriba