如何从 Mediawiki 中的低分辨率 SVG 中获取高分辨率缩略图？

Question

我不知道如何正确表达这个问题，所以我会尝试一下：

在this page 上看到光栅化的 SVG？看起来很扭曲，而且 - 对不起，语言 - 相当糟糕。现在让我们将其与here 进行比较。它们都具有完全相同的 SVG 文件，并且源代码在 wikitext 中是相同的。区别在于光栅化的“缩略图”是如何生成的。

我从 MediaWiki 得到的结果。

预期的结果。

据我所知——如果我错了，请纠正我——维基百科和维基百科要么为 SVG 创建多个栅格化缩略图，要么只是根据页面所需的大小按需生成它们。然而默认情况下，MediaWiki 只生成一个缩略图，暗示它与原始 SVG 具有相同的分辨率 - 当将小 SVG 光栅化为大图像时，这会给我们带来模糊和 **** 的光栅图像。

要么是这样，要么 SVG 在缩略图/光栅化之前没有得到缩放/调整大小，而它们应该是。

仅供参考，这里有一些来自我的 LocalSettings.php：

$wgFileExtensions = array( 'png', 'gif', 'jpg', 'jpeg',
    'xls', 'mpp', 'pdf', 'ppt', 'tiff', 'ogg', 'svg',
    'woff', 'eot', 'woff2'
);
// $wgSVGConverters['ImageMagick'] = '"' . $wgImageMagickConvertCommand . '" -background white -thumbnail $widthx$height^! $input PNG:$output';
// $wgSVGConverters['ImageMagick'] = '$path/convert -density $width -geometry $width $input PNG:$output';
$wgSVGConverters['ImageMagick'] = '$path/convert -density 1200 -background none -geometry $width $input PNG:$output';
$wgSVGConverters['rsvg'] = '/usr/bin/rsvg-convert -w $width -h $height $input -o $output';
$wgSVGConverter = 'ImageMagick';
// $wgSVGConverter = 'rsvg';
$wgSVGMaxSize = 2048;
$wgMaxImageArea = 1.25e7;
$wgMaxAnimatedGifArea = 1.0e6; 
$wgUseImageResize = true;
$wgGenerateThumbnailOnParse = true;

那么...如果缺少缩略图是问题的原因，我该如何启用多个缩略图？这甚至是问题的根源吗？如果没有，我没有得到预期结果的真正原因是什么？我能做什么？

编辑：已经通过将 ImageMagick 切换到 RSVG 解决了。

Answer 1

已经通过从 ImageMagick 切换到 RSVG 解决了。

Answer 2

在 Imagemagick 中，您只需要在读取 svg 文件之前提供较大的密度。所以这对我有用。

convert -density 600 The_Mystics.svg mystics.png

Answer 3

相信我，最好的解决方案就是禁用 imageMagick，让 SVG 以原始完美分辨率呈现为 SVG。

在这里您可以看到正在开发的原生 SVG 功能，它还没有完成。 https://phabricator.wikimedia.org/T5593

以下是建议的 wmf 的 beta 功能选择加入 svg： https://phabricator.wikimedia.org/T134482

“拉尔森写道：

希望在客户端本地呈现 SVG。现在是 2013 年，支持就在那里——尽管 Brion 在这方面发表了 4 年的评论。如果您不想在 Wikimedia 网站上启用它，没关系，您不必这样做。对于我的网站，我宁愿将文件下载并缓存一次，而不是获取它的多个栅格化调整大小。”

Mediawiki 文档似乎假装 SVG 的客户端渲染在 99% 的网站上完成，而渲染为 png 的做法从未完成。他们基本上忽略了原生 SVG 处理是一个选项，并且是任何非 wmf 站点的最佳选项。 这主要是因为文档需要更新并且是一团糟，没有恶意。

ImageMagick 有问题，将使用 mediawiki 的 GD 库来代替普通图像。

mediawiki png 渲染 svgs 的唯一原因是因为他们喜欢支持真正旧的浏览器，比如 IE6，而没有人使用。他们这样做是因为 Wikipedia 的用户群非常庞大，而且所有人口统计数据都在使用它。

让 SVG 由客户端的浏览器呈现。您将使用更少的服务器功率，并且无需担心大量已弃用的依赖链。

安装这个： https://www.mediawiki.org/wiki/Extension:NativeSvgHandler

$wgFileExtensions[] = 'svg';
$wgAllowTitlesInSVG = true;
$wgUseImageMagick = false;

//Make sure this variable is false or not there at all:
$wgSVGConverter = false;

如果您想阅读更多内容（虽然这是一个写得很糟糕的页面）： https://www.mediawiki.org/wiki/Manual:Image_administration#SVG

编辑： 更不用说，你为什么要使用 SVG，然后动态光栅化它们？您不妨首先将图像另存为 png。 它破坏了 SVG 的所有巨大优势。

• 全分辨率清晰

• 可以用css设置样式

• 过滤器

• 动画

• 完全可编辑的文件，只需在文本/代码编辑器中打开即可

• 更小的文件大小，取决于 SVG 的制作效率和复杂程度。

通过SVGOMG运行SVG，它可以对文件进行很多优化。就我个人而言，在 SVGOMG 完成工作后，有时甚至可以使用我自己的技术再缩小几十个字节。