SVG-Viewer – Tool zum Anzeigen, Bearbeiten und Optimieren von SVG-Dateien

Analyse einer SVG-Bilddatei

• Eine SVG-Bilddatei mit 400 px Breite und 400 px Höhe
• Grundstruktur:
  • Ganz außen befindet sich ein Rechteck mit width="124" und height="124"
  • Abgerundete Ecken durch das Attribut rx="24"
  • Mit fill="#F97316" als orangefarbener Hintergrund gefüllt
• Wichtige Formen:
  • Mit dem Tag <path> wird eine weiße polygonartige Form gezeichnet
    • Das Attribut d enthält die Pfad-Koordinateninformationen
    • Mit fill="white" weiß gefüllt
  • Mit dem Tag <circle> wird ein schwarzer Kreis gezeichnet
    • Position und Größe sind mit cx="63.2109" cy="37.5391" r="18.1641" festgelegt
    • Mit fill="black" schwarz gefüllt
  • Mit dem Tag <rect> wird ein halbtransparentes Rechteck um 45 Grad gedreht gezeichnet
    • Transparenz mit opacity="0.4" eingestellt
    • Mit fill="#FDBA74" in hellem Orange gefüllt
    • Rotations-Transformation mit transform="rotate(-45 81.1328 80.7198)"
• Optimierung der Dateigröße:
  • Von ursprünglich 578 Bytes auf 493 Bytes reduziert, also um 15 %

Meinung von GN⁺

• SVG ist ein Vektorgrafikformat und hat den Vorteil, dass es auch beim Vergrößern oder Verkleinern scharf bleibt. Im Gegensatz dazu kann bei komplexeren Motiven die Dateigröße größer werden als bei Bitmap-Bildern wie JPEG oder PNG.
• Die kleine Dateigröße dürfte zu schnellen Ladezeiten im Web führen. Bei komplexen Grafiken kann jedoch PNG sogar vorteilhafter sein.
• Beeindruckend ist, wie mit verschiedenen Funktionen wie rx, circle und rotate trotz der Schlichtheit ein räumlicher Eindruck erzeugt wird.
• Die Verwendung von Weiß und Schwarz auf orangefarbenem Hintergrund sorgt für starken Farbkontrast und gute Lesbarkeit.
• Es wirkt, als sei die Grafik für Einsatzzwecke wie Icons oder Logos erstellt worden. Die Bedeutung oder der Zweck der hellorangefarbenen Form macht neugierig.

[GN⁺]

Hacker-News-Kommentar

• SVGOMG, ein SVG-Optimierungstool, wurde als ein weiteres nützliches webbasiertes SVG-Tool vorgestellt
• Ein kleines Unternehmen aus Vancouver namens Checker Software entwickelt dieses Tool sowie mehrere weitere Software-Tools
• Die UI ist leicht verständlich und bietet klares Feedback zu Änderungen, was hilfreich sein dürfte, um kleine Probleme bei der Nutzung von SVG zu beheben
  • Zum Beispiel das Problem, dass sich ein SVG beim Laden kurz über die beabsichtigte Größe hinaus aufbläht und dann wieder zusammenzieht
• Es gibt einen unterhaltsamen Bug (?), bei dem die Zoom-Funktion der Canvas ins Unendliche geht
• SVG ist ein sehr mächtiges Werkzeug; es gab zuletzt auch einen Fall, in dem ein Rendering-Problem mit transparenten Parallax-Bildern unter Safari und iOS bei Verwendung von filter: drop-shadow mithilfe von SVG-Filtern und feGaussianBlur gelöst wurde
• In einer Situation, in der mehr und bessere Tools für SVG gebraucht werden, wird das Erscheinen dieses Tools begrüßt
• Es gab auch die Meinung, dass dieser Editor generierte Inhalte nicht parsen konnte, wenn SVG aus Text erzeugt wurde, während der SVG-Viewer von CodeBeautify problemlos funktionierte
• Solche kleinen Tools passen, so die Einschätzung, sehr gut zum Geist von Hacker News (HN)