Cómo es por dentro un archivo trazado

El trazador agrupa el resultado por objeto: primero va un <g> para el fondo (cuando la imagen lo tiene) y después un <g> por cada objeto separado, cada uno con su nombre en un <title> (Background, Object 1, Object 2…). Dentro de cada grupo, cada forma es su propio elemento <path>, con un fill y un atributo d que guarda el contorno como órdenes de mover, línea y curva cúbica, y las formas se anidan según lo que las encierra: una forma que contiene otras (una cara con sus ojos) se convierte en un grupo propio (Part 1.1, Part 1.1.1…) cuyo primer trazado es la propia forma, dibujada entera debajo de lo que contiene, así que al ocultar un ojo se ve la cara, no un agujero. Las motas de pocos píxeles quedan como trazados sin nombre dentro de su grupo padre. No hay trazos ni elementos de texto: el texto de un logo es un contorno relleno, no tipografía. Con Capas en Por color en Ajustes, el archivo no tiene grupos y lleva en su lugar un <path> por color.

Un pequeño SVG redondo con un paisaje y, después, cada uno de sus cuatro trazados por separado: un disco azul, un cielo crema, una montaña azul marino y un sol naranja con su reflejo

El SVG de muestra de nuestra página de inicio (izquierda) y cada uno de sus cuatro trazados por separado: cada forma es un elemento independiente con su propio relleno, lista para seleccionarla, cambiarle el color o eliminarla.

El editor lee exactamente esa estructura, con el tamaño y las coordenadas del propio archivo. Cada trazado es una forma en la que puedes hacer clic para seleccionarla. La lista de capas muestra los grupos de primer nivel del archivo: un archivo cuyas formas están directamente en el SVG (un trazado Por color) se abre como una sola capa, y un archivo agrupado por objeto se abre con una capa por grupo, con su nombre.

Ediciones que el editor del navegador resuelve bien

  • Cambiar el color de una forma. Selecciónala y elige un relleno nuevo. Como un trazado contiene todas las zonas de ese color dentro de un objeto, cambiar "el azul" cambia a la vez todas las zonas azules de ese objeto; si necesitas que dos de ellas sean distintas, eso es una separación para un editor de escritorio.
  • Mover y escalar. Arrastra para mover y usa los tiradores para cambiar el tamaño. Escalar un vector nunca lo desenfoca, así que puedes hacer una versión para la cabecera de la página y otra para un favicon a partir del mismo archivo.
  • Mover puntos sueltos. Selecciona una forma y cambia a la herramienta de puntos (N): cada punto de anclaje de la curva trazada tiene un tirador que puedes arrastrar, y sus tiradores de curva doblan los segmentos contiguos. Así corriges una ondulación o enderezas un borde sin salir del navegador.
  • Alinear y espaciar formas. Selecciona varias formas y alinea sus bordes o centros entre sí o con el diseño (una sola forma siempre se alinea con el diseño); con tres o más seleccionadas, Distribuir las espacia con huecos iguales.
  • Unir, restar, intersecar. Selecciona dos o más formas y usa Combinar formas: Unir las suelda en un solo contorno, Restar recorta las formas de encima de la de abajo, Intersecar conserva solo la superposición, Excluir conserva lo que no se superpone y Dividir convierte cada superposición en su propia forma. Las curvas siguen siendo curvas, el resultado conserva el color y la capa de la forma de abajo, y un solo deshacer recupera las formas originales. Es el paso habitual antes de cortar: soldar letras superpuestas en una sola pieza o restar una forma para hacer un calado.
  • Ajustar a la cuadrícula. Activa el imán y elige un tamaño de cuadrícula: lo que muevas, dibujes, redimensiones o modifiques punto a punto encaja en la cuadrícula, que se dibuja sobre el diseño mientras está activa. El editor recuerda el ajuste en tu navegador.
  • Reutilizar formas y trabajar con varios archivos. Guarda una selección en Mis piezas (se almacena en tu navegador para tu cuenta y se puede exportar a un archivo) y añádela a cualquier otro dibujo. Abre otro de tus archivos desbloqueados en una pestaña nueva para copiar entre ellos: cada pestaña tiene su propio historial para deshacer y se guarda como una versión nueva de su propio archivo.
  • Reordenar, ocultar y bloquear. Las capas se pueden ocultar, bloquear (para que los clics lleguen a las formas de abajo), renombrar y subir o bajar; dentro de una capa, Ctrl+D duplica una forma y las flechas la desplazan poco a poco.
  • Eliminar restos. Los trazados de motas y un rectángulo de fondo sobrante se quitan con un clic. Suele ser la primera edición después de trazar un JPEG.
  • Exportar. Guarda el SVG o exporta un PNG al ancho en píxeles que elijas, con la transparencia conservada. Editar un resultado desbloqueado no gasta créditos adicionales.

El editor solo abre vectores que son tuyos: un SVG que subiste o un resultado que desbloqueaste. Las vistas previas son imágenes ráster con marca de agua y no se pueden editar; así el vector de pago no circula por la red hasta que se paga.

Ediciones que corresponden a un editor vectorial de escritorio

Algunos cambios requieren una cirugía de trazados que el editor del navegador no ofrece:

  • Separar un color en objetos independientes (las dos formas azules que deben moverse por separado): "Separar" (Break Apart) en un editor de escritorio.
  • Desplazar un contorno (agrandarlo o reducirlo una distancia fija, un contorno para el corte de un sticker).
  • Convertir rellenos en trazos de línea central para plóteres de pluma o grabado de una sola línea.
  • Convertir texto en contornos. El editor del navegador añade y conserva texto editable, pero no lo convierte en trazados.

Inkscape (gratuito y de código abierto) hace todo esto; también los editores comerciales. Abre el SVG, usa "Separar" (Break Apart), "Ampliar" (Outset) o la herramienta de nodos según lo necesites, y guarda. Como el archivo es SVG normal con datos de trazado estándar, nada en él depende de png2svg.art.

Un orden de trabajo sensato

  1. Desbloquea y abre en el editor. Elimina formas sueltas, corrige los colores evidentes, suaviza punto a punto un borde que ondula y revisa el apilamiento.
  2. Suelda o recorta formas con Combinar formas, y alinea lo que deba quedar alineado.
  3. Guarda el SVG. Pásalo por el optimizador si el tamaño importa (elimina metadatos y redondea coordenadas; revisa el antes y el después que indica).
  4. Desplaza contornos o separa trazados en un editor de escritorio si el trabajo lo requiere.
  5. Conserva el resultado desbloqueado en tus archivos: volver a descargarlo es gratis mientras esté guardado, y puedes reabrirlo en el editor en cualquier momento dentro del periodo de retención.

Límites que conviene tener en cuenta

  • El editor no puede añadir un degradado; los rellenos son colores sólidos o ninguno. Se pueden añadir trazos (color y grosor), y los degradados, trazos y textos editables que ya hay en un archivo se conservan. Todo lo que el editor no puede conservar se indica antes de guardar.
  • Los trazados muy grandes (miles de trazados de una ilustración detallada) son lentos de manipular en cualquier navegador; simplifica el trazado con un número de colores menor antes de editar.
  • Los PNG exportados son imágenes ráster del tamaño que elijas: exporta al tamaño más grande que vayas a necesitar o sigue usando el SVG.