Difference between revisions of "Inline SVG extension"

Revision as of 07:46, 12 March 2006

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>
```

For example

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

    viewBox="0 0 300 350" >

</svgcode>

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

Background

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.

File:Example3.svg

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

</svgcode>

Difference between revisions of "Inline SVG extension"

Revision as of 07:46, 12 March 2006

Contents

Purpose & Quick Howto

Do I need this extension

Howto

Background

How it works

Source Code

SVG Browser Test

Navigation menu

Page actions

Page actions

Personal tools

Search

Tools

@@ Line 251: / Line 251: @@
 </g>
 </svg>
+</svgcode>
+<svgcode>
+<svg  version="1.1" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="135.45" height="135.45"
+	 viewBox="0 0 135.45 135.45" overflow="visible" enable-background="new 0 0 135.45 135.45" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#AAAAAA" d="M11.97,107.53H3.93V27.41h8.04v3.06H8.02v73.99h3.95V107.53z"/>
+		<path fill="#AAAAAA" d="M25.45,107.53h-8.04V27.41h8.04v3.06H21.5v73.99h3.95V107.53z"/>
+	</g>
+	<g>
+		<path fill="#AAAAAA" d="M123.48,104.47h3.95V30.47h-3.95v-3.06h8.04v80.12h-8.04V104.47z"/>
+		<path fill="#AAAAAA" d="M110,104.47h3.95V30.47H110v-3.06h8.04v80.12H110V104.47z"/>
+	</g>
+</g>
+<g>
+	<path fill="#00FF00" d="M32.12,62.56l3.12-4.31l5.84,4.42c-0.45,0.74-1.19,1.02-2.72,1.02h-8.9c-0.11,2.55-0.45,5.22-1.08,7.82
+		c7.99,2.04,10.6,5.84,10.6,8.68c0,2.1-1.42,3.74-3.18,3.74c-0.79,0-1.64-0.34-2.44-1.13c-0.45-3.29-2.67-7.2-5.39-9.87
+		c-1.87,6.41-6.01,12.59-14.74,17.07l-0.57-0.62c8.51-7.54,10.6-16.78,11-25.68h-10.6l-0.28-1.13h10.89
+		c0.06-0.85,0.06-1.64,0.06-2.49V48.33h-2.61c-2.1,4.2-4.65,7.77-7.6,10.43l-0.74-0.45c2.44-4.93,4.54-13.49,5.5-21.6l8.39,2.04
+		c-0.23,0.74-0.68,1.13-2.15,1.19c-0.85,2.55-1.76,4.99-2.83,7.26h9.02l3.18-4.03l6.07,4.14c-0.45,0.79-1.19,1.02-2.72,1.02h-7.65
+		v11.68c0,0.85,0,1.7-0.06,2.55H32.12z M59.28,42.89l6.46,4.76c-0.34,0.45-1.19,0.91-2.32,1.19v37.31c0,0.11-1.59,1.87-6.07,1.87
+		v-5.39H47.31V87c0,0.17-0.68,2.44-5.95,2.44V43.51l6.24,2.67h9.19L59.28,42.89z M47.31,81.5h10.04V47.31H47.31V81.5z"/>
+	<path fill="#0000FF" d="M84.17,44.53l5.16,3.74c-0.45,0.74-1.19,0.96-2.61,0.96H69.48l-0.34-1.08H81.5L84.17,44.53z M79.97,55.48
+		l2.49-3.35l4.76,3.52c-0.4,0.74-1.08,0.96-2.55,0.96H71.64l-0.34-1.13H79.97z M87.23,63.02c-0.4,0.74-1.08,0.96-2.55,0.96H71.64
+		L71.3,62.9h8.68l2.49-3.35L87.23,63.02z M80.71,70.5l2.04-2.61l5.73,3.97c-0.28,0.4-1.02,0.79-2.04,1.02v12.93
+		c0,0.11-1.3,1.59-5.22,1.59v-3.35h-4.65v4.08c0,0.11-0.74,1.87-5.22,1.87V68.23l5.39,2.27H80.71z M87.29,41.08
+		c-0.45,0.74-1.19,0.96-2.61,0.96H71.75l-0.28-1.08h8.05l2.72-3.57L87.29,41.08z M76.57,82.92h4.65V71.64h-4.65V82.92z
+		 M112.74,58.26c0.17,3.74,0.51,7.31,1.13,10.6c1.02-2.55,1.81-5.16,2.38-7.71l7.09,2.27c-0.23,0.68-0.79,1.02-2.21,0.96
+		c-1.3,3.69-3.12,7.48-5.61,11.06c1.3,3.57,2.95,6.01,3.29,6.01c0.57,0,2.78-5.73,3.35-7.43l0.45,0.11l-1.13,9.47
+		c0.91,2.04,1.36,3.57,1.36,4.59c0,1.87-2.21,1.93-2.44,1.93c-4.76,0-7.71-7.03-8.85-9.75c-3.51,3.74-7.94,6.92-13.44,9.19
+		l-0.45-0.79c5.27-3.23,9.41-7.71,12.47-12.59c-1.53-5.33-2.27-11.34-2.67-17.92H87.23l-0.28-1.13h12.02
+		c0.57-3.06,1.08-7.26,1.25-10.26l6.86,1.3v-2.38c-0.4,0.11-0.91,0.17-1.53,0.17H88.31l-0.34-1.13h6.63v-7.54l7.71,0.68
+		c-0.06,0.74-0.57,1.08-2.15,1.3v5.56h1.19l2.33-3.35l3.34,2.67v-7.26l7.83,0.85c-0.11,0.74-0.57,1.02-2.15,1.3
+		c-0.11,3.29-0.17,6.63-0.17,9.87c0,2.78,0.06,5.56,0.17,8.22h1.76l3.01-4.03l5.5,4.2c-0.45,0.74-1.13,0.96-2.66,0.96H112.74z
+		 M100.04,80.6h-5.27v3.8c0,0.06-0.57,1.87-4.99,1.87v-25l5.27,2.21h4.48l1.99-2.61l5.61,3.91c-0.28,0.4-1.08,0.79-2.04,1.02v16.22
+		c0,0.06-1.36,1.64-5.05,1.64V80.6z M91.03,47.09c3.97,2.21,5.33,4.59,5.33,6.41c0,1.87-1.42,3.12-2.83,3.12
+		c-0.79,0-1.64-0.4-2.21-1.36c0.06-0.57,0.11-1.13,0.11-1.76c0-2.15-0.4-4.54-1.02-6.18L91.03,47.09z M100.04,64.61h-5.27v6.75h5.27
+		V64.61z M94.77,79.46h5.27v-6.97h-5.27V79.46z M107.36,57.12c-0.11-2.72-0.23-5.5-0.28-8.33c-0.28,0.28-0.85,0.45-1.76,0.45
+		c-1.19,2.27-3.18,5.39-5.05,7.88H107.36z M114.73,40.11c5.78,2.1,7.65,4.82,7.65,6.92c0,1.81-1.42,3.12-2.95,3.12
+		c-0.85,0-1.7-0.4-2.38-1.3c-0.06-2.67-1.3-6.24-2.83-8.39L114.73,40.11z"/>
+</g>
+<g>
+	<path fill="#555555" d="M48.91,97.3c-0.21-1.91-0.59-2.46-1.36-2.46c-0.43,0-1.23,0.28-1.23,1.58c0,0.57,0.2,1.11,0.53,1.49
+		c0.41,0.45,0.99,0.9,1.33,1.25c0.47,0.45,1.56,1.51,1.56,3.59c0,2.2-1.07,3.66-2.61,3.66c-0.9,0-1.51-0.31-2.03-0.76
+		c-0.07-1.06-0.15-1.94-0.27-2.93l0.46-0.21c0.31,2.27,0.87,2.93,1.7,2.93c0.92,0,1.37-0.99,1.37-2.1c0-0.5-0.07-0.9-0.25-1.23
+		c-0.24-0.47-0.7-0.83-1.31-1.42c-1.03-1.02-1.76-1.77-1.76-3.78c0-1.7,0.8-3.05,2.39-3.05c0.71,0,1.26,0.24,1.71,0.57
+		c0.05,0.73,0.11,1.49,0.24,2.69L48.91,97.3z"/>
+	<path fill="#555555" d="M57.73,100.04c0,1.51,0.12,2.81,0.45,3.83c0.31,0.92,0.81,1.46,1.37,1.46c1.08,0,1.64-1.42,1.87-2.27
+		l0.43,0.47c-0.63,2.08-1.52,2.88-2.53,2.88c-1.3,0-2.99-1.09-2.99-6.5c0-3.19,0.91-6.05,2.83-6.05c1.9,0,2.69,2.81,2.69,6.17H57.73
+		z M60.5,99.05c-0.02-1.91-0.24-4.23-1.33-4.23c-0.34,0-0.71,0.35-0.98,1.02c-0.25,0.69-0.41,1.75-0.45,3.21H60.5z"/>
+	<path fill="#555555" d="M69.54,100.04c0,1.51,0.12,2.81,0.45,3.83c0.31,0.92,0.81,1.46,1.37,1.46c1.08,0,1.64-1.42,1.87-2.27
+		l0.43,0.47c-0.63,2.08-1.52,2.88-2.53,2.88c-1.3,0-2.99-1.09-2.99-6.5c0-3.19,0.91-6.05,2.83-6.05c1.9,0,2.69,2.81,2.69,6.17H69.54
+		z M72.31,99.05c-0.02-1.91-0.24-4.23-1.33-4.23c-0.34,0-0.71,0.35-0.98,1.02c-0.25,0.69-0.41,1.75-0.45,3.21H72.31z"/>
+	<path fill="#555555" d="M81.78,99.5l1.77-3.43c0.17-0.31,0.27-0.57,0.27-0.76s-0.13-0.31-0.48-0.31v-0.83h2.2v0.83
+		c-0.37,0-0.63,0.17-0.93,0.76l-1.29,2.43l1.94,6c0.29,0.97,0.58,1.09,0.97,1.09v0.83h-1.9l-1.96-6.31l-0.61,1.23v2.41
+		c0.01,1.61,0.05,1.84,0.7,1.84v0.83h-2.8v-0.83c0.73,0,0.77-0.26,0.77-1.84v-12c0-1.58-0.08-1.82-0.77-1.82v-0.76
+		c0.65-0.14,1.31-0.5,1.95-1.13l0.15,0.19V99.5H81.78z"/>
+	<path fill="#555555" d="M92.24,104.7c0,0.97-0.4,1.77-0.89,1.77s-0.89-0.8-0.89-1.77c0-0.99,0.4-1.79,0.89-1.79
+		C91.86,102.9,92.24,103.75,92.24,104.7z M91.15,101.41c-0.09-1.87-0.65-11.34-0.65-11.77c0-0.85,0.25-1.51,0.85-1.51
+		s0.85,0.66,0.85,1.51c0,0.43-0.56,9.9-0.65,11.77H91.15z"/>
+</g>
+<rect fill="none" width="135.45" height="135.45"/>
+</svg>
 </svgcode>
 [[Category:Mediawiki_Extensions]]