Una de las mejores cosas 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 extraña cadena de caracteres galimatizados, es:
<rect x="50" y="20" width="300" height="100" />Llamarías a ese marcado, un lenguaje declarativo. Puede 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 un marcado hace cosquillas a algunos desarrolladores.
Literalmente, puede aprender incluso el SVG de apariencia obtusa al principio <path d="" /> sintaxis. ¡Son solo coordenadas! Con instrucciones que explican cómo pasar de una coordenada a otra. ¿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értase con los preprocesadores que crean SVG a partir de bucles!
Le hace pensar a cierto tipo de desarrollador … ¡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 necesita. Es feliz de toser información coordinada 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 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 (vector) basadas en navegador totalmente gratuitas.
Creo que muchos de nosotros consideramos una herramienta como Adobe Illustrator como el rey del castillo para la edición de vectores. O tal vez sea el hermano de código abierto Inkscape. Si bien esas siguen siendo excelentes herramientas, si lo que necesita es la edición de SVG, puede ganar algo de velocidad y ahorrar algo de dinero al revisar estas opciones.
La mayor parte de lo siguiente requiere muy poca explicación. Las barras de herramientas le dan acceso a herramientas de dibujo y manipulación. Cambia los colores y arrastra las cosas y la mayor parte de lo que esperaría poder hacer. Por supuesto, algunas de las funciones varían. Si realmente quieres encontrar uno para hacer un gran trabajo, deberías experimentar con todos ellos.
Método Dibujar
SVG-editar
Pintura vectorial
Dibujo SVG
Editor de Vecteezy
Vectr
Janvas
SVG cuadrado
RollApp / Inkscape
Éste merece una pequeña explicación. Es posible que haya oído hablar de Inkscape. La alternativa de código abierto desde hace mucho tiempo al software de Adobe, en particular Adobe Illustrator. Normalmente, Inkscape no garantizaría un lugar en esta lista, ya que no está basado en un navegador. ¡Pero resulta que puede ser!
RollApp es un servicio que le ayuda a iniciar Inkscape (y una variedad de otras aplicaciones) como esencialmente una ventana emergente del navegador.
Mencioné en la parte superior 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 es cierto que nunca he hecho un duro día de trabajo en ninguno de ellos, me resisto a decirte qué es lo mejor.
Sin embargo, puedo decirles en lo que definitivamente confío, otra herramienta de diseño basada en navegador llamada Figma. Se encuentra en una categoría algo diferente, ya que es más para un trabajo de diseño completo que solo para la edición de SVG, pero ciertamente es una aplicación con capacidad para vectores. Literalmente, realicé un arduo día de trabajo en Figma y funciona muy bien. ¿Otro a considerar? Invision Studio, una vez que esté abierto a todos.