SVG: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
Line 103: Line 103:
</pre>
</pre>


=== PHP Integration ===
== Generation of SVG with scripts ==
 
SVG can be manipulated and generated with EcmaScript in your browser. However this requires understanding of [[DOM]] programming.
 
=== Creating SVG with PHP ===


Producing SVG with PHP is easy. There exist SVG libraries, else you can generate SVG embedded into XHTML or else SVG files. To generate SVG files, you must change the HTTP header.
Producing SVG with PHP is easy. There exist SVG libraries, else you can generate SVG embedded into XHTML or else SVG files. To generate SVG files, you must change the HTTP header.

Revision as of 18:46, 30 March 2012

Draft

Definition

“SVG is a language for describing two-dimensional graphics and graphical applications in XML. SVG 1.1 is a W3C Recommendation and forms the core of the current SVG developments. SVG 1.2 is the specification currently being developed as is available in draft form [...]. The SVG Mobile Profiles: SVG Basic and SVG Tiny are targeted to resource-limited devices and are part of the 3GPP platform for third generation mobile phones. SVG Print is a set of guidelines to produce final-form documents in XML suitible for archiving and printing.” (Scalable Vector Graphics (SVG), retrieved 12:49, 14 March 2007 (MET)).

See also

  • SVG links (nothing but links)
  • Flash (a proprietary and "opaque" format), and Adobe FXG (Adobe's exchange format between Flash/Flex and other creative Suite programs).

Application areas

Visualizations

The biggest market niche was, up to 2011, in our opinion visualization. Let's have a look at a simple example. Romain Sauvain made SVG-based links visualization module for this wiki. See the link in the toolbox to your left or read the short Mediawiki SvGViz extension documentation. Admire the beauty of links! Works with Firefox, Opera or IE with an SVG plugin. There is also a "heavier" visualization with a Java Applet made by Urs Richle. Of course, there are much more sophisticated examples around...

Clipart exchange

SVG is also very popular as an exchange language. E.g. the only decent clipart repository, i.e. the Open Clip Art Library relies on Clip Art. Wikipedia also strongly suggests to upload graphics as SVG files. For the moment, these are rendered as cached bitmaps (since the IE production browser as of 2010 didn't support SVG).

Google docs stores graphics directly in SVG and its built-in drawing tool produces SVG. For IE users, Google implemented a JavaScript library that can render the supported subset of SVG.

HTML 5 embedded vector graphics

Finally, HTML 5 made SVG into a main stream technology. Even Microsoft (IE9) provides support.

Software components

Many open source programs use icons that are made in SVG

Interactive multimedia

SVG has about the same power as Flash. However, since there are no authoring tools, SVG isn't very popular in that area.

Integration

HTML5 integration

SVG will be (or rather is) part of the HTML 5 draft specification. We have seen it working in Chrome 9 and 10, Firefox 4, Opera 11 and Internet Explorer 9 (feb 2011). Anyhow here is an example: 

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
  </head>

  <body>
    <h1>HTML5 SVG Demo</h1>

A nice green circle:
    <svg id="circle" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="30" cy="30" r="30" fill="green" />
    </svg>

    <hr>
    <address>Created by DKS. This is free code</address>
  </body>
</html>

The live example is here. If nothing shows, then your browser is old.

See the When can I use Inline SVG in HTML5? compatibility table at caniuse.com.

XHTML integration

One of the advantages of SVG is integration with other XML formats. E.g. with a modern browser like Firefox or Opera (not IE 7 that doesn't support XHTML nor SVG) you can easily mix SVG with XHTML. 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:svg="http://www.w3.org/2000/svg">
 <head>
  <title>SVG within XHTML Demo</title>
 </head>
 <body>

  <p> You can embed SVG into XHTML, provided that your browser natively implements
SVG. E.g. Firefox 1.5 supports most of static SVG.
  </p>

  The SVG part starts below <hr />

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300">
   <!-- un petit rectangle avec des coins arroundis  -->
   <rect x="50" y="50" rx="5" ry="5" width="300" height="100" style="fill:#CCCCFF;stroke:#000099"/>
   <!-- un texte au meme endroit -->
   <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">
    HELLO cher visiteur 
   </text>
  </svg>

  <hr />
  The SVG part ended above
</body>
</html>

Generation of SVG with scripts

SVG can be manipulated and generated with EcmaScript in your browser. However this requires understanding of DOM programming.

Creating SVG with PHP

Producing SVG with PHP is easy. There exist SVG libraries, else you can generate SVG embedded into XHTML or else SVG files. To generate SVG files, you must change the HTTP header. 


<?php
//set the content type
header("Content-type: image/svg+xml");

//mark this as XML
print('<?xml version="1.0" encoding="iso-8859-1"?>' . "\n");

//Point to SVG DTD
print('<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">' . "\n");

echo "<svg xmlns=\"http://www.w3.org/2000/svg\">\n";

print ('<rect x="50" y="50" rx="5" ry="5" width="200" height="100" style="fill:#CCCCFF;stroke:#000099"/>' . "\n");

print('<text x="55" y="90" style="stroke:#000099;fill:#000099;fontsize:24;">HELLO cher visiteur </text>' . "\n");

print('</svg>' . "\n");
?>

SVG generation with XSLT

Here is an example that works with FireFox and Opera (only a part of the code is shown !) 

<xsl:template match="/">
  <html xmlns:svg="http://www.w3.org/2000/svg">     
   <head><title>Client-side XHTML / SVG generation</title></head>
   <body>
    <p> .....   </p>

   <svg width="1000" height="900" xmlns="http://www.w3.org/2000/svg">
     <text x="{$space}" y="90" style="stroke:#000099;fill:#000099;font-size:24;">Example visualisation of a student's work page</text>
     <svg y="3cm">
       <xsl:for-each select="//course">
         <xsl:call-template name="render-course">
           <xsl:with-param name="position-y" select="position()"/>
         </xsl:call-template>
       </xsl:for-each>
     </svg>  
    </svg>  
   </body> 
</html> 
</xsl:template>

SVG generation with PHP/XSLT

header("Content-type: image/svg+xml");
error_reporting(E_ALL);
$xml_file = 'travaux.xml';
$xsl_file = 'travaux.xsl';

 // load the xml file (and test first if it exists)
$dom_object = new DomDocument();
if (!file_exists($xml_file)) exit('Failed to open $xml_file');
$dom_object->load($xml_file);


// create dom object for the XSL stylesheet and configure the transformer
$xsl_obj = new DomDocument();
if (!file_exists($xsl_file)) exit('Failed to open $xsl_file');
$xsl_obj->load($xsl_file);
$proc = new XSLTProcessor;
$proc->importStyleSheet($xsl_obj); // attach the xsl rules
$html_fragment = $proc->transformToXML($dom_object);

print ($html_fragment);

More examples are here: http://tecfa.unige.ch/guides/svg/ex/objects-in-circles/ (some may not work because of a faulty FSS feed I'd have to fix ...)

Links and tools

See SVG links

For some serious playing around, you can try this online SVG editor. It works with most current browsers (early 2011).

  • SVG-edit, an online editor implemented in JavaScript
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=SVG&oldid=38210"