Una herramienta para editar iconos SVG

El objetivo principal de esta herramienta es editar iconos SVG. Ya comenté en el tema sobre cómo se hacen iconos SVG que conviene utilizarlos en lugar de imágenes, pues ocupan menos, se escalan mejor y responden a CSS y DOM. Y además son fácilmente editables si tenemos un editor SVG. Pues de eso se trata, de construir un editor sencillo para crear y modificar iconos SVG.

El editor utiliza el componente Selector de área o polígono. Esta herramienta en el modo selector de área permite abrir un área que selecciona un elemento para mover o modificar su tamaño o posición. En el modo selector de polígono permite crear puntos y unirlos con líneas. Al menos así era inicialmente, pues ahora se incorporan las siguientes mejoras:

• Unir los puntos también con curvas de Bezier cúbicas y cuadráticas así como con arcos.
• Mejora del constructor de polígonos, usando también curvas de Bezier para unir los vértices. Podemos unirlos con Bezier cuadráticas o cúbicas para aproximarlas a arcos de circunferencia. Puede ver un par de temas con más información sobre las Curvas de Bezier cuadráticas en los SVG y las Curvas de Bezier cubicas en los SVG. Otro tema es acerca de los arcos de circunferencia con curvas Bezier en SVG, exponiendo como aproximar un arco de circunferencia entre dos puntos conocidos.
• Utilidades para importar y exportar en varios formatos, especialmente con el formato del atributo "d" de un elemento <path> lo que lo hace adecuado para un editor SVG.
• Modo dibujo que permite dibujar líneas y curvas a "mano alzada".
• Diferenciación por subcaminos, pudiendo eliminar, mover, cerrar, cortar o unir un subcamino.
• Interfaz para mostrar propiedades de cada punto y línea, pudiendo modificarse o eliminarse así como crear nuevos puntos y líneas.
• Interfaz para cambiar la configuración del Selector.
• Se incorporan y mejoran funciones que cambian el tamaño, la posición, el ajuste a rejilla, la rotación, el alineado y el reflejo.
• Se mejoran los shortcuts o teclas de método abreviado.

El editor pretende además servir de herramienta de aprendizaje de SVG. Para ello se expone el código de cada elemento, de tal forma que seleccionando el elemento gráfico también se selecciona el código que lo soporta y viceversa. Así podemos ir visualizando como se modifica el código a medida que hacemos cambios en el SVG.

Podemos cambiar el código entre vista de presentación resaltado, tal como se muestra en la Figura, o como texto plano, pudiendo realizar modificaciones sobre el propio texto y renderizar el resultado. Además de copiar y pegar trozos de código, también se aportan utilidades para exportar el SVG en formato de texto y también como imágenes en formatos PNG, JPEG y WEBP.

Se acompaña una colección de iconos SVG de muestra que podrá insertar y ver como están construidos. Los del origen de este sitio Wextensible puede usarlos sin más limitaciones (vea página de licencia de este sitio). Para los que se exponen de otros orígenes, aunque de uso libre, puede ver las condiciones de licencia que se indica en el enlace que le lleva a ese origen. Cuando inserte un icono en el editor SVG verá que también se inserta un comentario HTML con datos del origen.

Elementos que podrá usar en el editor SVG

Dije antes que era un sencillo editor SVG porque no contempla todas las posibilidades del universo SVG. Los únicos elementos que podrá insertar son <path>, <line>, <rect>, <polygon>, <polyline>, <circle>, <ellipse>, <text>, <tspan>, <textPath> e <image>. En la Figura observará los iconos que se usan en el editor para insertarlos.

Hay muchos otros elementos SVG que se podrían utilizar. Desde el elemento <g> que sirve para agrupar elementos, pasando por otros que sirven para expresar definiciones, gradientes, filtros, patrones, marcadores, máscaras y un largo etcétera. En la página de MDN SVG element reference hay una lista con todos ellos. Agregarlos al editor requiere saber utilizarlos. Por ahora y para el objetivo de crear iconos simples es suficiente con el conjunto de elementos anteriores.

