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).

Do I need this extension

Probably not! You can achieve the same results using standard mediawiki tools

• Upload the svg file as an image
• Then use it in an [[Image:foobar]] tag. It works for many browsers.

And if you want to play it safe (remember many old browsers might not support svg format!)

• Use SVG Extension by User:Coffman. It renders gif or png directly, which works in every browser.

Howto

Follow the steps below:

• 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("extensions/SVGtag.php");

• Include svg code as follows:

  <svgcode calling_arguments>

<svg various arguments come here> svg code here </svg> </svgcode>

• • For example

    <svgcode width="300" height="200" version="1.1">

<svg version="1.1" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="300" height="200"

    viewBox="0 0 300 350" >

<rect x="0.5" y="0.5" fill="#FFFFFF" stroke="#000000" width="250" height="175"/> </svg>

</svgcode>

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[1]. 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.

<iframe src="file.svg" width="500" height="500">
</iframe>

can show a properly formatted svg file in most of the modern browsers.

How it works

(see metawikipedia:Write_your_own_MediaWiki_extension first.)

• The extension registers a hook to Mediawiki wgParser requesting it to run returnSVGtagged function whenever

  <svgtag> blah blah </svgtag>

  is found in the code, using 'blah blah' (code between <svgtag> and </svgtag> as the argument.
• returnSVGtagged function does the following
  1. Creates a unique file name based on MD5 checksum of the svg code in the argument.
  2. Checks whether a file by that name exists
  3. if no
     1. create a new file under that name with svg code as argument
  4. end if
  5. return a iframe tag calling the unique file name.

Source Code

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

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  = "<iframe src=$pname width='".$boxwidth."' height='".$boxheight."' ></iframe>";
    return $txt;
}

?>

SVG Browser Test

You can see the images here even if your browser does not support SVG.

Then, if you see the same images below, then your browser supports SVG.