将SVG文件转换为多个不同大小的PNG文件

Question

我有一张 SVG 格式的标志图片，想知道是否有办法生成多个不同尺寸的 PNG 文件。

例如，我设置了 20 种不同的宽度和高度，它可以生成 20 个 PNG 文件。如果需要每次处理 5 张图片也是可以的。

我已经安装了 Illustrator，但不知道如何在其中实现此操作。

感谢您的帮助！

- Mo Beigi

---

提醒一下，确保你的 SVG 具有 viewBox 属性，这样它才能正确缩放。 - KyleMit

Answer 1

接受的答案很好。这里有一个官方选项帮助可用。 此外，基本的Shell命令在这里非常适用：

for x in 10 100 200 ; do inkscape --export-png logo${x}.png -w ${x} logo.svg ; done

在Windows命令行中，使用评论中@avalancha的这行命令。

for %x in (100 200 300) ; do inkscape --export-png logo%x.png -w %x logo.svg ; done

- zany

---

对于只需要转换一个文件的人，这里有一个更简单的复制粘贴方法：inkscape --export-png icon.png -w 128 logo.svg - k0pernikus

对于在Windows命令行上的用户，请使用以下命令：for %x in (100 200 300) ; do inkscape --export-png logo%x.png -w %x logo.svg ; done - avalancha

@avalancha 真是太好了，你的回答应该独立成为一个答案 - Alveoli

哦，谢谢，非常感谢 :) 但是这个想法的功劳应该归@zany所有，我认为不需要分成份额。 - avalancha

@avalancha 我同意这可能是Windows用户的另一个答案。你能告诉我如何使用完整路径到 inkscape.exe 吗？如果我只是用 "C:\....\inkscape.exe" 替换 inkscape，它不会起作用。谢谢！ - icl7126

Answer 2

我不清楚Illustrator，但是使用Inkscape命令行选项应该很容易。例如，可以使用Ruby：

$ ruby -e '[10,100,200].each { |x| `inkscape --export-png logo#{x}.png -w #{x} logo.svg` }'

- Luchs

---

是的，那样做可以，但我发现无法使用Illustrator完成这项任务，让我感到失望，所以我不得不手动处理。 - Mo Beigi

让我害怕了...使用命令行的Ruby来调用一个命令行程序3次...这种疯狂的行为有一个名称吗？ - Tony R

谢谢你，正是我所需要的。 - AlexAlexson

对我来说，--export-filename 比 --export-png 更适用。 - Kartik Watwani

Answer 3

以下是如何使其更快（对于我来说，在SSD上只需5次导出即可将速度提高3倍），只需启动一次Inkscape，并将图像导出到不同的目录（因为Android使用）：

#!/bin/sh
# Converts the Inkscape icon file ic_launcher_web.svg to the launcher web & app png files.

PROJECT="My Project Name"
INPUT="source-assets/ic_launcher_web.svg"
MAIN="${PROJECT}/src/main/"
RES="${MAIN}res/"
DRAWABLE="${RES}/drawable"

inkscape --shell <<COMMANDS
  --export-png "${MAIN}ic_launcher-web.png"         -w 512 "${INPUT}"
  --export-png "${DRAWABLE}-mdpi/ic_launcher.png"   -w  48 "${INPUT}"
  --export-png "${DRAWABLE}-hdpi/ic_launcher.png"   -w  72 "${INPUT}"
  --export-png "${DRAWABLE}-xhdpi/ic_launcher.png"  -w  96 "${INPUT}"
  --export-png "${DRAWABLE}-xxhdpi/ic_launcher.png" -w 144 "${INPUT}"
quit
COMMANDS

这是一个bash shell脚本。在Windows上你可以在MINGW32（例如GitHub的Git Shell）中运行它，或将其转换为Windows DOS shell脚本。（对于DOS脚本，您需要将“here document”命令更改为DOS可以处理的内容。有关技术，请参见heredoc for Windows batch？，例如将多行文本回显到临时文件中。）

- Jerry101

---

