Visor de SVG - herramienta para ver, editar y optimizar archivos SVG

Análisis de un archivo de imagen SVG

• Archivo de imagen SVG de 400 px de ancho por 400 px de alto
• Estructura básica:
  • En la parte más externa hay un rectángulo con width="124" y height="124"
  • Esquinas redondeadas mediante el atributo rx="24"
  • Rellenado con un fondo naranja mediante el atributo fill="#F97316"
• Formas principales:
  • Se dibuja una forma poligonal blanca con la etiqueta <path>
    • El atributo d contiene la información de coordenadas del trazado
    • Se rellena de blanco con fill="white"
  • Se dibuja un círculo negro con la etiqueta <circle>
    • La posición y el tamaño se definen con cx="63.2109" cy="37.5391" r="18.1641"
    • Se rellena de negro con fill="black"
  • Se dibuja un rectángulo semitransparente rotado 45 grados con la etiqueta <rect>
    • La transparencia se configura con opacity="0.4"
    • Se rellena con naranja claro usando fill="#FDBA74"
    • La transformación de rotación se aplica con transform="rotate(-45 81.1328 80.7198)"
• Optimización del tamaño del archivo:
  • Reducción del 15%, de 578 bytes originales a 493 bytes

Opinión de GN⁺

• SVG es un formato de gráficos vectoriales, así que tiene la ventaja de mantenerse nítido sin degradarse al ampliar o reducir. En cambio, frente a imágenes de mapa de bits como JPEG o PNG, si la complejidad aumenta también puede crecer el tamaño del archivo.
• El tamaño del archivo parece pequeño, por lo que la carga en la web podría ser rápida. Sin embargo, si el dibujo es complejo, PNG podría resultar más conveniente.
• Impresiona cómo se aprovechan funciones como rx, circle y rotate para expresar sensación de volumen dentro de la simplicidad.
• El uso de blanco y negro sobre un fondo naranja genera contraste de color y mejora la legibilidad.
• Parece hecho para usos como íconos o logotipos. Da curiosidad el significado o la función de la forma naranja clara.

[GN⁺]

Comentarios de Hacker News

• SVGOMG, una herramienta de optimización de SVG, fue presentada como otra útil herramienta web para SVG
• Una pequeña empresa de Vancouver llamada Checker Software desarrolla esta herramienta junto con varias otras herramientas de software
• La interfaz es fácil de entender y ofrece retroalimentación clara sobre los cambios, por lo que parece útil para resolver pequeños problemas que surgen al usar SVG
  • Por ejemplo, problemas como cuando al cargar un SVG se estira momentáneamente más de lo esperado y luego vuelve a encogerse
• Tiene un bug (?) curioso en el que la función de zoom del lienzo puede ir hasta el infinito
• SVG es una herramienta muy potente; recientemente también hubo un caso en el que un problema de renderizado de imágenes transparentes con parallax usando filter: drop-shadow en Safari e iOS se resolvió aprovechando filtros SVG y feGaussianBlur
• En una situación donde hacen falta más y mejores herramientas para SVG, el ambiente general es de bienvenida ante la llegada de esta herramienta
• También hubo una opinión de que, al generar SVG a partir de texto, este editor no pudo parsear el contenido generado, pero el visor SVG de CodeBeautify sí funcionó bien
• Se valora que estas pequeñas herramientas encajan muy bien con el espíritu de Hacker News (HN)