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

 (svgviewer.dev)
4 Punkte von GN⁺ 2024-04-28 | 1 Kommentare | Auf WhatsApp teilen
  • SVG Viewer ist ein Web-Tool, mit dem sich nach dem Hochladen einer SVG Vorschau und Code-Bearbeitung auf einem Bildschirm erledigen lassen
  • Grundlegende Bearbeitungsschritte wie Drehen, horizontales/vertikales Spiegeln, Größenänderung und Code-Bereinigung können direkt im Browser ausgeführt werden
  • Das Optimierungsbeispiel zeigt ein Ergebnis, bei dem die SVG-Größe von 578 Bytes auf 493 Bytes reduziert wird, also um -15 %
  • Neben dem SVG-Download werden auch Konvertierungswege für React, React Native, PNG und Data URI angeboten
  • Eine Icon-Liste sowie die Aktionen Hochladen, Kopieren, Herunterladen und Teilen befinden sich auf demselben Bildschirm, sodass sich der Ablauf von der SVG-Prüfung bis zur Wiederverwendung schnell fortsetzen lässt

SVG-Bearbeitung und -Optimierung

  • SVG Viewer ist ein Web-Tool zum Anzeigen, Bearbeiten und Optimieren von SVG-Dateien
  • Der Bearbeitungsbildschirm zeigt SVG-Code und Vorschau gemeinsam an, sodass sich die Ergebnisse von Code-Änderungen sofort überprüfen lassen

  • Verfügbare Funktionen

    • Rotate
    • Flip Y
    • Flip X
    • Change dimensions
    • Optimize
    • Prettify
    • Clear
    • Die Beispiel-SVG wird in der Größe 400px x 400px angezeigt, und im Code-Editor ist der <svg>-Code sichtbar
    • Der Optimierungsstatus wird als 578 bytes → 493 bytes, -15% angezeigt

Import und Export

  • Für die Dateiverarbeitung stehen die Aktionen Upload, Copy, Download und Share zur Verfügung
  • Export- bzw. Konvertierungsziele:
  • Auf dem Bildschirm werden verschiedene SVG-Icon-Einträge wie eye-close, gps, minus, lock-line, email, battery, document, comment, home, search und wifi sowie Load More SVGs angezeigt
  • Außerdem werden Links zu Feedback, Nutzungsbedingungen und Datenschutzrichtlinie bereitgestellt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-04-28
