Tutorial

Como usar el editor svgdesk

Guia completa de la herramienta

svgdesk es un editor de graficos SVG que funciona en el navegador, gratis y sin instalar nada. Todo se procesa en tu equipo. Esta guia cubre cada parte del editor.

Mapa del editor: las herramientas estan en la barra izquierda; las acciones de archivo, el nombre y Exportar en la cabecera; el panel derecho contiene color, capas, grupo y el codigo SVG.

1. Crear o abrir un documento

Nuevo Nuevo: abre un dialogo para elegir el tamaño del lienzo (o un preset de tamaño estandar SVG: 16, 24, 32, 48, 64, 128, 256 o 512 px).
Subir SVG Subir SVG: carga un archivo .svg de tu equipo. Tambien puedes arrastrarlo al area de trabajo.
Catalogo: en Iconos elige uno y pulsa "Editar en svgdesk"; se abre cargado.

2. La barra de herramientas (izquierda)

↖ Seleccionar (V): mover, escalar y rotar formas.
▭ Rectangulo (R), ◯ Elipse (E), ╱ Linea (L): dibuja arrastrando. Manten Shift para forzar cuadrado, circulo o linea recta (0/45/90 grados).
✎ Pluma (P): poligonos/curvas; clic para añadir puntos, doble clic para cerrar, Esc cancela.
✐ Lapiz (D): trazo libre a mano alzada.
◇ Nodos (N): editar los puntos de una forma.

3. Seleccionar y transformar

Clic en una forma para seleccionarla; arrastra para moverla.
Tiradores en las esquinas/lados para escalar; el circulo rosa para rotar.
Shift+clic: selecciona varias formas y muevelas/cambialas juntas.
Arrastrar un recuadro sobre area vacia: seleccion por area; todo lo contenido dentro queda seleccionado.
Duplicar Duplicar (o Ctrl+D): crea una copia desplazada de lo seleccionado.
Clic derecho sobre un elemento abre un menu con las acciones disponibles (duplicar, agrupar/desagrupar, capas, eliminar).
Clic en area vacia para deseleccionar.

4. Panel de propiedades (derecha)

Relleno y Borde: color (hexadecimal), o "sin color".
Grosor, Opacidad, Opacidad de relleno, Rotacion.
Con varias formas seleccionadas, los cambios se aplican a todas.

5. Capas (orden Z)

En el panel del elemento, con los botones de Capas puedes traer al frente ⤒, subir ↑, bajar ↓ o enviar al fondo ⤓ lo seleccionado. El orden define que forma queda encima.

6. Agrupar y desagrupar

Con varias formas seleccionadas: Agrupar Agrupar (o Ctrl+G) las une en un grupo que se mueve y transforma como uno solo.
Desagrupar Desagrupar (o Ctrl+Shift+G) deshace el grupo.
Si seleccionas un trazado compuesto (un solo path con varias partes, como una manzana con su hoja) y pulsas Desagrupar, se separa en trazados independientes; asi puedes dar color distinto a cada parte.

7. Editar nodos y curvas bezier

Doble clic en una forma (o tecla N) para entrar al modo nodo.
Arrastra las anclas; manten Shift para bloquear el eje.
Convertir a curva (o doble clic en un nodo) para que gane asas bezier; arrastra los puntos rosas.
Asas simetricas o libres (Alt mientras arrastras rompe la simetria).
Clic en el punto medio de un segmento para añadir un nodo; Supr para borrar.
Shift+clic en nodos para seleccionar y mover varios juntos.
Arrastrar un recuadro en area vacia (en modo nodo) selecciona todos los nodos contenidos.

8. Codigo SVG en vivo

El panel inferior muestra el codigo SVG y es editable: lo que escribas se refleja en el lienzo. El boton Optimizar Optimizar limpia el codigo (colores a hexadecimal, redondea numeros, quita metadatos) sin romperlo.

9. Fondo del lienzo y tema

El boton de fondo ◷ Fondo (en el header) alterna el damero del lienzo entre claro y oscuro, util para ver bien bordes negros o blancos.

El boton de tema ☀ Tema cambia toda la interfaz del editor entre modo oscuro y claro. Ambos ajustes se recuerdan para tu proxima visita.

10. Deshacer / Rehacer

↶ Ctrl+Z deshace, ↷ Ctrl+Shift+Z rehace. Cada accion queda en el historial.

11. Exportar

Pulsa Exportar Exportar. En el dialogo defines el nombre del archivo (por defecto el del icono del catalogo o del archivo que subiste, o "untitle" si es un lienzo nuevo) y eliges SVG (vectorial) o PNG (imagen en alta resolucion, 2x). Si intentas salir con cambios sin exportar, el editor te avisa y te ofrece descargar primero.

Atajos de teclado

V seleccionar · R rectangulo · E elipse · L linea · P pluma · D lapiz · N nodos
Supr / Backspace eliminar · Esc cancelar/salir
Ctrl+Z deshacer · Ctrl+Shift+Z rehacer
Ctrl+G agrupar · Ctrl+Shift+G desagrupar / separar trazados · Ctrl+D duplicar
Shift bloquear eje al mover nodo / cuadrado-circulo-linea recta al dibujar · Shift+clic o recuadro: seleccion multiple · Alt romper simetria de asas

Abrir el editor Ver iconos