En cuanto a insertar otros elementos HTML sólo se permiten comentarios HTML como por ejemplo <!-- abc -->. Los atributos también están limitados. Si abre la hoja de propiedades del elemento podrá ver que atributos se permiten para cada elemento.

Podría resultar dudoso que un <image> tuviera alguna utilidad para crear iconos SVG. La razón de usarlo es que puede servir para ponerlo de fondo y "dibujar" encima los puntos del polígono y así reproducir una copia con más facilidad. Por ejemplo, en la página W3C HTML-5 Logo podemos descargar la imagen o el SVG del icono de HTML5.

Si no tuviéramos la facilidad de descargar el SVG podríamos descargar la imagen e insertarla en nuestro editor en un elemento <image>. Luego abriríamos el selector de polígono para ubicar los puntos y líneas encima de la imagen, dotando de los colores apropiados y, finalmente, eliminaríamos la imagen. Así lo hice y el resultado lo puede observar en la Figura creado en el editor SVG. Se trata de un SVG, no una imagen, como podrá comprobar con la utilidad inspeccionar del navegador.

Editando puntos y líneas de un polígono

Esta página no pretende ser un tutorial de SVG, pero creo que conviene exponer lo básico y así al mismo tiempo vemos como lo maneja este editor. Puede encontrar información extensa en el tutorial SVG de Mozilla Developer Network (MDN). Y específicamente en MDN atributo "d" sobre este apartado. También en el tema sobre las Curvas de Bezier en los SVG puede ver más detalles.

En la Figura puede ver como se muestran los puntos y líneas de un polígono. Los puntos se muestran en color marrón, mientras que los de color azul indican un punto final de subcamino y el de inicio del cierre cuando el subcamino está cerrado. Podemos mover los puntos con el ratón o bien usando botones para mover todo el polígono. El primer subcamino es el del rango [0..3] y está cerrado. El segundo subcamino [4..7] está abierto.

Los comandos absolutos path SVG son las letras "M", "L", "V", "H", "C", "Q", "A". Las minúsculas serían comandos relativos. Además existen las letras "S" y "T" que explicaremos más abajo. Después de un comando viene las coordenadas del punto de destino y, en su caso, las de los puntos de control. Cada subcamino se inicia con un comando "M" que significa Move to. Así M2 2 o bien M2,2 significará que nos movemos a la coordenada (2, 2). Podemos separar las coordenadas con espacios o con comas.

Las líneas usan los comandos "L", de Line to. Aunque pueden resumirse si el movimiento es sólo horizontal con la letra "H" y vertical con la letra "V". Así M2 2L7 2 dibuja los puntos 0 y 1, pero podemos abreviar con M2 2H7 pues la coordenada Y del segundo punto es igual que la misma coordenada Y del punto anterior. Con comandos relativos pondríamos M2 2l5 0 o más corto con M2 2h5, donde 5 es la diferencia a 7 de la coordenada X anterior.

El quinto punto está seleccionado lo que permitirá aplicar acciones sobre el mismo, como eliminar ese punto o cambiar la línea que los une y que es la que aparece por defecto, por una curva, en este caso un curva cuadrática. Se corresponde con el comando "Q" de quadratic. Esta curva de Bezier cuadrática tiene un único punto de control marcado con el mismo número que el punto final de esa curva, el punto 5 con color de fondo negro y unido a los extremos de la curva por líneas discontinuas. Moviendo el punto de control modificaremos la curva.

En el punto 7 hemos aplicado una curva de Bezier cúbica que tiene por comando SVG la letra "C". Se observa que tiene dos puntos de control marcados con el numero 7 que se enlazan con el punto 6 y el 7. Moviendo esos puntos modificaremos la curva con más posibilidades que con el comando "Q".

Al actualizar todo el polígono anterior obtendremos el camino M2 2H7V5H2zM2 7Q4.5 9.45 7 7V10C7 13 2 10 2 13. Observe que hay puntos decimales, por lo que es recomendable usar espacios en lugar de comas para separar coordenadas y así mejorar la legibilidad de la cadena. La aplicación crea los puntos con comandos absolutos por defecto, aunque es posible cambiarlos a relativos o leer SVG con comandos relativos.

