SVG: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 124: Line 124:
* http://tecfa.unige.ch/guides/svg/ex/svg-simple/standalone-hello.phps
* http://tecfa.unige.ch/guides/svg/ex/svg-simple/standalone-hello.phps


 
<source lang="php" enclose="div">
<pre>
<?php
<?php
//set the content type
//set the content type
Line 144: Line 143:
print('</svg>' . "\n");
print('</svg>' . "\n");
?>
?>
</pre>
</source>


=== SVG generation with XSLT ===
=== SVG generation with XSLT ===
Line 150: Line 149:
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]]
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]]


* http://tecfa.unige.ch/guides/svg/ex/svg-xslt/travaux-client-side.xml
* XML file: http://tecfa.unige.ch/guides/svg/ex/html5-xslt/zero-html5.xml
 
<source lang="xml">
<?xml version="1.0" ?>
<?xml-stylesheet href="zero-html5.xsl" type="text/xsl" ?>
 
<thing>
  <height>50</height>
  <width>100</width>
</thing>
</source>


<pre>
* XSLT File: http://tecfa.unige.ch/guides/svg/ex/html5-xslt/zero-html5.xsl
<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">
<source lang="xml">
    <text x="{$space}" y="90" style="stroke:#000099;fill:#000099;font-size:24;">Example visualisation of a student's work page</text>
<?xml version="1.0"?>
    <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>


</pre>
<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>
</source>


=== SVG generation with PHP/XSLT ===
=== SVG generation with PHP/XSLT ===


<pre>
<source lang="php" enclose="div">
header("Content-type: image/svg+xml");
header("Content-type: image/svg+xml");
error_reporting(E_ALL);
error_reporting(E_ALL);
Line 198: Line 221:


print ($html_fragment);  
print ($html_fragment);  
</pre>
</source>


More examples are here: http://tecfa.unige.ch/guides/svg/ex/objects-in-circles/
More examples are here: http://tecfa.unige.ch/guides/svg/ex/objects-in-circles/

Revision as of 18:07, 31 January 2014

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

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 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 !). 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
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=SVG&oldid=50715"