【问题标题】:Convert SVG file to multiple different size PNG files将 SVG 文件转换为多个不同大小的 PNG 文件
【发布时间】:2011-11-18 13:13:19
【问题描述】:

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

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

我安装了 illustrator,但不知道如何在上面执行此操作。

感谢您的所有帮助!

【问题讨论】:

  • 聪明人的话,确保你的 svg 有一个 viewBox 属性,这样它才能正确缩放

标签: image svg resize png


【解决方案1】:

我不了解 Illustrator,但使用 Inkscape command line options 应该很容易。例如,使用 Ruby:

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

【讨论】:

  • 是的,这行得通,我发现 Illustrator 无法做到这一点,这让我很失望,所以我不得不手动完成。
  • 这把我吓坏了...使用 cmd line ruby​​ 调用 cmd line 程序 3 次...这种疯狂有什么名字吗?
  • 谢谢你,正是我需要的。
  • 代替--export-png--export-filename 为我工作。
【解决方案2】:

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

【讨论】:

    【解决方案3】:

    接受的答案很好。有一个official help on options 可用。 在这里,基本的 Shell 命令也可以很好地发挥作用:

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

    在 Windows 的命令行上,使用 cmets 中 @avalancha 的这一行

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

    【讨论】:

    • 对于只需要转换一个文件的人,这里有一个更简单的复制粘贴:inkscape --export-png icon.png -w 128 logo.svg
    • 对于windows命令行上的人使用这个for %x in (100 200 300) ; do inkscape --export-png logo%x.png -w %x logo.svg ; done
    • @avalancha 喜欢它,你的答案本身就应该是一个答案
    • 哦,谢谢,非常感谢 :) 但这个想法的功劳属于@zany,我认为不需要拆分
    • @avalancha 我同意这可能是 Windows 用户的另一个答案。您还可以告诉我如何将其与inkscape.exe 的完整路径一起使用吗?如果我只是将inkscape 替换为"C:\....\inkscape.exe",它将无法正常工作。谢谢!
    【解决方案4】:

    以下是如何通过仅启动一次 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 脚本,您必须将“here document”命令更改为 DOS 可以处理的内容。有关将多行文本回显到临时文件等技术,请参阅 heredoc for Windows batch?。)

    【讨论】:

    • @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 运行脚本。
    • github.com/richardaum/svg-to-android-drawable-png@Jerry101 谢谢你的朋友,所有的功劳都是你的。
    • 是否有可能使文件夹中的每个 svg 都这样做?
    • @hakarune 是的。该技术取决于您的 shell,或使用更简洁的语言,如 Python。在 bash 中,核心步骤是 for f in *.svg; do echo "--export-png $f.png $f.svg"; done 并将所有这些命令重定向到像 (for ...; echo quit) &gt; commands 这样的文件中,然后将其输入到像 inkscape --shell &lt; commands 这样的 inkscape 中
    【解决方案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 参数会创建非常小的图像。在-density 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
    

    【讨论】:

      【解决方案6】:

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

      https://github.com/Inrego/SvgToPng

      希望对你有帮助。

      【讨论】:

        【解决方案7】:

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

        【讨论】:

          【解决方案8】:

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

          【讨论】:

            【解决方案9】:

            Ubuntu 20.04Inkscape 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
            

            您可以通过在for x in &lt;here&gt; ; 右侧添加元素(用空格分隔)来添加或删除分辨率。
            请记住,这总是会生成方形图像(相同的宽度和高度)。

            icon.svg 更改为您的.svg 文件,并将输出文件名更改为您想要的文件名--export-filename=&lt;this&gt;
            提示:使用${x} 获取当前分辨率(3264 等)。

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2018-02-14
              • 2019-10-17
              • 2019-08-29
              • 2013-08-14
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多