SVG: Difference between revisions
Jump to navigation
Jump to search
m (→Integration) |
|||
| Line 20: | Line 20: | ||
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. | 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. | ||
* http://tecfa.unige.ch/guides/svg/ex/svg-intro/hello-svg-within-xhtml.xhtml | |||
<pre> | <pre> | ||
| Line 58: | Line 60: | ||
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. | ||
* http://tecfa.unige.ch/guides/svg/ex/svg-simple/standalone-hello.php | |||
* http://tecfa.unige.ch/guides/svg/ex/svg-simple/standalone-hello.phps | |||
<pre> | <pre> | ||
| Line 82: | Line 88: | ||
=== SVG generation with XSLT === | === SVG generation with XSLT === | ||
Here is an example that works with FireFox and Opera | Here is an example that works with FireFox and Opera (only a part of the code is shown !) | ||
http://tecfa.unige.ch/guides/svg/ex/svg-xslt/travaux-client-side.xml | |||
* http://tecfa.unige.ch/guides/svg/ex/svg-xslt/travaux-client-side.xml | |||
<pre> | <pre> | ||
| Line 107: | Line 114: | ||
</pre> | </pre> | ||
=== SVG generation with PHP/XSLT === | === SVG generation with PHP/XSLT === | ||
| Line 133: | Line 139: | ||
print ($html_fragment); | print ($html_fragment); | ||
</pre> | </pre> | ||
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 == | == Links and tools == | ||
Revision as of 10:38, 5 December 2007
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 Flash, a proprietary and "opaque" format.
Application areas
Visualizations
- The biggest market niche is in our opinion visualization.
- Examples
- 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
Integration
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>
PHP Integration
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.
- http://tecfa.unige.ch/guides/svg/ex/svg-simple/standalone-hello.php
- http://tecfa.unige.ch/guides/svg/ex/svg-simple/standalone-hello.phps
<?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