Podemos descargar el SVG con varios formatos. Uno de ellos es descargar el conjunto de puntos del polígono como un JSON, copia del Array de puntos que maneja la aplicación, donde la propiedad "z" indican los cierres y "plus" son las coordenadas de los puntos de control de las curvas. No se necesita conocer o manejar este Array, pero puede ser ilustrativo como soporta la aplicación los datos del polígono:

[{"index":0,"x":2,"y":2,"cmd":"M","z":3,"plus":[]},
{"index":1,"x":7,"y":"","cmd":"H","z":-1,"plus":[]},
{"index":2,"x":"","y":5,"cmd":"V","z":-1,"plus":[]},
{"index":3,"x":2,"y":"","cmd":"H","z":0,"plus":[]},
{"index":4,"x":2,"y":7,"cmd":"M","z":-1,"plus":[]},
{"index":5,"x":7,"y":7,"cmd":"Q","z":-1,"plus":[[4.5,9.45]]},
{"index":6,"x":"","y":10,"cmd":"V","z":-1,"plus":[]},
{"index":7,"x":2,"y":13,"cmd":"C","z":7,"plus":[[7,13],[2,10]]}]

La otra curva que podemos utilizar es el arco, con el comando "A" y las coordenadas r_x, r_y, a, f1, f2, x, y. El de la Figura tiene el path M2 6A4 4 0 0 0 10 6. El punto final de la curva es el (x, y) = (10, 6). El radio del arco lo fijan las coordenadas (r_x, r_y) = (4, 4) correspondiendo a un círculo, pues para una ellipse r_x ≠ r_y. Moviendo el punto de control marcado con el "1" podemos cambiar el radio.

Los valores a, f1, f2 se corresponden con el ángulo y los flags de arco largo (large arc flag) y sentido o barrido del arco (sweep flag). Estos flags reciben valores 0 o 1 que indican si se utiliza o no un arco largo y en que sentido se dibuja. No son específicamente puntos de control, es decir, no pueden trasladarse como coordenadas en el plano, pero podemos cambiar estos valores accediendo a las propiedades del punto.

Veamos ahora como funcionan los comandos "S", "T", viendo un ejemplo con este último. En la Figura puede ver el camino M2 6Q2 2 6 2Q10 2 10 6. Son dos curvas "Q", la primera con punto de control en (2, 2) y la segunda en (10, 2). Se observa que el segundo punto de control es un reflejo del primero en relación con el punto 1. Asi podemos omitir el segundo punto de control y usar el comando "T" en lugar del "Q" quedando el camino como M2 6Q2 2 6 2T10 6, entendiéndose que el segundo punto de control está ubicado en el reflejo del punto de control de la curva anterior. Usando esta técnica podemos ahorrar espacio a la hora de escribir los caminos.

De igual forma funciona el comando "S" que abrevia puntos de control del comando "C". El editor es capaz de leer estos comandos "S", "T" pero los convierte y devuelve como "C", "Q".

Barra de botones del editor SVG

Esta ayuda se refiere a la barra de botones que actúa sobre diversos aspectos del SVG y del selector de polígono. En azul se incluye los shortcuts o teclas de método abreviado para algunas ejecuciones.

Barra de botones general:

• Abre el selector de área que nos permite mover y cambiar el tamaño del elemento seleccionado.
• Abre el selector de polígono si es un PATH. En otro caso si es un elemento LINE, RECT, POLYGON, POLYLINE, CIRCLE o ELLIPSE extrae ese elemento como una colección de puntos de un polígono. En otro caso abre el área de edición de polígono para crear uno nuevo.
• Abre la hoja de atributos del elemento seleccionado. Si estamos en selección de polígono muestra las propiedades del punto seleccionado, la configuración del selector de polígono y una utilidad para crear polígonos regulares. (F4)
• Cambiar el zoom (Ctrl "+", Ctrl "-")
• Abre esta ayuda. (F1)
• Abre colección de iconos SVG de muestra

Barra de botones de edición

