Moodle

I am sorry, svg images are not supported by all browsers yet. Once they are we can not support them everywhere because they might contain JavaScript.

Hmm. The bug report is about Moodle and what particular browsers may or may not support is not relevant.

( For reference here is the bug report for the one browser I know of that appears
to lack SVG support. Opera, Safari and Firefox all render SVG just fine.
http://bugs.kde.org/show_bug.cgi?id=168019 )

Supporting SVG would lend the ability to display scalable graphics more easily in online courses.

Moodle is generally not used in a vacuum and since it is possible for teachers to upload and use SVG, and to coordinate supporting tools like browsers. Since SVG has been a W3C standard for ages, it would help to have it supported.

SVG is a standard (open standard, no less) image format. I am using SVG in my courses. It's not a big coding step to allow it along side the bitmaps PNG, GIF and JPEG.

hmm, standards are nice unfortunately we spend a lot of time working around problems in browsers that do not fully support them.
Anyway I was posting here mostly because there is the known problem with XSS and SVG, we can not let students embed svg images in posts, that's all.

As for browsers that don't support standards, forget them. Their time is long over.

The concern about XSS via Javascript embedded in SVG files is valid. However, the part I (believe I) am requesting SVG support for is available to the teachers only.

Lars:

A good solution to what you are wanting to do is to save your graphic both as a .png and as the xml file with the <svg tag.

Upload the xml file to your course.

Then put the png file on the page and with hyperlink to the xml file.

This has the advantage that users with all common browsers (including IE 6) can see the image, and those with svg rendering capability can click on the link to see the vector graphic.

Hopefully that solution is helpful, and also addresses the security vulnerability that Petr mentions (which is you want to restrict what is rendered on the site page whenever there is a reasonable alternative).
--Gary

Nice advice, Gary!

I had never used pure SVG images but I had to test how moodle handles them. For those browsers that support SVG or have SVG plugins installed you could also use object tags

<object data="http://www.opera.com/img/svg/circles.svg" width="200" height="180"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

or embed tags

<embed src="http://www.opera.com/img/svg/circles.svg" width="200" height="180"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

or iframes

<iframe frameborder="0" height="180" src="http://www.opera.com/img/svg/circles.svg" width="200"> </iframe>

That file circles.svg has code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill-opacity="0.6" stroke="#fff" stroke-width="1px">
<circle cx="100px" cy="50px" r="50" fill="#00f"

transform="translate(0,0)" />
<circle cx="100px" cy="50px" r="50" fill="#ff0"
transform="translate(30,50)" />
<circle cx="100px" cy="50px" r="50" fill="#f0f"
transform="translate(-30,50)"/>
</g>
</svg>

Marc Grober helped me to test different (selectable) editors some months ago and one of them - Xinha - used ASCIIMathML.js with ASCIISVG inside the script and had a limited set of svg commands http://www1.chapman.edu/~jipsen/svg/asciisvgcommands.html available. Marc has continued testing fallback scripts with other gurus like David Lippman and Peter Jipsen. Although htmlarea can't insert svg images directly future editors TinyMCE, (F)CKEditor and Xinha might be able to add svg tags with some extra plugins like media plugin (with limited access) or something similar like in http://www1.chapman.edu/~jipsen/svg/asciisvgeditor.html

Native support of SVG is incomplete for all browsers and IE will probably never support SVG without extra plugins:

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics#Support_for_SVG_in_web_browsers

http://www.opera.com/docs/specs/svg/ (Opera)
http://www.opera.com/docs/specs/#svg
http://dev.opera.com/articles/view/opera-9-5-the-next-generation-of-web-s/#svg

http://www.mozilla.org/projects/svg/status.html (latest Firefox)
http://developer.mozilla.org/en/docs/SVG_in_Firefox

http://webkit.org/projects/svg/status.xml (Safari)

IE can use plugins like Adobe SVG Viewer or Renesis Player but Adobe will discontinue support for Adobe SVG Viewer on January 1, 2009
http://www.adobe.com/svg/indepth/pdfs/CurrentSupport.pdf
http://www.adobe.com/svg/viewer/install/

and Renesis Player - http://www.examotion.com/ - is not fully functional either.

@Gary:

Thanks. That is the method I have been using, but have now outgrown and wish to use "image/svg+xml"

If Javascript is a problem, then there are two options. 1) Allow SVG only by teachers or 2) Allow an option to strip the offending XML element from the document.

I'm not a PHP person but Perl's XML::Parser and XML::TokeParser make it quite easy to strip out arbitrary XML-elements, as do other languages' XML tools. So I guess it should also be easy in PHP to strip the script from the document as it is sent to the client (or upon upload if the file itself should be mangled).

Have you tried inserting in editor (after pressing <>) for example

<object data="pathtoimages/image-svg.svg" type="image/svg+xml" height="48" width="48"> <img src="pathtoimages/image-png.png" height="48" width="48" alt="this is a PNG" /> </object>

It should show svg image if svg is supported or png if png is supported or alt text...

Just one update - I have modified official media plugin of tinymce to add svg files in an easy way - in addition to flash, wmf, qt and real media. To show svg files for supported browsers or with help of Adobe SVG Viewer to other browsers or image if object tag fails to render these tags worked nicely

<object classid="clsid:svg" codebase="http://www.adobe.com/svg/viewer/install/" data="http://moodlepath/file.php/5/filename.svg" height="300" width="500">
<param name="src" value="http://moodlepath/file.php/5/filename.svg" /><img height="300" src="http://moodlepath/file.php/5/filename.png" width="500" />
</object>

The plugin will be published as a part of larger package of optional tools for mathematics (equation editor, graph plotter, unicode picker etc) when moodle 2 is stable - I hope

(It is working ok on my moodle 1.9 tinymce but needs to be fully tested with the new file repository system of moodle 2.0 before publishing to avoid any security issues with SVG code)