Meinungen auf Hacker News

  • Ein webbasiertes SVG-Tool, das ich häufig nutze, ist https://jakearchibald.github.io/svgomg/. Es ist ein SVG-Optimierungstool, bei dem man die Einstellungen sehr fein anpassen kann

  • Ich hätte nicht gedacht, dass das am Wochenende auf Hacker News so viel Aufmerksamkeit bekommt. Wir sind ein kleines Unternehmen aus Vancouver, BC, und entwickeln Software-Tools: https://www.checkersoftware.ca/
    Wenn ihr Fragen habt, lasst es mich wissen

    • Ich frage mich, ob ihr diese Web-App weiterhin werbefinanziert betreiben wollt oder ob in naher Zukunft eine kostenpflichtige Pro-Version mit zusätzlichen Funktionen geplant ist
    • In den meisten Beispielen gibt es viele path-Elemente mit langen Zahlenfolgen, sodass man nicht sofort erkennt, welcher path welcher Form im Bild entspricht.
      Ich frage mich, ob man es so machen könnte, dass beim Darüberfahren mit dem Cursor über den Code im Editor die Farbe oder Kontur des entsprechenden Pfads vorübergehend geändert wird, und dass es bei Textauswahl ähnlich funktioniert
    • Ich frage als jemand, der kein React-Entwickler ist und sich damit nicht gut auskennt: Wozu dient die Funktion, SVG nach React zu exportieren?
      Warum sollte ein React-Entwickler die React-Exportfunktion nutzen, statt das SVG inline einzubinden?
    • Ich benutze dieses Tool immer, wenn ich an Icons arbeite

  • Ich habe ein wenig damit herumgespielt, und es wirkt sehr nützlich für den Fall, dass ich irgendwann die kleinen Probleme beheben möchte, die mir bei meinen SVGs begegnen. Die UI ist leicht verständlich und das Feedback zu Änderungen klar, deshalb habe ich es sofort als Lesezeichen gespeichert.
    Bei manchen SVGs hatte ich das Problem, dass sie die Seite beim Laden für einen Moment sehr breit aufziehen und sich kurz danach auf die gewünschte Größe einpendeln. Ich habe mit viewBox, width und height experimentiert, konnte es aber nicht lösen. Wie kann man dieses anfängliche Aufblähen reduzieren?

    • Das Aufblitzen eines SVG, bevor Styles angewendet werden, lässt sich beheben, indem man eine explizite ViewBox (viewBox) und einen Viewport (width, height) angibt: https://www.sarasoueidan.com/blog/svg-style-inheritance-and-...
    • Ich frage mich, ob man SVGs schneller als der Browser on the fly in andere Formate umwandeln kann. Aus Laiensicht klingt das wie ein Verhalten, bei dem ein Bitmap mit maximaler Größe initialisiert und das SVG dann darin geparst wird

  • Ein wirklich gutes Tool. Es bündelt viele Funktionen an einem Ort. Normalerweise nutze ich phpStorm; es hat zwar keine Optimierung im Stil von SVGOMG, räumt Code aber gut auf.
    Es wäre schön, wenn es bessere Beispiele zum Loslegen gäbe und wenn nicht nur path, sondern auch andere Grundformen verwendet würden. Ein Raster wäre ebenfalls nützlich.
    Ein Such-Icon lässt sich zum Beispiel mit einem circle und einer line mit sauber gesetzter viewBox bauen. Wenn der Ursprung im Mittelpunkt des Kreises liegt, braucht man keine x- und y-Werte, sondern nur den Radius, und auf diese Weise sind absurd starke Optimierungen möglich.
    Ein typisches Such-Icon ist zu einem path mit Hunderten von NASA-Zahlen mit sechs Nachkommastellen zerquetscht. Tatsächlich reicht ein einzelner, mit Ganzzahlen definierter Kreis; man braucht keinen von Adobe Illustrator exportierten Kram.
    SVG ist ein künstlerisches Medium, und ich mag es wirklich sehr. Aber weder Künstler noch Entwickler scheinen es so zu sehen. Deshalb schöpfen die meisten SVGs den Geist dessen, was möglich ist, nicht wirklich aus, und es wird kaum sichtbar, dass es mehr ist als nur ein Dateiformat

  • SVG ist wirklich mächtig. Letzte Woche hatte ich ein Problem, bei dem ein transparentes Parallax-Bild mit dem Filter drop-shadow in Mac Safari und iOS völlig kaputt aussah; die Lösung war, die Bildkontur als SVG zu erstellen und den Schatten mit einem SVG-Filter mit feGaussianBlur zu erzeugen.
    Ich habe das Gefühl, dass wir bei dem, was mit SVG möglich ist, bislang nur an der Oberfläche kratzen. Für die Optimierung habe ich bisher svgomg genutzt, aber dieses Tool scheint noch einige weitere nützliche Funktionen zu haben

    • Ich bin mit einem Qt/QML-Desktop-Frontend gestartet und habe mich dann gefragt, wie viel sich allein mit Konstruktionen wie einer SVG-Imagemap umsetzen ließe.
      Jupyter zusammen mit Datenanbindung und SVG-Tools zu öffnen, war eine ziemlich aufschlussreiche Erfahrung
    • Realistisch und politisch wird das wohl nicht möglich sein, aber es wäre wirklich schön, wenn DWG, DXF, DGN durch SVG ersetzt würden. Es ergibt keinen Sinn, dass 2D-Zeichnungen in der AEC-Branche in den meisten Programmen nicht richtig nutzbar sind

  • Ich nutze Inkscape, und wenn mir etwas fehlt, nehme ich Xara Xtreme oder die alte kostenlose Version für Linux.
    Aber was bedeutet es, SVG zu optimieren?

    • Es bedeutet, unnötige Informationen zu entfernen. Inkscape fügt eine Menge Zeug hinzu. Wenn man zum Beispiel ein einfaches SVG aus Figma exportiert, es in Inkscape öffnet, speichert und danach vergleicht, sieht man den Unterschied

  • Ich liebe diese Website wirklich und habe sie unzählige Male benutzt. Sie ist sehr nützlich, um seltsame SVG-Elemente zu verstehen und das Ergebnis schnell zu überprüfen

  • Vor ein paar Jahren habe ich BoxySVG für 10 Dollar auf dem Mac gekauft; es war ein kleines, zuverlässiges Tool.
    https://boxy-svg.com/

    • Es scheint jetzt auf ein Abo-Modell umgestiegen zu sein. Da ich es nur ein paar Mal im Jahr brauche, hätte ich es für 10 Dollar gern gekauft und behalten. Monodraw habe ich genau so einmal gekauft und behalten; ich nutze es nur gelegentlich, bin aber immer noch zufrieden damit
    • Boxy kann man als schnellen, unkomplizierten leichten SVG-Editor empfehlen

  • Das ist meine liebste Ressource und mein liebstes Tool, wenn ich mit SVG arbeite. Ich habe viel gesucht, aber nichts Besseres gefunden