Search code examples
imagesvgmediawikiscale

Resizing SVG image in MediaWiki

We display SVG images in MediaWiki using a template with this code:

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

where {{{1}}} is the uploaded file.

Now we want to be able to rescale the image, just like we do with JPGs, etc, using:

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

Does anyone know how to do that?

Our current workaround is simply to recreate the SVG (in Visio) at a different size which is quite time consuming!

Update: code on page is:

<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>
Solution

  • OK, there are two parts to this solution and I can only help you with the first part, but here it is:

    Browsers (Firefox, Chrome & Opera) will resize the image to fit the available space if you remove the explicit size from the SVG file and replace it with a viewBox. Here's what that Bitmap_VS_SVG.svg file on Wikipedia has at the top of it:

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

    And here's what it needs to be for automatic scaling:

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

    You can see the difference in the context of the iframe as generated by your template above in this example page.

    Now the second part of this is how you can get it all to work on MediaWiki, and for that I can be less help. I signed up for a Wikipedia account to try some stuff out but the default file embedding just creates a PNG version of the image, and it didn't seem like your particular template was available. So to get this working for you, you're now going to need the help of someone who understands MediaWiki templates.