在 MediaWiki 中调整 SVG 图像的大小答案

【问题标题】：Resizing SVG image in MediaWiki在 MediaWiki 中调整 SVG 图像的大小
【发布时间】：2011-04-29 01:21:11
【问题描述】：

我们使用带有以下代码的模板在 MediaWiki 中显示 SVG 图像：

{{#tag:svgfile||src={{{1}}}|height={{{height|300px}}}|width={{{width|600px}}}}}

其中 {{{1}}} 是上传的文件。

现在我们希望能够重新缩放图像，就像我们处理 JPG 等一样，使用：

[[Image:<file name>.JPG|200px]]

有人知道怎么做吗？

我们当前的解决方法只是以不同的大小重新创建 SVG（在 Visio 中），这非常耗时！

更新：页面上的代码是：

<p><b>{{SVG|Bitmap VS SVG.svg|height=300px|width=400px}}</b></p>
<p>
    <a class="external autonumber" href="<url>index.php?title=Special:Upload&amp;wpDestFile=Bitmap VS SVG.svg">
        <iframe src="/mediawiki/images/6/6b/Bitmap_VS_SVG.svg" width="400px" height="300px" frameborder="0"></iframe>
    </a> 
    <a href="/mediawiki/index.php/Image:Bitmap_VS_SVG.svg" title="Image:Bitmap VS SVG.svg">desc</a>
</p>

【问题讨论】：

模板最终呈现为 HTML 的效果如何？它是使用显示内联 HTML5 样式，还是作为对象，还是从图像标签中引用？
@robertc - 感谢您的回复。我不知道如何回答您的问题 - 我应该寻找什么？
当您在网络浏览器中查看模板的结果时，源代码是什么？
@robertc - 周末后我会检查并回复您，谢谢！
它在 IFRAME 元素内渲染 SVG，从外观上看，该元素设置为您指定的宽度和高度。可能有一种方法可以使 SVG 图像始终与容器大小匹配，我会试一试并回复您。

标签： image svg mediawiki scale

【解决方案1】：

好的，这个解决方案有两个部分，我只能帮助你完成第一部分，但这里是：

如果您从 SVG 文件中删除显式大小并将其替换为 viewBox，浏览器（Firefox、Chrome 和 Opera）将调整图像大小以适应可用空间。这是 Wikipedia 上的 Bitmap_VS_SVG.svg 文件顶部的内容：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink" width="1063" height="638">

这是自动缩放所需的：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1063 638">

您可以在iframe 上面的模板生成的iframe 上下文中看到差异in this example page。

现在的第二部分是如何让这一切都在 MediaWiki 上工作，为此我可以提供的帮助更少。我注册了一个 Wikipedia 帐户来尝试一些东西，但默认文件嵌入只是创建了图像的 PNG 版本，而且您的特定模板似乎不可用。因此，要让这个为您工作，您现在需要了解 MediaWiki 模板的人的帮助。

【讨论】：

@robertc - 哇，谢谢你帮我调查这个。我会检查一下并尽快回复您。
@robertc - 非常感谢您为我调查。当我更改我的模板并且您建议它不起作用时 - 我什至在页面代码中都看不到 viewBox。我注意到重新缩放 does 在 Wikipedia 上有效，因此我需要调查它为什么在那里有效。再次感谢。
@MarkRobinson viewBox 在 SVG 代码中。我认为 Wikipedia 上的重新缩放是通过在服务器上创建各种大小的 PNG 来完成的，我认为这就是你想要摆脱的？
@robertc - 啊哈，明白了，谢谢。是的，当我更改 SVG 代码 本身时，这确实有效。除了一个例外 - 当我在一个页面上以两种尺寸包含相同的项目两次时，它只使用其中一种尺寸（因此两个 SVG 显示相同的尺寸）。但这不太可能发生！非常感谢。
@robertc - 它变得更奇怪了。 viewBox 中的大小似乎与 MediaWiki 中显示的大小成反比。因此，如果我添加一个 0 0 10 50 的 viewBox，它就会大于 0 0 1000 5000！

【解决方案2】：

问题得到解答 6 年后，它按预期工作：

[[Image:fooobar.svg|200x200px]]

【讨论】：