Inline SVG extension



Following is a very simple piece of work. Feel free to comment, particularly about alternative approaches and so on.

Purpose & Quick Howto
To enable including in-line svg code in a wiki document, using client browser's capability (native as in mozilla firefox or with a plug-in as in internet explorer and Adobe's SVG plugin).

See a demo at : my personal site. Click on the edge of the image to see the full-frame SVG version.

Do I need this extension ?
Probably not! You can achieve the same results using standard mediawiki tools And if you want to play it safe (remember many old browsers might not support svg format!)
 * Upload the svg file as an image
 * Then use it in an [[Image:foobar]] tag. It works for many browsers.
 * Use SVG Extension by User:Coffman. It renders gif or png directly, which works in every browser.

Howto
Follow the steps below: include("extensions/SVGtag.php");   svg code here   
 * Cut and paste the source code below in to a file named SVGtag.php in your extensions directory
 * Call SVGtag.php by adding following line to the end of LocalSettings.php
 * Include svg code as follows:
 * For example:

See the bottom of this article to see whether your browser support svg.

Background
See Also: SVG

In a perfect world, there is no need to use fancy method to incorporate a SVG script to a web page. However, the conflicts in various browser standards make the waters muddy. There are several methods to do this, depending on targeted browser, but nothing works perfectly for everything. The best compromise seems to be having the svg code in a separate file and include that file in a special object/embed/iframe tag. the latter seems to work best in both worlds (i.e. Mozilla, native svg rendering and IE assisted by Adobe SVG plug in.  can show a properly formatted svg file in most of the modern browsers.

How it works
(see Extending_wiki_markup first.) blah blah is found in the code, using 'blah blah' (code between and as the argument.
 * The extension registers a hook to Mediawiki wgParser requesting it to run returnSVGtagged function whenever
 * returnSVGtagged function does the following
 * Creates a unique file name based on MD5 checksum of the svg code in the argument.
 * Checks whether a file by that name exists
 * if no
 * create a new file under that name with svg code as argument
 * end if
 * return a iframe tag calling the unique file name.

Source Code
<?php $wgExtensionFunctions[] = "wfSVGtag";
 * 1) Copyright 2006 Assela Pathirana
 * 2)    This program is free software; you can redistribute it and/or modify
 * 3)    it under the terms of the GNU General Public License as published by
 * 4)    the Free Software Foundation; either version 2 of the License, or
 * 5)    (at your option) any later version.
 * 6)    This program is distributed in the hope that it will be useful,
 * 7)    but WITHOUT ANY WARRANTY; without even the implied warranty of
 * 8)    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * 9)    GNU General Public License for more details.
 * 10)    You should have received a copy of the GNU General Public License
 * 11)    along with this program; if not, write to the Free Software
 * 12)    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 * 13)    Inspired by svgextension.
 * 1)    You should have received a copy of the GNU General Public License
 * 2)    along with this program; if not, write to the Free Software
 * 3)    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 * 4)    Inspired by svgextension.
 * 1)    Inspired by svgextension.

function wfSVGtag { global $wgParser; $wgParser->setHook( "svgcode", "returnSVGtagged" ); }

function returnSVGtagged( $code, $argv) {	global $wgUploadDirectory, $wgUploadPath, $IP, $wgArticlePath, $wgTmpDirectory; $hash = md5( $code ); $tmploc="/svgcode/"; $extension=".svg"; $svgversion=$argv["version"]; $boxwidth=$argv["width"]; $boxheight=$argv["height"]; if (!is_numeric($boxwidth)){ $boxwidth="500"; } if (!is_numeric($boxheight)){ $boxheight="500"; } if ($svgversion==""){ $svgversion='1.1'; } $svgversion2=str_replace(".","",$svgversion); $dest = $wgUploadDirectory.$tmploc; $path= $wgUploadPath.$tmploc; if ( ! is_dir( $dest ) ) { mkdir( $dest, 0777 ); } if ( ! is_dir( $wgTmpDirectory ) ) { mkdir( $wgTmpDirectory, 0777 ); }

$outfile = $dest. $hash.$extension; $pname = $path. $hash.$extension; if ( ! file_exists( $outfile ) ) { $ptr = fopen($outfile, "w"); $header= '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG '.$svgversion.'//EN" "http://www.w3.org/Graphics/SVG/'.$svgversion.   '/DTD/svg'.$svgversion2.'.dtd" [ <!ENTITY ns_svg "http://www.w3.org/2000/svg">'. '<!ENTITY ns_xlink "http://www.w3.org/1999/xlink"> ]>'; fwrite($ptr, $header); fwrite($ptr, $code); fclose($ptr); } 		$txt  = " "; return $txt; }

?>

SVG Browser Test
Well.. you should be able to see the images below, even if your browser doesn't support svg. They were uploaded using the Image: directive of mediawiki, so that what you see here are actually png images generated by the host at upload time. To do the real test, click on one of the images to go to the image page and click on the url with .svg extension, below the image on that page. Then, if you see a rectangle, then your browser really supports svg! (shortcut: just click [[Media:58b7eb070e1972cb00523838c12d1349.svg|here]] and [[Media:7aad0ccb9f51e3b32777f8e743862ee8.svg|here]]).
 * Note: Alternatively you can check this page. (Click on the edge of the image to see the full-page version).