@salih 这个脚本是为了在类Unix的shell中运行而编写的，例如在Windows上的MINGW、Mac OSX shell或Linux shell中运行（它可以修改为在Windows DOS shell或PowerShell中运行）。将此文本保存为文本文件，比如说 export.sh。运行命令 chmod ug+x export.sh 将脚本标记为“可执行”。然后，每当您想要以多种尺寸导出SVG图像时，通过 ./export.sh 在当前目录下运行脚本，或者如果它在您的PATH中，则简单地运行 export.sh。 - Jerry101

https://github.com/richardaum/svg-to-android-drawable-png @Jerry101 谢谢你，伙计，所有的功劳都归于你。 - richardaum

这个能否让它处理文件夹中的每个SVG？ - hakarune

@hakarune 是的。这项技术取决于您的 shell，或者使用更干净的语言，比如 Python。在 bash 中，核心步骤是 for f in *.svg; do echo "--export-png $f.png $f.svg"; done 并将所有这些命令重定向到一个文件中，例如 (for ...; echo quit) > commands，然后将其输入到 inkscape 中，像这样 inkscape --shell < commands。 - Jerry101

Answer 4

看看 inkmake 吧。实际上，我设计这个工具是为了批量将SVG文件导出为不同尺寸的PNG等格式。因为我想在Inkscape中保存后，在终端中运行 inkmake，它就能自动导出所有相关的PNG文件。

- Mattias Wadman

Answer 5

如果您还没有安装，需要安装imagemagick。在OSX上，需要特别支持rsvg：

brew install imagemagick --with-librsvg

您还需要安装inkscape，否则您可能会发现您的图像全部变成黑色（除了透明区域）。

brew install homebrew/gui/inkscape

然后，您应该能够按以下方式进行转换：

convert -density 1536 -background none -resize 100x100 input.svg output-100.png

1536是一种解决方案，我找不到很好的答案。在我的实验中，省略-density参数会创建非常小的图像。将图像转换为-size 100x100并使用-density 1024得到的输出图像大小为96x96，因此我改为超过目标密度并缩小到目标大小。简而言之，请使用比您目标大小大1500倍的密度，然后从那里开始。有许多批量运行该命令的方法。以下是在shell中的一个示例：

for s in 10 100 200 ; do convert -density 1536 -background none -resize ${s}x${s} input.svg output-${s}.png ; done

- Ian

Answer 6

基于zany的回答，但更新以处理Inkscape 1.1，它需要-o选项用于输出文件名和--export-type而不是--export-png来声明您的导出类型。

for x in 10 100 200 ; do inkscape --export-type=png -o logo${x}.png -w ${x} logo.svg ; done

- mjmorris

Answer 7

我创建了一个工具来实现这个目的。你可以定义想要的输出尺寸和文件夹结构。所以只需要在存放svg文件的文件夹上运行它，然后png文件就会被添加到你的项目中正确的文件夹里，非常简单。

https://github.com/Inrego/SvgToPng

希望这对你有所帮助。

- Inrego

Answer 8

我使用以下命令为 Angular PWA 创建图标。

在 Windows 命令提示符中运行以下命令之前，首先“cd”到 inkscape 安装文件夹。

for %x in (72 96 128 144 152 192 384 512) ; do inkscape --export-filename=C:\temp\icons\icon-%xx%x.png -w %x -h %x "{filePath}\{fileName}.svg"

- Dinesh Mathivanan

Answer 9

在 Ubuntu 20.04 上使用 Inkscape 1.1.1 (eb90963e84, 2021-10-02)，可以从 icon.svg 生成具有不同分辨率的6个图像（32x32、64x64等）。

for x in 16 24 32 48 64 256 ; do inkscape --export-type="png" --export-filename=${x}x${x}.png -w ${x} -h ${x} icon.svg ; done

---

你可以通过添加元素（用空格分隔）在for x in <here> ;右侧来添加或删除分辨率。
请记住，这将始终生成方形图像（宽度和高度相同）。

将icon.svg更改为您的.svg文件，并将--export-filename=<this>更改为您想要的文件名。
提示：使用${x}获取当前分辨率（32、64等）。

- Patitotective