SVG Viewer: herramienta para ver, editar y optimizar archivos SVG

• SVG Viewer es una herramienta web que permite subir SVG y manejar la vista previa y la edición de código en una sola pantalla
• Permite realizar directamente en el navegador tareas básicas de edición como rotar, voltear horizontal o verticalmente, cambiar tamaño y ordenar el código
• El ejemplo de optimización muestra un resultado en el que el tamaño del SVG se reduce de 578 bytes a 493 bytes, una disminución de -15%
• Además de descargar SVG, también ofrece rutas de conversión a React, React Native, PNG y Data URI
• La lista de íconos y las acciones de subir, copiar, descargar y compartir están en la misma pantalla, lo que permite pasar rápidamente de revisar un SVG a reutilizarlo

---

Edición y optimización de SVG

• SVG Viewer es una herramienta web para ver, editar y optimizar archivos SVG
• La pantalla de edición muestra el código SVG junto con la vista previa, para que puedas ver de inmediato el resultado de los cambios en el código

• Operaciones disponibles

  • Rotate
  • Flip Y
  • Flip X
  • Change dimensions
  • Optimize
  • Prettify
  • Clear
  • El SVG de ejemplo se muestra con un tamaño de 400px x 400px, y el código <svg> aparece en el área de edición de código
  • El estado de optimización se muestra como 578 bytes → 493 bytes, -15%

Importación y exportación

• Para trabajar con archivos, ofrece acciones de Upload, Copy, Download y Share
• Destinos de exportación o conversión:
  • Preview
  • React
  • React Native
  • PNG
  • Data URI
• En la pantalla se muestran varios elementos de íconos SVG, como eye-close, gps, minus, lock-line, email, battery, document, comment, home, search y wifi, además de Load More SVGs
• También se ofrecen enlaces a comentarios, términos de uso y política de privacidad

[GN⁺]

Opiniones en Hacker News

• Una herramienta web de SVG que uso con frecuencia es https://jakearchibald.github.io/svgomg/. Es una herramienta de optimización de SVG que permite ajustar la configuración con muchísimo detalle.

  • Termino usando mucho https://yqnn.github.io/svg-path-editor/. Ojalá Inkscape fuera igual de intuitivo para trabajar dentro de un path; tareas como la conversión entre valores absolutos y relativos son especialmente cómodas.
  • Para sumar otra herramienta SVG que me gusta, está https://svgcrop.com/, una herramienta para recortar SVG. Cuando hay márgenes amplios alrededor del SVG o elementos raros que dificultan centrarlo, lo recorta tomando como referencia los elementos visibles.
  • Esta herramienta también es buena: https://www.softr.io/tools/svg-shape-generator
  • Uso esta herramienta cuando preparo colecciones de símbolos SVG: https://daveknispel.github.io/svg2use/
  • SVGOMG también está disponible aquí: https://svgomg.net/

• No esperaba que esto se volviera tema en Hacker News durante el fin de semana. Somos una empresa pequeña de Vancouver, BC, y hacemos herramientas de software: https://www.checkersoftware.ca/
  Si tienen preguntas, avísenme.

  • Me da curiosidad si planean mantener esta webapp basada en publicidad, o si en un futuro cercano habrá una versión pro de pago con funciones adicionales.
  • La mayoría de los ejemplos tienen muchos path con largas cadenas de números, así que es difícil saber de inmediato qué path corresponde a qué figura en la imagen.
    Me pregunto si sería posible que, al pasar el cursor sobre el código en el editor, se cambie temporalmente el color o el contorno de ese trazado, y que funcione de forma similar con la selección de texto.
  • No soy desarrollador React, así que pregunto desde el desconocimiento: me intriga para qué sirve la función de exportar SVG a React.
    ¿Hay alguna razón por la que un desarrollador React use la exportación a React en lugar de insertar el SVG inline?
  • Siempre uso esta herramienta cuando trabajo con íconos.

