Using SVG with HTML5 tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 63: Line 63:
   </body>
   </body>
</html>
</html>
</source>
=== Embeding SVG in HTML 5 with the object tag ===
Live example:
* [http://tecfa.unige.ch/guides/svg/ex/html5/html5-with-object.html html5-with-object.html]
=== Embeding SVG in HTML 5 with the iframe tag ===
Live example:
* [http://tecfa.unige.ch/guides/svg/ex/html5/html5-with-iframe.html html5-with-iframe.html]
=== Embeding SVG in HTML 5 with the src tag ===
Live example:
* [http://tecfa.unige.ch/guides/svg/ex/html5/html5-with-img-src.html html5-with-img-src.html]
=== Using SVG as background image in HTML 5 ===
Live example:
* [http://tecfa.unige.ch/guides/svg/ex/html5/html5-with-css-background.html html5-with-css-background.html]
== Adapting the size of an SVG graphic ==
There are several ways for doing this. For starters, we suggest editing the SVG and adding the following "transformation" code:
Right after the opening svg tag add this:
<source lang="XML">
  <g transform="scale(0.1)">
</source>
Right before the closing svg tag add this:
<source lang="XML">
  </g>
</source>
</source>

Revision as of 20:57, 1 April 2012

Introduction

According to Wikipedia (retrieved April 1 2012), “Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape. All major modern web browsers have at least some degree of support and render SVG markup directly, including Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera and Safari. Earlier versions of Microsoft Internet Explorer (IE) do not support SVG natively.”.

SVG is part of the HTML 5 draft specification, i.e. SVG tags are part of the language and can be inline. We have seen it working since Chrome 9 and 10, Firefox 4, Opera 11 and Internet Explorer 9 (feb 2011). Support of SVG is still not complete, but rapidly improving. All major browser brands (except IE9) now offer very good support - Daniel K. Schneider 19:47, 1 April 2012 (CEST)

If you want to know whether your browser can handle SVG and HTML5, look at this See the When can I use Inline SVG in HTML5? compatibility table at caniuse.com.

See also:

  • SVG (very short overview article)
  • SVG links (nothing but mostly good links)

Learning SVG

The SVG links article includes a number of good links.

If you want to dive in, use:

Respect the syntax of the SVG fragment:

Minimal example: 

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

Unfinished example that defines a canevas size 

<svg id="circle" height="200" with="600" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG tags go in here, between a few lines and several hundreds .... -->
</svg>

How can I include SVG in HTML5

There are several ways of including SVG in HTML5. So-called inlining is preferred.

Inlining SVG in HTML 5

Live 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>

Embeding SVG in HTML 5 with the object tag

Live example:

Embeding SVG in HTML 5 with the iframe tag

Live example:

Embeding SVG in HTML 5 with the src tag

Live example:

Using SVG as background image in HTML 5

Live example:

Adapting the size of an SVG graphic

There are several ways for doing this. For starters, we suggest editing the SVG and adding the following "transformation" code:

Right after the opening svg tag add this: 

  <g transform="scale(0.1)">

Right before the closing svg tag add this: 

  </g>
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Using_SVG_with_HTML5_tutorial&oldid=38223"