• Copiar elementos seleccionados (Ctrl "C", Insert (INS))
• Cortar elementos seleccionados (Ctrl "X")
• Pegar elementos seleccionados (Ctrl "V")
• Eliminar elementos seleccionados (Delete (DEL))
• Deshacer (Ctrl "Z")
• Rehacer (Ctrl "Y")

Barra de botones para insertar nuevos elementos

• Insertar elemento PATH
• Insertar elemento LINE
• Insertar elemento RECT
• Insertar elemento POLYGON
• Insertar elemento POLYLINE
• Insertar elemento CIRCLE
• Insertar elemento ELLIPSE
• Insertar elemento TEXT
• Insertar elemento TSPAN
• Insertar elemento TEXTPATH
• Insertar elemento IMAGE

Barra de botones para mover el elemento seleccionado

Si el elemento seleccionado es el SVG, al mover modificamos las coordenadas de origen (x₀, y₀) del viewBox. Este es un atributo necesario de la forma x0 y0 width height para declarar donde está el punto de origen de coordenadas y que ancho y alto tiene el contenedor SVG. Estos botones también sirve para mover el polígono en el modo selector de polígono.

• Mueve a la anterior unidad de rejilla horizontal (←)
• Mueve a la siguiente unidad de rejilla horizontal (→)
• Mueve a la anterior unidad de rejilla vertical (↑)
• Mueve a la siguiente unidad de rejilla vertical (↓)

Barra de botones para cambiar el tamaño del elemento seleccionado

Si el elemento es el SVG se modifican las medidas width height del viewBox. También se aplica para cambiar el tamaño del polígono en el modo selector de polígono.

• Incrementa el tamaño en ambas direcciones X e Y
• Reduce el tamaño en ambas direcciones X e Y
• Incrementa el tamaño en dirección X
• Reduce el tamaño en dirección X
• Incrementa el tamaño en dirección Y
• Reduce el tamaño en dirección Y
• Ajusta al más alto
• Ajusta al más bajo
• Ajusta al más largo
• Ajusta al más corto

Barra de botones para rotar el elemento seleccionado

También se puede rotar el polígono en el modo selector de polígono.

• Abre formulario para aplicar rotación
• Rotar izquierda -5°
• Rotar derecha +5°
• Invertir las posiciones. No es exactamente como rotar, pues en aquellos elementos como LINE, RECT, POLYGON, POLYLINE, CIRCLE, ELLIPSE e IMAGE se intercambian las posiciones x con y y width con height. En PATH y TEXT se aplica una rotación de π/2 pues no es posible obtener directamente todos los valores x, y, width, height

Barra de botones para modificar la estructura del elemento seleccionado

• Convierte un elemento en un PATH creando el atributo d a partir de los atributos x, y, width, height del elemento RECT; x1, y1, x2, y2 de un LINE; cx, cy, r de un CIRCLE; cx, cy, rx, ry de un ELLIPSE y finalmente el atributos points de los elementos POLYGON o POLYLINE. En cualquier caso, incluso si es un PATH, convierte las transformaciones de traslación, rotación y escalado en posiciones definitivas, eliminado el atributo transform.
• Une varios elementos PATH en un único PATH, combinando sus atributos d en un único atributo
• Separa un elemento PATH en varios PATH, cada uno con uno de los subcaminos del PATH de origen
• Invierte fondo de un elemento PATH agregando M0 0h24v24H0z al inicio del atributo "d" del elemento PATH y poniendo el atributo fill-rule="evenodd". Pulsando otra vez se elimina ese fondo. Recuerde que para que actúe el relleno de forma automática el elemento debe contener el atributo fill distinto de none. Si no presenta ese atributo el valor por defecto es el color negro. En la paleta de color puede usar la clave de color empty con lo que no se agregará valor al atributo fill apareciendo entonces negro o bien poner cualquier color.
• Trae al frente el elemento seleccionado
• Envía al fondo el elemento seleccionado
• Abre el editor de texto para modificar un elemento TEXT
• Abre el cargador de imagen para insertar una imagen en el elemento IMAGE

Barra de botones para formatear el elemento seleccionado