• La estuve probando un poco y parece muy útil para cuando algún día quiera resolver pequeños problemas que encuentro en los SVG que uso. La UI es fácil de entender y el feedback sobre los cambios es claro, así que la agregué de inmediato a favoritos.
  Algunos SVG tenían el problema de que, mientras cargaban, ensanchaban momentáneamente la página y, un instante después, se acomodaban al tamaño previsto. Probé tocar viewBox, width y height, pero no pude resolverlo. ¿Qué habría que hacer para reducir ese estiramiento inicial?

  • El destello del SVG antes de que se apliquen los estilos se puede arreglar especificando explícitamente el viewBox (viewBox) y el viewport (width, height): https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
  • Me pregunto si se puede convertir al vuelo un SVG a otro formato más rápido que el navegador. Desde el punto de vista de alguien no experto, suena a inicializar un bitmap al tamaño máximo y luego parsear el SVG dentro de él.

• Es una herramienta realmente buena. Reúne muchas funciones en un solo lugar. Normalmente uso phpStorm; no tiene optimización al estilo SVGOMG, pero sí ordena bien el código.
  Me gustaría que hubiera mejores ejemplos para empezar a editar, y que usaran no solo path, sino también otras formas básicas. Una grilla también sería útil.
  Por ejemplo, un ícono de búsqueda se puede hacer con un circle y un line con un viewBox bien definido. Si pones el origen en el centro del círculo, no necesitas valores x ni y, solo el radio, y así se puede lograr una optimización absurdamente grande.
  Un ícono de búsqueda típico queda aplastado en un path con cientos de números de la NASA de seis decimales. En realidad basta con un solo círculo definido con enteros; no necesitas la basura que exporta Adobe Illustrator.
  SVG es un medio artístico y me encanta. Pero ni los artistas ni los desarrolladores parecen verlo así. Por eso la mayoría de los SVG no capturan bien el espíritu de lo que es posible, ni muestran que son más que un simple formato de archivo.

• SVG es realmente poderoso. La semana pasada tuve un problema en el que una imagen transparente con paralaje y un filtro drop-shadow se veía horrible en Safari en Mac e iOS; la solución fue convertir el contorno de la imagen en SVG y aplicar la sombra con un filtro SVG que usaba feGaussianBlur.
  Siento que todavía apenas estoy arañando la superficie de lo que se puede hacer con SVG. Para optimización venía usando svgomg, pero esta herramienta parece tener bastantes funciones útiles más.

  • Empecé con un frontend de escritorio en Qt/QML y terminé preguntándome cuánto se podría construir solo con una configuración tipo mapa de imagen SVG.
    Abrir Jupyter junto con conexiones de datos y herramientas SVG fue una experiencia bastante reveladora.
  • Aunque no sea realista ni políticamente posible, me encantaría que DWG, DXF y DGN fueran reemplazados por SVG. No tiene sentido que los planos 2D de la industria AEC no se puedan usar bien en la mayoría de los programas.

• Uso Inkscape y, cuando le falta algo, uso Xara Xtreme o la antigua versión gratuita para Linux.
  Pero ¿qué significa optimizar un SVG?

  • Significa eliminar información innecesaria. Inkscape agrega muchas cosas. Por ejemplo, si exportas un SVG simple desde Figma, lo abres y lo guardas en Inkscape, y luego comparas, se nota la diferencia.

• Me encanta este sitio y lo he usado incontables veces. Es muy útil para entender elementos SVG raros y ver el resultado rápidamente.

• Hace unos años compré BoxySVG para Mac por 10 dólares, y era una herramienta pequeña y confiable.
  https://boxy-svg.com/

  • Parece que ahora pasó a un modelo de suscripción. Como solo lo necesito unas pocas veces al año, si costara 10 dólares me gustaría comprarlo y conservarlo. Monodraw lo compré así una vez y lo tengo guardado; lo uso de vez en cuando y sigue siendo una herramienta satisfactoria.
  • Boxy es recomendable como editor ligero de SVG rápido para hacer retoques simples.

• Es mi recurso y herramienta favorita cuando trabajo con SVG. Busqué mucho, pero no encontré nada mejor.