SVG
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, e.g. read this if you look for tools and other resources !)
- Using SVG with HTML5 tutorial
- Static SVG tutorial
- SVG/SMIL animation tutorial
- 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 in our opinion, up to 2011, visualization.
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 SVG 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. SVG is part of SVG. Even Microsoft (IE9) provides support (SMIL animation tags are missing though and should be implemented in a next version)
SVG icons for software
Many open source programs use icons that are made in SVG, e.g. the Ubuntu desktop
Interactive multimedia
SVG graphics have about the same power as Flash graphics. However, since there are no authoring tools, SVG is less popular popular in that area. On the other hand, HTML5 propaganda sites now include many interesting dynamic and interactive applications made with SVG (including games). At some point there will be high-end authoring tools. As of Jan 2013, Flash CS3 can output some kind of HTML5 that requires some extra tweaking.
Integration
HTML5 integration though inlining
SVG is part of the HTML 5 draft specification. We have seen it working since Chrome 9 and 10, Firefox 4, Opera 11 and Internet Explorer 9 (feb 2011). As of 2014, nearly every browser does support static SVG quite nicely. SVG animations (SMIL) don't work always as expected.
Below 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.
HTML5 integration with other methods
You also can use the embed, the inline or the src tag.
See Using SVG with HTML5 tutorial
XHTML integration
One of the advantages of SVG is integration with other XML formats. E.g. with older browsers like Firefox or Opera (not IE 7 that did neither support XHTML nor SVG) you can easily mix SVG with XHTML. It now (2014) should work in all browsers. However, XHTML as XML was never really used due to Microsoft's difficulty to implement XHTML. In other words the W3C' concept of the future Web where various XML languages should mix within a page is dead. HTML5 is the opposite, i.e. a huge monolithic platform made for web applications, i.e. SVG and MathML are part of HTML5. Integration with XHTML was made in a different more modular spirit ....
Below an example
<?xml version="1.0"?>
<!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. Below are some easier methods...
Creating SVG with PHP
Producing SVG with PHP is easy. There exist HTML5/SVG libraries. Else you can generate SVG tags yourself. To generate standalone SVG files, you must change the HTTP header as shown below. Else, create HTML5 files with SVG inside ....
- 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 !). Read more about this topic in the XSLT to generate SVG tutorial
<?xml version="1.0" ?>
<?xml-stylesheet href="zero-html5.xsl" type="text/xsl" ?>
<thing>
<height>50</height>
<width>100</width>
</thing>
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/2000/svg"
>
<xsl:output
method="xml"
doctype-system="about:legacy-compat"
omit-xml-declaration = "yes"
encoding="UTF-8"
indent="yes" />
<xsl:template match="thing">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"></meta>
<title>XHTML5 + SVG example</title>
</head>
<body>
<p>This line is HTML, embedded SVG is below. Read the <a
href="http://edutechwiki.unige.ch/en/XSLT_to_generate_SVG_tutorial">
XSLT to generate SVG tutorial</a></p>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" >
<rect x="10" y="10" width="{width}"
height="{height}" fill="red" stroke="black"/>
</svg>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
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