SVG images on wiki pages

Note: This is no longer relevant, since it applied to the old Wikispaces site and not Mediawiki. SVG files can now be uploaded the same as other image formats.

While Wikispaces allows many image formats (JPEG, PNG, etc.) to be easily placed on a page for display, it seems to have some difficulties with the SVG format. This is unfortunate, as SVG has definite advantages for certain types of graphics. Fortunately, a workaround exists...

0 - have image file ready

You should have an SVG image file saved somewhere on your local machine (for this example, we'll call it "example.svg").

1 - upload file

In the wiki visual editor, click the "File" button > "Insert Files" tab > "Upload Files" button. Select your file and upload it.

If you save or preview the wiki page at this point, you'll see a box with a file icon, the name and size of the file, and "Details" and "Download" links:

example.svg

2 - get link to file

Copy the download link above (in many browsers, a right-click or ctrl-click over the link will give an option to copy it).

The link should look something like:

http://xenharmonic.wikispaces.com/file/view/example.svg/480146866/example.svg

If you wish, this may be shortened to:

http://xenharmonic.wikispaces.com/file/view/example.svg

(it seems to work fine either way).

3 - create display object

In the wiki visual editor, click the "Widget" button > "Other HTML" tab.

In the code box, first paste the download link you copied in the previous step.

Then, copy and paste the following text into the code box, before or after the link:

<object id="example" type="image/svg+xml" data="">
alt : Your browser has no SVG support.
</object>

Now move (cut and paste) the link inside the double quotes after data= .

Then, change the text inside the double quotes after id= to whatever identifier you choose (could be the same as your filename).

You should end up with something like this in the code box:

<object id="example" type="image/svg+xml"
data="http://xenharmonic.wikispaces.com/file/view/example.svg">
alt : Your browser has no SVG support.
</object>

The text between the tags ("alt : Your browser has no SVG support.") is optional, but probably not a bad idea, so at least something will be displayed for someone using an unsupported browser. You can edit or remove this text as you like.

Now, if you preview or save the page, the SVG image should be displayed!

If the image is too large or too small, you can resize it by adding width=x height=y inside the <object ...> tag (where x and y are the desired width and height in pixels):

<object id="example" type="image/svg+xml" width=150 height=150
data="http://xenharmonic.wikispaces.com/file/view/example.svg">
alt : Your browser has no SVG support.
</object>

(You really ought to be able to skip all this nonsense and just put the contents of the SVG file itself (which is HTML-like text, enclosed in a <svg>...</svg> tag) in the Other HTML Widget directly, but i've tried this every which way i can think of and Wikispaces eats the SVG code every time...)