• Eliminar atributo stroke-width para el grueso de línea
• Dotar atributo stroke-width="0.1". Este valor representa una décima parte de una unidad del viewBox. En el editor con zoom al 100% una unidad equivale a 20 píxeles, por lo que ese valor resultará en 2 píxeles. Por lo tanto el valor final dependerá del ancho y alto final donde se vaya a presentar el SVG.
• Dotar atributo stroke-width="0.5" (10 píxeles en el editor con zoom 100%)
• Dotar atributo stroke-width="1" (20 píxeles en el editor con zoom 100%)
• Dotar atributo stroke para el color de línea, abriendo la paleta de colores.
• Dotar atributo fill para el color de fondo, abriendo la paleta de colores.
• Dotar atributo fill-rule para la regla de relleno con los dos valores posibles evenodd y nonzero alternativamente.

Barra de botones para alinear los elementos seleccionados

Con las alineaciones derecha, izquierda, arriba y abajo, si sólo hay un elemento seleccionado lo alinea con el borde correspondiente del SVG. Si hay varios elementos se alinean todos con el borde correspondiente del elemento situado más lejano en ese lado. También se aplica al polígono en el modo selector de polígono.

• Ajusta el elemento a la rejilla, redondeando los valores decimales al entero más cercano.
• Alinea izquierda
• Centra horizontalmente
• Alinea derecha
• Alinea arriba
• Centra verticalmente
• Alinea abajo

Barra de botones específicas del selector de polígono

• × Cierra el selector de polígono sin aplicar ningún cambio
• Cierra el selector de polígono aplicándolo sobre el elemento PATH o, en su caso, convirtiéndolo en un PATH
• Muestra u oculta los puntos del polígono para poder trazar líneas continuas a modo de dibujo a mano alzada
• Muestra u oculta los puntos de control de los comandos C (cubic), Q (quadratic) y A (arc)
• Mueve al anterior punto de polígono seleccionado
• Mueve al siguiente punto de polígono seleccionado
• Cierra el camino (o subcamino donde se encuentre el punto seleccionado)
• Elimina el camino (o subcamino donde se encuentre el punto seleccionado)
• Abre el área selectora para mover el polígono completo
• Abre el área selectora para mover el subcamino donde se encuentre el punto seleccionado
• Convierte al comando L (línea)
• Convierte al comando C (curva cúbica Bezier)
• Convierte al comando Q (curva cuadrática Bezier)
• Convierte al comando A (Arco de curva)
• Refleja el polígono en horizontal. La separación se declara en la configuración offset reflejo.
• Refleja el polígono en vertical

Barra de botones Viewbox:

Estas son acciones que se aplican sobre el SVG, cuyo contenido se renderiza en un Viewbox que se declara como x0 y0 width height, especificándose donde se ubica el origen de coordenadas y el ancho y alto. Estos valores pueden modificarse de tres formas: con el selector de área, modificando la propiedad directamente o modificando el código del SVG.

• Selecciona todos los elementos
• Repone el Viewbox inicial, valor que se guarda cuando creamos nuevo SVG vacío o bien insertamos un SVG de muestra.
• Extiende el Viewbox actual para abarcar elementos que estén situados por fuera, aplicando ajuste SVG que ajusta el Zoom para que todo el contenido entre en la rejilla mostrada en pantalla.

Otras teclas o shortcuts en el editor SVG o selector de polígono

• Escape (ESC) Borra el SVG y crea uno nuevo vacío o borra la lista de puntos de polígono si estamos en esa vista
• ContextMenu Abre el menú contextual, a excepción de que el selector de polígono esté abierto pues no tiene menú contextual
• Ctrl + click para agregar otro elemento a la selección en el modo de selección de área o para seleccionar un punto del polígono en el modo selector de polígono
• Shift + click para agregar varios elementos a la selección en el modo de selección de área o sobre un punto de polígono para cortar o unir alternativamene un camino en el modo selector de polígono
• Alt + click sobre un punto de polígono para ajustarlo a la rejilla
• Doble click sobre un punto de polígono para eliminarlo
• Tabulador (TAB) itera selección sobre elementos del SVG o sobre la lista de puntos del polígono