Acerca de

SVG Sketcher convierte ilustraciones vectoriales limpias en algo que parece dibujado a mano. Está pensado para desarrolladores y diseñadores que quieren un icono bocetado, un diagrama con estilo tosco o un logo animado dibujado a mano sin abrir una aplicación de ilustración ni retocar datos de trazado - y para editores de vídeo que necesitan un elemento dibujado a mano para superponer sobre metraje.

Funciona por completo en tu navegador

No hay backend. Tu SVG se analiza, se boceta y se exporta con JavaScript en tu propia máquina - nada se sube, almacena ni registra. Puedes comprobarlo abriendo la pestaña de red de tu navegador: después de cargar la página, convertir un archivo no hace ninguna petición.

Qué admite

• path, rect (redondeados incluidos), circle, ellipse, line, polygon y polyline
• Grupos <g> anidados, con la transformación acumulada de cada elemento aplicada
• Texto, convertido en contornos reales desde el archivo de fuente en vez de renderizado como texto - de un conjunto de fuentes libres incluidas, o de un TTF/OTF que subas (que se queda en tu navegador), con espaciado entre letras ajustable
• Un estilo de letra de línea simple, como alternativa a trazar el contorno - o el alfabeto de grabado Hershey (cada carácter dibujado de un solo trazo de pluma) o una sans-serif de grosor uniforme con su línea central extraída de las formas de letra
• Dibujo a mano alzada con ratón, dedo o lápiz, bocetado y animado como cualquier otra ilustración
• Exportación como SVG, componente de React, animación CSS, JSON de Lottie, GIF animado, o un vídeo con un fondo verde detrás

Limitaciones conocidas

Siendo claros sobre lo que no hará:

• El <text> vivo dentro de un SVG pegado se omite. Bocetarlo necesitaría el archivo de fuente exacto, que la página no tiene. Usa la pestaña Escribir texto, o convierte el texto en contornos en tu editor primero.
• Las fuentes propietarias no vienen incluidas. Arial, Helvetica Neue y similares no se pueden redistribuir, así que la pestaña Escribir texto trae fuentes libres (incluidos equivalentes compatibles como Arimo para Arial) y te deja subir el archivo real si lo tienes. Incluir todas las Google Fonts, o cargarlas en tiempo de ejecución, queda descartado - lo segundo mostraría tu IP a Google.
• El estilo de línea simple es delicado con las fuentes. Una fuente normal guarda cada letra como una forma rellena, no una línea central, así que el modo de línea simple o usa fuentes dibujadas como trazos de origen (el conjunto Hershey) o traza la línea central de una fuente de contorno. El trazado solo es fiable para sans-serif de grosor uniforme; las fuentes serif, display y de alto contraste se esqueletizan en un lío y no se ofrecen.
• Las referencias <use> se omiten. Aplánalas antes de pegar.
• Los rellenos no se bocetan. La herramienta dibuja contornos; todavía no rellena con tramas las zonas rellenas.
• Las ilustraciones muy complejas se vuelven lentas. El muestreo es proporcional a la longitud total de los trazados, así que un mapa detallado con miles de segmentos tardará un momento.
• La exportación de vídeo no tiene transparencia. Ningún códec de vídeo que un navegador pueda grabar lleva canal alfa, por eso el fondo es un color de croma plano para quitar en tu editor. También graba en tiempo real, así que un clip largo tarda lo que dura, y Safari podría no grabar nada.

Coste

La herramienta es gratis. Los anuncios cubren el alojamiento. No hay cuenta, ni plan de pago, ni límite de subida más allá de lo que tu propio navegador pueda manejar.

Volver a la herramienta