Ich habe derzeit eine Bibliothek mit 512wx512hx72dpi PNG-Dateien, die für Symbole in Web- und mobilen Apps verwendet werden. Ich möchte sie in SVG konvertieren und sie dann für das Menü der mobilen App auf die endgültige Größe (80 x 80) skalieren. Ja, ich möchte, dass ein Tool nach Möglichkeit im Stapelbetrieb funktioniert. Das Problem, das ich sehe, ist, dass ich jede SVG-Datei, die ich mit Photoshop-Export oder Inkscape konvertiert habe, die resultierende SVG-Datei angemessen skalieren kann, aber die "Zeichnung" oder der Arbeitsbereich behält die ursprüngliche Größe. Wenn ich das SVG in einem Browser wie Chrome öffne, sehe ich einen großen 512 x 512-Arbeitsbereich und eine winzige 80 x 80-Grafik, die sich normalerweise in der unteren linken Ecke des Zeichenbereichs im Browser befindet. Dies macht es unmöglich, es zu verwenden, es sei denn, ich kann die Zeichnung loswerden oder sie zumindest auf die gleiche Größe wie die skalierten Grafiken bringen.
Öffnen Sie das SVG-Dokument in einem Webdokument-Editor (einem UTF-8-Texteditor, der Dateien mit Unix-Zeilenenden speichert).
Sie sehen ein SVG- Tag mit den Attributen width, height und viewBox:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="960" height="540" viewBox="0, 0, 960, 540">
… das sind die Attribute, die Sie ändern möchten, um zu ändern, wie Ihr SVG-Dokument in einem Browser angezeigt wird. Sie finden viele Dokumentationen zu diesen Attributen und wie sie die Anzeige einer SVG beeinflussen.
Sie können diese Attribute stapelweise ändern, indem Sie Ihre SVG-Dokumente in mehreren Dateien suchen und ersetzen, so wie Sie in fast jedem Webdokument-Editor mehrere HTML-Dokumente suchen und ersetzen würden.
Wenn Sie Ihre Bitmap-Bilder in Inkscape nachzeichnen, kann es sein, dass das Trace-Tool in Inkscape im Batch-Modus von Bash aus arbeitet. Wenn nicht, können Sie möglicherweise eine eigenständige Version dieses Tracing-Tools oder eines anderen Tracing-Tools erhalten, das dies tut.
Es ist jedoch zu bedenken, nach nativen SVG-Ersetzungen für diese Symbole zu suchen. Es gibt viele kostenlose und preisgünstige Stock-SVG-Icons für Webseiten. Die Qualität ihrer SVG-Formatierung ist wahrscheinlich besser als Ihre nachverfolgte Ausgabe. Wenn Sie ein nativ gezeichnetes SVG nehmen und in PNG konvertieren und dieses PNG dann in SVG zurückverfolgen und diese beiden SVG-Dateien vergleichen, ist das nativ gezeichnete SVG möglicherweise 1/10 der Größe. Das bedeutet nicht nur 1/10 der Downloadgeschwindigkeit, sondern auch 1/10 der Rendergeschwindigkeit. Bei Symbolen, die Sie möglicherweise auf jeder Seite verwenden, kann dies ein erheblicher Unterschied sein.
Hast du einen Illustrator? Nach dem Platzieren auf Größe als SVG exportieren. Erstellen Sie das Dokument mit 72 dpi und machen Sie Ihre Boxen 80 x 80. Stellen Sie beim Exportieren sicher, dass Sie den Link verwenden, wenn Sie sowohl das Original-PNG in den Bildordner auf der Website hochladen möchten, als auch, wenn Sie dies nicht vorhaben, klicken Sie nicht auf den Link, und Sie haben weniger Dateien, aber die Ergebnisse für Retina-Bildschirme variieren. Etwas zum Nachdenken.
Lassen Sie mich weitere Informationen und vielleicht Screenshots wissen.
Wrzlprmft