Editores SVG basados ​​en navegador

Una de las cosas más interesantes de SVG es que, a pesar de todas las cosas poderosas que puede hacer, sigue siendo un código legible. ¿Quieres dibujar un rectángulo? No es una serie extraña de caracteres galimatías, es:

rect x="50" y="20" /

A ese marcado lo llamarías lenguaje declarativo. Puedes dibujar cualquier forma de esa manera, así como declarar y usar elementos como degradados e incluso animaciones e interactividad. Además, no es un formato propietario. No necesitas permiso para usarlo. ¡Es una especificación abierta !

La idea de que SVG es solo marcado atrae a algunos desarrolladores.

Literalmente puedes aprender incluso la sintaxis SVG obtusa al mirar por primera vez path d="" /. ¡Son solo coordenadas! Con instrucciones que explican cómo pasar de coordenada en coordenada. ¿Quieres dibujar un signo más? Se puede reducir hasta :

path d="M2 1 h2 v1 h2 v1 h-1 v1 h-1 v-1 h-1 v-1 h2 z" /

¡O diviértete con los preprocesadores creando SVG a partir de bucles !

A cierto tipo de desarrollador le hace pensar… ¡Oye! ¡Podría crear una aplicación que ayude a crear y editar SVG! Sí, de hecho, podrías. JavaScript tiene todas las herramientas que necesitas. Está feliz de proporcionar información de coordenadas sobre dónde hace clic y todo eso, e incluso arrastrar y soltar es una cosa ahora. Combine ideas como esta y podrá imaginar una aplicación completa basada en navegador para crear y editar archivos SVG.

La belleza de Internet es que, debido a que definitivamente puedes crear una aplicación visual para crear y editar SVG, muchas personas lo han hecho .

Quizás como era de esperar, ¡incluso hay bastantes opciones! Así es, herramientas de edición basadas en SVG (vectores) basadas en navegador totalmente gratuitas.

Creo que muchos de nosotros consideramos que una herramienta como Adobe Illustrator es el rey del castillo para la edición de vectores. O tal vez sea su hermano de código abierto Inkscape . Si bien siguen siendo excelentes herramientas, si lo que necesita es la edición SVG, puede ganar algo de velocidad y ahorrar algo de dinero consultando estas opciones.

La mayoría de los siguientes requieren muy poca explicación. Las barras de herramientas le dan acceso a herramientas de dibujo y manipulación. Cambias colores y arrastras cosas y la mayor parte de lo que esperarías poder hacer. Por supuesto, algunas de las características varían. Si realmente quieres encontrar uno para hacer un gran trabajo, deberías experimentar con todos ellos.

Método de sorteo

edición SVG

pintura vectorial

Dibujo SVG

Editor Vecteezy

Vector

Janvas

SVG cuadrado

RollApp/Inkscape

Éste merece una pequeña explicación. Es posible que hayas oído hablar de Inkscape. La alternativa de código abierto desde hace mucho tiempo al software de Adobe, particularmente Adobe Illustrator. Normalmente, Inkscape no garantizaría un lugar en esta lista ya que no está basado en navegador. ¡Pero resulta que puede serlo!

RollApp es un servicio que le ayuda a iniciar Inkscape (y una variedad de otras aplicaciones) esencialmente como una ventana emergente del navegador.

Mencioné al principio que si realmente quieres hacer un gran trabajo en cualquiera de estos, deberías experimentar con ellos. Eso es cierto. Como la mayoría de estos son gratuitos, y admito que nunca he trabajado duro en ninguno de ellos, me resisto a decirte qué es lo mejor.

Sin embargo, puedo decirles en qué confío definitivamente: otra herramienta de diseño basada en navegador llamada Figma . Está en una categoría algo diferente, ya que es más para un trabajo de diseño completo que solo para la edición SVG, pero ciertamente es una aplicación con capacidad vectorial. Literalmente, dediqué un duro día de trabajo a Figma y funciona muy bien. ¿Otro a considerar? Invision Studio , una vez que esté abierto a todos.