当前位置：文江博客话题详情

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

发布于 2024-12-05 02:17:38 字数 176 浏览 2 评论 0原文

我有一个 SVG 格式的徽标图像，我想知道是否有办法生成多个不同大小的 png 文件。

例如，我设置了 20 个不同的宽度和高度，它会生成 20 个 PNG 文件。如果我必须一次处理 5 张图像也没关系。

我已经安装了 illustrator，但不知道如何在其上执行此操作。

感谢您的帮助！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

惯饮孤独 2024-12-12 02:17:38

接受的答案很好。有一个有关选项的官方帮助。
另外，基本的 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

The accepted answer is fine. There is an official help on options available.
Also basic Shell commands will do nicely here:

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

On the command line in windows use this line from @avalancha in the comments

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

回复收藏 0 原文

绅士风度i 2024-12-12 02:17:38

我不了解 Illustrator，但这应该很容易使用 Inkscape 命令行选项。例如，使用 Ruby：

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

I don't know about Illustrator, but this should be easy using the Inkscape command line options. For example, using Ruby:

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

回复收藏 0 原文

深海不蓝 2024-12-12 02:17:38

以下是如何通过仅启动 Inkscape 一次来使其速度更快（对于我来说，在 SSD 上只需 5 次导出，速度为 3 倍），以及如何将图像导出到不同的目录（如 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 脚本，您必须将“此处文档”命令更改为 DOS 可以处理的内容。请参阅 heredoc for Windows 批处理？用于将多行文本回显到临时文件等技术。）

Here's how to make it much faster (3x for me for just 5 exports on an SSD) by launching Inkscape just once, and how to export the images to different directories (as Android uses):

#!/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

This is a bash shell script. On Windows you can run it in MINGW32 (e.g. GitHub's Git Shell) or convert it to a Windows DOS shell script. (For a DOS script, you'll have to change the "here document" COMMANDS into something DOS can handle. See heredoc for Windows batch? for techniques such as echoing multiple lines of text to a temp file.)

回复收藏 0 原文

病毒体 2024-12-12 02:17:38

看看 inkmake。实际上，我制作该工具只是为了将 SVG 文件批量导出为不同大小的 PNG 等。它是这样设计的，因为我想保存在 Inkscape 中，然后只需在终端中运行 inkmake ，它就会导出所有依赖的 PNG 文件。

回复收藏 0 原文

ゃ懵逼小萝莉 2024-12-12 02:17:38

基于 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

Based on zany's answer but updated to handle Inkscape 1.1 which requires the -o option for output filename and --export-type as opposed to --export-png to declare your export type.

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

回复收藏 0 原文

淡看悲欢离合 2024-12-12 02:17:38

如果尚未安装，请安装 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 是针对我无法找到好的答案的问题的解决方法。在我的实验中，省略 -密度 参数会创建非常小的图像。将图像转换为 -密度 1024 的 -size 100x100 会得到 96x96 的输出图像，所以我所做的是过度调整密度并调整到目标尺寸。

TL;DR 使用比目标尺寸大 1500 倍的密度，然后从那里开始。

有很多方法可以批量运行该命令。这是 shell 中的一个：

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

If you haven't already, install imagemagick. On OSX, that requires rsvg support specifically:

brew install imagemagick --with-librsvg

You also need inkscape, otherwise you may find that your images come out all black (except for transparent areas).

brew install homebrew/gui/inkscape

Then, you should be able to convert as follows:

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

The 1536 is a workaround for something I'm not able to find good answers to. In my experiments, omitting the -density argument creates images that are terribly small. Converting an image to -size 100x100 at -density 1024 gives me an output image of 96x96, so what I'm doing instead is overshooting on the density and resizing down to the target size.

TL;DR use a density that is 1500 times larger than your target size, and go from there.

There are many ways to bulk-run that command. Here is one in the shell:

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

回复收藏 0 原文

杀お生予夺 2024-12-12 02:17:38

我创建了一个工具来做到这一点。您可以定义所需的输出大小及其文件夹结构。因此，它就像在包含 svg 文件的文件夹上运行它一样简单，然后将 png 文件添加到项目的正确文件夹中。

https://github.com/Inrego/SvgToPng

我希望它有帮助。

回复收藏 0 原文

时间海 2024-12-12 02:17:38

我使用以下命令为 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"

I used the below command to create the icons for Angular PWA.

First "cd" into the inkscape installation folder before running the below command in windows command prompt.

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"

回复收藏 0 原文

老街孤人 2024-12-12 02:17:38

在 Ubuntu 20.04 和 Inkscape 1.1.1（eb90963e84，2021-10-02）上，这会生成 6 个具有不同分辨率的图像（32x32，64x64 等）来自 icon.svg：

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

您可以通过添加元素（分隔的与空格）右 对于 x 在 <这里> ;.
请记住，这始终会生成方形图像（相同的宽度和高度）。

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

On Ubuntu 20.04 with Inkscape 1.1.1 (eb90963e84, 2021-10-02) this generates 6 images with different resolutions (32x32, 64x64, etc) from icon.svg:

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

You can add or remove resolutions by adding elements (separated with spaces) right for x in <here> ;.
Remember this always will generate square images (same width and height).

Change icon.svg to your .svg file and to change the output filenames change --export-filename=<this> to the filename you want.
TIP: use ${x} to get the current resolution (32, 64, etc.).

回复收藏 0 原文

~没有更多了~