Difference between revisions of "Inline SVG extension"

From assela Pathirana
Jump to navigationJump to search
m (Text replace - '<pre>' to ' <pre>')
 
(4 intermediate revisions by the same user not shown)
Line 7: Line 7:
* Then use it in an <nowiki>[[Image:foobar]]</nowiki> tag. It works for many browsers.  
* Then use it in an <nowiki>[[Image:foobar]]</nowiki> tag. It works for many browsers.  
And if you want to play it safe (remember many old browsers might not support svg format!)
And if you want to play it safe (remember many old browsers might not support svg format!)
* Use [[User:Coffman/SVG Extension| SVG Extension]] by [[User:Coffman]]. It renders gif or png directly, which works in every browser.
* Use [[metawikipedia:User:Coffman/SVG Extension| SVG Extension]] by [[metawikipedia:User:Coffman]]. It renders gif or png directly, which works in every browser.


===Howto===
===Howto===
Line 14: Line 14:
* Cut and paste the [[#Source Code|source code]] below in to a file named SVGtag.php in your extensions directory
* Cut and paste the [[#Source Code|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 <nowiki>
* Call SVGtag.php by adding following line to the end of LocalSettings.php <nowiki>
</nowiki><pre><nowiki>include("extensions/SVGtag.php");</nowiki></pre>
</nowiki>
<pre><nowiki>include("extensions/SVGtag.php");</nowiki></pre>
* Include svg code as follows: <nowiki>
* Include svg code as follows: <nowiki>
</nowiki><pre><nowiki><svgcode calling_arguments>
</nowiki>
<pre><nowiki><svgcode calling_arguments>
<svg  various arguments come here>
<svg  various arguments come here>
svg code here
svg code here
Line 22: Line 24:
</svgcode></nowiki></pre>
</svgcode></nowiki></pre>
** For example <nowiki>
** For example <nowiki>
</nowiki><pre><nowiki><svgcode width="300" height="200" version="1.1">
</nowiki>
<pre><nowiki><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"
<svg  version="1.1" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="300" height="200"
     viewBox="0 0 300 350" >
     viewBox="0 0 300 350" >
Line 42: Line 45:
(see [[metawikipedia:Write_your_own_MediaWiki_extension]] first.)
(see [[metawikipedia:Write_your_own_MediaWiki_extension]] first.)
* The extension registers a hook to Mediawiki wgParser requesting it to  run returnSVGtagged function whenever <nowiki>
* The extension registers a hook to Mediawiki wgParser requesting it to  run returnSVGtagged function whenever <nowiki>
</nowiki><pre><nowiki><svgtag> blah blah </svgtag></nowiki></pre> is found in the code, using 'blah blah' (code between <svgtag> and </svgtag> as the argument.
</nowiki>
<pre><nowiki><svgtag> blah blah </svgtag></nowiki></pre> is found in the code, using 'blah blah' (code between <svgtag> and </svgtag> as the argument.
* returnSVGtagged function does the following
* returnSVGtagged function does the following
*# Creates a unique file name based on MD5 checksum of the svg code in the argument.
*# Creates a unique file name based on MD5 checksum of the svg code in the argument.
Line 51: Line 55:
*# return a '''iframe''' tag calling the unique file name.
*# return a '''iframe''' tag calling the unique file name.
==Source Code==
==Source Code==
<pre>
<pre>
<?php
<?php
Line 256: Line 261:
==Server configuration==
==Server configuration==
If your web server does not support the content type svg, you have to add it for svg files that are hosted there to work properly. Add the following to either the httpd.conf (if you have rootly powers in the server, which may not be the case if you are using a economical hosting plan) or to a .htaccess file otherwise.  
If your web server does not support the content type svg, you have to add it for svg files that are hosted there to work properly. Add the following to either the httpd.conf (if you have rootly powers in the server, which may not be the case if you are using a economical hosting plan) or to a .htaccess file otherwise.  
<pre>
<pre>
AddType image/svg+xml .svg
AddType image/svg+xml .svg
</pre>
</pre>
If you want to support the svgz file format as well (compressed svg) then the following is also needed.  
If you want to support the svgz file format as well (compressed svg) then the following is also needed.  
<pre>
<pre>
AddType image/svg+xml .svgz
AddType image/svg+xml .svgz
Line 274: Line 281:
----
----
See also: [http://wiki.svg.org]
See also: [http://wiki.svg.org]
[[Category:Mediawiki_Extensions]] [[Category:Computing]]
[[Category:Mediawiki Extensions]]

Latest revision as of 19:11, 2 October 2009

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

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

?>

SVG Browser Test

You can see the images here even if your browser does not support SVG. (They are in fact png images)

Example1.svg

Example2.svg

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

<svgcode width="200" height="200" version="1.1"> <svg version="1.1" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" viewBox="0 0 200 200" > <rect x="31.167" y="30.44" fill="#ED1C24" stroke="#000000" width="121.477" height="94.631"/> <rect x="67.368" y="66.547" fill="#00ADEF" stroke="#000000" width="121.476" height="94.631"/> <rect x="48.919" y="47.097" fill="#6C9D31" stroke="#000000" width="121.476" height="94.631"/> <radialGradient id="XMLID_2_" cx="33.5747" cy="32.0962" r="31.8353" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF"/> <stop offset="1" style="stop-color:#000000"/> </radialGradient> <polygon fill="url(#XMLID_2_)" stroke="#000000" points="66.066,40.507 43.529,43.18 32.955,63.261 23.448,42.653 1.083,38.802 17.744,23.392 14.496,0.931 34.3,12.015 54.658,1.985 50.236,24.245 "/> <g> <g> <line fill="none" x1="51.972" y1="108.292" x2="69.422" y2="185.474"/> <g> <g> <g> <circle fill="#FFFFFF" stroke="#FADB2A" stroke-width="0.997" stroke-miterlimit="10" cx="40.151" cy="141.565" r="3.183"/> <path fill="#FFFFFF" stroke="#ED248B" stroke-width="0.997" stroke-miterlimit="10" d="M81.368,140.921 c1.419,1.036,3.412,0.719,4.444-0.703c1.035-1.423,0.72-3.417-0.702-4.449c-1.424-1.033-3.416-0.717-4.451,0.706 C79.627,137.896,79.942,139.89,81.368,140.921z"/> <path fill="#FFFFFF" stroke="#00AB4E" stroke-width="0.997" stroke-miterlimit="10" d="M88.998,167.87 c-0.543,1.675,0.372,3.47,2.045,4.01c1.671,0.544,3.469-0.369,4.012-2.042c0.543-1.669-0.371-3.467-2.044-4.012 C91.338,165.284,89.542,166.195,88.998,167.87z"/> <path fill="none" stroke="#3B75BA" stroke-width="0.997" stroke-miterlimit="10" d="M84.077,150.453 c-1.036,1.421-0.719,3.414,0.702,4.447c1.422,1.036,3.416,0.719,4.448-0.707c1.033-1.419,0.719-3.412-0.705-4.446 C87.102,148.712,85.11,149.03,84.077,150.453z"/> <path fill="none" stroke="#F08731" stroke-width="0.997" stroke-miterlimit="10" d="M77.633,182.727 c-1.424,1.032-1.739,3.024-0.705,4.447c1.033,1.419,3.024,1.738,4.447,0.705c1.423-1.034,1.739-3.028,0.706-4.451 C81.049,182.006,79.055,181.691,77.633,182.727z"/> <path fill="none" stroke="#C6322C" stroke-width="0.997" stroke-miterlimit="10" d="M51.467,144.013 c-1.671,0.541-2.588,2.339-2.044,4.011c0.544,1.672,2.339,2.589,4.013,2.043c1.674-0.544,2.59-2.339,2.045-4.01 C54.936,144.385,53.142,143.47,51.467,144.013z"/> <path fill="none" stroke="#FADB2A" stroke-width="0.997" stroke-miterlimit="10" d="M62.434,161.619 c-1.759,0-3.185,1.428-3.185,3.189c-0.002,1.754,1.425,3.182,3.185,3.182c1.757,0,3.186-1.425,3.186-3.182 C65.619,163.047,64.191,161.619,62.434,161.619z"/> <path fill="#FFFFFF" stroke="#AC60A6" stroke-width="0.997" stroke-miterlimit="10" d="M52.596,178.394 c-1.424-1.036-3.416-0.723-4.45,0.701c-1.033,1.426-0.719,3.416,0.705,4.448c1.421,1.036,3.414,0.72,4.448-0.701 C54.333,181.417,54.017,179.425,52.596,178.394z"/> <path fill="#FFFFFF" stroke="#EB2891" stroke-width="0.997" stroke-miterlimit="10" d="M38.215,185.426 c-1.035-1.421-3.025-1.739-4.449-0.705c-1.421,1.033-1.738,3.024-0.702,4.446c1.032,1.425,3.022,1.74,4.445,0.707 C38.932,188.841,39.249,186.847,38.215,185.426z"/> <path fill="#FFFFFF" stroke="#77C047" stroke-width="0.997" stroke-miterlimit="10" d="M43.432,174.856 c-0.544-1.675-2.341-2.59-4.013-2.045c-1.672,0.54-2.586,2.338-2.044,4.01c0.543,1.674,2.34,2.591,4.013,2.044 C43.061,178.324,43.977,176.527,43.432,174.856z"/> <circle fill="#FFFFFF" stroke="#564E95" stroke-width="0.997" stroke-miterlimit="10" cx="38.964" cy="152.73" r="3.185"/> <circle fill="#FFFFFF" stroke="#ECA021" stroke-width="0.997" stroke-miterlimit="10" cx="57.438" cy="134.261" r="3.184"/> </g> <circle fill="#FFFFFF" stroke="#EB60A3" stroke-width="0.4985" stroke-miterlimit="10" cx="77.115" cy="146.784" r="2.03"/> <circle fill="#FFFFFF" stroke="#564E95" stroke-width="0.4985" stroke-miterlimit="10" cx="84.676" cy="161.624" r="2.031"/> <circle fill="#FFFFFF" stroke="#00AB4E" stroke-width="0.4985" stroke-miterlimit="10" cx="73.669" cy="172.223" r="2.03"/> <circle fill="none" stroke="#3B75BA" stroke-width="0.4985" stroke-miterlimit="10" cx="56.926" cy="156.024" r="2.03"/> <path fill="none" stroke="#F08731" stroke-width="0.4985" stroke-miterlimit="10" d="M80.904,174.822 c-0.908,0.66-1.109,1.928-0.449,2.837c0.659,0.906,1.928,1.107,2.836,0.45c0.907-0.662,1.108-1.933,0.449-2.837 C83.082,174.364,81.809,174.164,80.904,174.822z"/> <path fill="none" stroke="#C6322C" stroke-width="0.4985" stroke-miterlimit="10" d="M71.081,161.03 c-1.065,0.345-1.65,1.492-1.303,2.557c0.347,1.067,1.492,1.649,2.558,1.305c1.068-0.349,1.652-1.496,1.305-2.559 C73.292,161.266,72.148,160.682,71.081,161.03z"/> <path fill="none" stroke="#FADB2A" stroke-width="0.4985" stroke-miterlimit="10" d="M66.331,177.937 c-1.122,0-2.031,0.91-2.031,2.032c-0.001,1.118,0.909,2.029,2.031,2.029c1.12,0,2.029-0.907,2.029-2.029 S67.451,177.937,66.331,177.937z"/> <circle fill="#FFFFFF" stroke="#00A994" stroke-width="0.4985" stroke-miterlimit="10" cx="60.662" cy="179.07" r="2.03"/> <circle fill="#FFFFFF" stroke="#EB2891" stroke-width="0.4985" stroke-miterlimit="10" cx="51.491" cy="172.405" r="2.03"/> <circle fill="#FFFFFF" stroke="#77C047" stroke-width="0.4985" stroke-miterlimit="10" cx="46.559" cy="161.31" r="2.03"/> <circle fill="#FFFFFF" stroke="#ED7140" stroke-width="0.4985" stroke-miterlimit="10" cx="70.558" cy="154.42" r="2.031"/> <circle fill="#FFFFFF" stroke="#ECA021" stroke-width="0.4985" stroke-miterlimit="10" cx="60.666" cy="144.178" r="2.03"/> <circle fill="#FFFFFF" stroke="#FADB2A" stroke-width="0.4985" stroke-miterlimit="10" cx="72.357" cy="143.861" r="2.03"/> </g> </g> <g> <g> <g> <circle fill="#FFFFFF" stroke="#FADB2A" stroke-width="0.8103" stroke-miterlimit="10" cx="32.56" cy="91.972" r="2.587"/> <path fill="#FFFFFF" stroke="#ED248B" stroke-width="0.8103" stroke-miterlimit="10" d="M66.06,91.449 c1.154,0.842,2.773,0.584,3.612-0.571c0.841-1.157,0.585-2.776-0.57-3.616c-1.157-0.839-2.776-0.583-3.617,0.574 C64.646,88.99,64.902,90.61,66.06,91.449z"/> <path fill="#FFFFFF" stroke="#00AB4E" stroke-width="0.8103" stroke-miterlimit="10" d="M72.262,113.352 c-0.442,1.361,0.302,2.82,1.662,3.259c1.359,0.442,2.82-0.3,3.261-1.66c0.442-1.357-0.302-2.818-1.661-3.261 C74.164,111.25,72.705,111.991,72.262,113.352z"/> <path fill="none" stroke="#3B75BA" stroke-width="0.8103" stroke-miterlimit="10" d="M68.262,99.196 c-0.842,1.156-0.584,2.774,0.571,3.615c1.156,0.842,2.777,0.584,3.616-0.575c0.839-1.154,0.584-2.773-0.573-3.613 C70.721,97.781,69.102,98.039,68.262,99.196z"/> <circle fill="none" stroke="#F08731" stroke-width="0.8103" stroke-miterlimit="10" cx="64.546" cy="127.521" r="2.588"/> <circle fill="none" stroke="#C6322C" stroke-width="0.8103" stroke-miterlimit="10" cx="42.557" cy="96.422" r="2.587"/> <path fill="none" stroke="#FADB2A" stroke-width="0.8103" stroke-miterlimit="10" d="M50.671,108.272 c-1.43,0-2.588,1.161-2.588,2.591c-0.001,1.426,1.158,2.586,2.588,2.586c1.428,0,2.589-1.158,2.589-2.586 C53.26,109.433,52.099,108.272,50.671,108.272z"/> <path fill="#FFFFFF" stroke="#AC60A6" stroke-width="0.8103" stroke-miterlimit="10" d="M42.675,121.905 c-1.157-0.842-2.776-0.587-3.617,0.57c-0.839,1.159-0.584,2.776,0.573,3.615c1.155,0.842,2.774,0.586,3.615-0.57 C44.087,124.363,43.83,122.744,42.675,121.905z"/> <path fill="#FFFFFF" stroke="#EB2891" stroke-width="0.8103" stroke-miterlimit="10" d="M30.987,127.621 c-0.841-1.155-2.459-1.413-3.617-0.573c-1.155,0.839-1.412,2.458-0.57,3.613c0.838,1.158,2.457,1.414,3.613,0.574 C31.569,130.397,31.826,128.776,30.987,127.621z"/> <circle fill="#FFFFFF" stroke="#77C047" stroke-width="0.8103" stroke-miterlimit="10" cx="32.765" cy="119.829" r="2.588"/> <circle fill="#FFFFFF" stroke="#564E95" stroke-width="0.8103" stroke-miterlimit="10" cx="31.595" cy="101.047" r="2.588"/> <circle fill="#FFFFFF" stroke="#ECA021" stroke-width="0.8103" stroke-miterlimit="10" cx="46.611" cy="86.036" r="2.588"/> </g> <circle fill="#FFFFFF" stroke="#EB60A3" stroke-width="0.4052" stroke-miterlimit="10" cx="62.603" cy="96.213" r="1.65"/> <circle fill="#FFFFFF" stroke="#564E95" stroke-width="0.4052" stroke-miterlimit="10" cx="68.749" cy="108.276" r="1.651"/> <circle fill="#FFFFFF" stroke="#00AB4E" stroke-width="0.4052" stroke-miterlimit="10" cx="59.803" cy="116.89" r="1.65"/> <circle fill="none" stroke="#3B75BA" stroke-width="0.4052" stroke-miterlimit="10" cx="46.194" cy="103.724" r="1.65"/> <circle fill="none" stroke="#F08731" stroke-width="0.4052" stroke-miterlimit="10" cx="66.654" cy="120.339" r="1.651"/> <circle fill="none" stroke="#C6322C" stroke-width="0.4052" stroke-miterlimit="10" cx="58.209" cy="109.362" r="1.65"/> <path fill="none" stroke="#FADB2A" stroke-width="0.4052" stroke-miterlimit="10" d="M53.838,121.534 c-0.912,0-1.65,0.74-1.65,1.652c-0.001,0.908,0.738,1.649,1.65,1.649c0.911,0,1.65-0.737,1.65-1.649 S54.749,121.534,53.838,121.534z"/> <circle fill="#FFFFFF" stroke="#00A994" stroke-width="0.4052" stroke-miterlimit="10" cx="49.231" cy="122.455" r="1.65"/> <circle fill="#FFFFFF" stroke="#EB2891" stroke-width="0.4052" stroke-miterlimit="10" cx="41.778" cy="117.038" r="1.65"/> <circle fill="#FFFFFF" stroke="#77C047" stroke-width="0.4052" stroke-miterlimit="10" cx="37.768" cy="108.02" r="1.65"/> <circle fill="#FFFFFF" stroke="#ED7140" stroke-width="0.4052" stroke-miterlimit="10" cx="57.274" cy="102.42" r="1.65"/> <circle fill="#FFFFFF" stroke="#ECA021" stroke-width="0.4052" stroke-miterlimit="10" cx="49.234" cy="94.096" r="1.65"/> <circle fill="#FFFFFF" stroke="#FADB2A" stroke-width="0.4052" stroke-miterlimit="10" cx="58.737" cy="93.838" r="1.65"/> </g> </g> </g> </g> </svg> </svgcode>


<svgcode width=200 height=200> <svg version="1.1" id="Layer_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" viewBox="0 0 136 136 " > <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>

Server configuration

If your web server does not support the content type svg, you have to add it for svg files that are hosted there to work properly. Add the following to either the httpd.conf (if you have rootly powers in the server, which may not be the case if you are using a economical hosting plan) or to a .htaccess file otherwise.

AddType image/svg+xml .svg

If you want to support the svgz file format as well (compressed svg) then the following is also needed.

AddType image/svg+xml .svgz
AddEncoding gzip .svgz
<FilesMatch \.svgz$>
  <IfModule mod_gzip.c>
    mod_gzip_on No
  </IfModule>
</FilesMatch>

What is the advantage of having SVG instead of an image format

There are several web friendly image formats (e.g. PNG, GIF) that are traditionally used to show vector-like data. Why should one complicate his life and other's by using SVG? To know the answer first try clicking on the boarder of one of the frames above. They should open a svg image filling the whole area of your browser, not losing the image quality at all. That is the advantage of a vector format! Still the file sizes are quite small.


See also: [2]