¿Existen editores SVG basados ​​en texto?

Hay varios buenos editores de SVG, pero no pude encontrar uno en el que pueda editar el marcado y ver instantáneamente los cambios en la imagen.

Si un programa solo puede ver la imagen, pero no editarla, también sería suficiente, pero solo si vuelve a leer un archivo modificado desde el disco. Los programas de visualización de imágenes que encontré no hacen esto. En este caso, podría usar cualquier editor de texto para editar el marcado, y tan pronto como guarde, los cambios serían visibles sin necesidad de cerrar y volver a abrir la imagen.

Pensé que era el único que buscaba esto. ¿Estás en Mac o Windows (o Linux?)

Respuestas (7)

Inkscape es un programa de edición de vectores de código abierto construido específicamente alrededor de SVG. Incluye un editor XML que le permite ver y editar el código SVG en vivo de su imagen.

Abra el Editor XML yendo a Editar → Editor XML... .

ingrese la descripción de la imagen aquí

Sin embargo, hay un problema con Inkscape, y perdón por olvidar mencionarlo en la pregunta: usa su propia estructura cuando guardo la imagen. Esto significa que no me deja editar el código libremente, y si abro un archivo hecho a mano, lo cambia a su propia estructura.
Sí, eso es un punto justo. Creo que es probable que tenga ese problema en la mayoría de los editores visuales, por lo que su mejor opción probablemente sea encontrar un visor que actualice automáticamente su vista y funcione en un editor de texto.
También puede hacer esto con Illustrator, con un retraso mínimo, simplemente coloque el svg y edite las opciones para actualizar cuando cambie el archivo...

Cualquier editor de texto sin formato puede editar un archivo svg.

Es simplemente texto XML.

Al igual que cualquier editor de texto sin formato, puede editar HTML.

Arrastre el archivo .svg a una ventana del navegador... abra el archivo .svg en una edición de texto. Realice cambios en el archivo de texto y guarde... actualice la ventana del navegador... BAM.

Diablos... usa NotePad si estás en un sistema 'Doze... o TextWrangler en una Mac... Yo uso BBEdit.

editar marcado -> ver instantáneamente los cambios en la imagen . Pero sí, también puedes hacerlo con un navegador.

Inkscape tiene una opción de "revertir", cuyo objetivo es permitir descartar los cambios sin cerrar el archivo (Archivo > Revertir). Uno puede abrir el archivo en Inkscape, editarlo en el editor de texto y luego "volver" al archivo editado externamente. No es instantáneo, pero a mí me funciona. Guardar inadvertidamente usando Inkscape destruirá su archivo hecho a mano, pero eso se puede evitar bloqueando todas las capas agregando el atributo sodipodi:insensitive="true".

La mejor opción que encontré es el editor de texto Atom con el paquete de vista previa SVG... Funciona muy bien para mí con un buen editor de texto y vista previa instantánea... aquí está el enlace:

https://atom.io/packages/svg-preview

Simplemente use jsfiddle.net, coloque los datos SVG (que comienzan con <svg [insert SVG code]>y terminan con </svg>) en la sección "HTML", ejecútelos y los procesará. Realice los cambios, luego vuelva a ejecutarlo para ver los cambios.

Por supuesto, esto no tiene autocompletado de sintaxis SVG tramposa, pero formateará los datos SVG con colores (también seleccione "Ordenado") para que sea más fácil de leer y navegar.

Aunque Inkscape es el editor SVG más aceptado, no me gusta el hecho de que cambia la estructura de mi SVG.

Creo que la mejor herramienta que encontré es SVG-Edit de Google Archive .

Esto también es de código abierto , por lo que puede sugerir cambios, características o integrarlo con su propia aplicación con desarrollo.

Captura de pantalla de la IU de edición de SVG

Cuidado, esta respuesta es engañosamente simple,

Adobe Dreamweaver con su vista en vivo editará el XML en tiempo real.

Tada.

No recomiendo piratear de ninguna forma, ya que pago por la suite, pero de todos modos es bastante fácil obtenerla gratis.

EDITAR,

puede usar notepad ++ para editar y abrir el svg en su navegador web. al terminar una edición, guarde el archivo y actualice la página en su navegador