views:

58

answers:

1

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>
+1  A: 

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.

robertc
@robertc - wow, thanks for looking into this for me. I will check this out and get back to you asap.
Mark Robinson
@robertc - thanks so much for investigating for me. When I changed my template and you suggested it did not work - I could not even see viewBox in the page code. I noticed that rescaling *does* work on Wikipedia so I will need to investigate why it works there. Thanks again.
Mark Robinson
@MarkRobinson viewBox is in the _SVG_ code. I think the rescaling on Wikipedia is done by creating PNGs of various sizes on the server, I thought that was what you were trying to get away from?
robertc
@robertc - Aha, got it thanks. Yes, that indeed does work when I **change the SVG code** itself. With one exception - when I include the same item twice on a page in two sizes it only uses one of the sizes (so both SVGs displayed same size). But that's not likely to happen! Thanks very much.
Mark Robinson
@robertc - it gets weirder. The size in the viewBox appear to be *inversely proportional* to the size shown in MediaWiki. So if I add a viewBox of 0 0 10 50 it is larger than 0 0 1000 5000!
Mark Robinson
@robertc - even weirder, every time I refresh the page in MediaWiki the image changes size!
Mark Robinson
@MarkRobinson The viewBox should represent the default size of the image, once you've set it you shouldn't need to change it, it's there to provide the browser with information about how big the image _should_ be so that it can make correct decisions about scaling it to fit. So you should specify the viewBox in your SVG, upload it once, then display the same SVG in different sized 'boxes'. With the viewBox specified the browser (if it supports SVG) will size the SVG to fit. If you're uploading multiple versions with different viewBox specifications then you're back where you started.
robertc
@MarkRobinson And one more thing - MediaWiki itself may be interfering with what you're trying to achieve (display a single SVG at multiple resolutions) by processing the image on the server and sending PNGs instead, which in turn may explain the weird behaviour you're seeing.
robertc
@robertc - thanks again for the info; I will check it out. On your last point, no I uploaded one version (you can only display one at a time) but *displayed* it twice on the same page with different size parameters.
Mark Robinson
@MarkRobinson OK, I was just a little confused by your mention of multiple viewBox parameters. If you have Firebug installed then you can check whether you're getting SVG or PNG by right clicking on the image and selecting 'Inspect Element' and checking what the file extension is.
robertc
@robertc - thanks, yet again. Really appreciate it. Will check and get back to you.
Mark Robinson
@robertc - here's what inspect element gives: *<img width="512" height="307" border="0" src="/images/thumb/6/6b/Bitmap_VS_SVG.svg/512px-Bitmap_VS_SVG.svg.png" alt="File:Bitmap VS SVG.svg">* which looks like PNG.
Mark Robinson
@MarkRobinson Yes it does. You'll need to find someone who can figure out the processing in Mediawiki then.
robertc
@robertc - OK, thanks. I'll post back here if I can solve it. Thanks for your hard work here!
Mark Robinson