Resources for using SVG in HTML

HTML5 is changing the playing field. Good, practical resources are hard to find, though. Many SVG examples date from SVG's early years when Adobe's no-longer supported plug-in was the primary way to view SVGs on the web. Many recent examples are too complicated relying, on JavaScript libraries or features that are not present in all the major browsers. Here is a collection of resources I've created or found on the web.

Simple Tests and Examples

• SVG in HTML. Discusion with tests of various ways of including SVG in HTML.
• Button Test:HTML, XHTML, Experiments in using SVG buttons in HTML.
• Viewport: HTML, XHTML, Tests embeding using <object> tag with various combinations of "viewPort", "width", and "height" defined.
• Viewport 2: HTML, XHTML. A modified version of Jeff Schiller's test page that includes inlined SVG.
• Tests from my Inkscape book.
• My Ligature Test.
• SVG1.1 Second Edition Tests, Inkscape.
• CSS in SVG tests.
• CSS and SVG together.
• Distorting Text with Inkscape.

SVG 2

Some of my work for SVG2.

• Already in SVG 2 Specification:
• Mesh gradients, SVG2 Spec
• Radial gradients (improvements), SVG2 Spec
• Extrapolated line join, SVG2 Spec
• Hash shading: SVG2 Spec
• Future work:
• Color Interpolation
• Connectors
• Screening filter primitive
• Flowed text
• Variable width strokes

WhatWG and W3C Documentation, etc.

• SVG 1.1 (Second Edition) (Recommendation).
• SVG 2 (Editor's Draft).
• HTML5 (Draft Standard, WhatWG).
• HTML5 (Editor's Draft, W3C).
• HTML 5 Reference (Editor's Draft).
• HTML: The Markup Language Reference (Editor's Draft).
• HTML5 differences from HTML4 (Editor's Draft).
• Polyglot Markup: HTML-Compatable XHTML Documents.
• Markup Validation Service.
• When can I use..., HTML5, CSS3, SVG compatability tables.

My SVG Examples

• ARIA Button. An example ARIA (Accessible Rich Internet Application) button derived from an example by Doug Schepers. There are very few good examples on the Web. This may or may not be a valid example.
• SVG Steam Engine Progress Bar: Embedded in HTML, Pure SVG Version. My entry in the fradulent Progress Bar competition. Winners have never been announced.
• SVG Gear Clocks: Simple, Complex.

SVG Examples From Other Sites

• IEBlog
• svgwow. Sophisticated demos.
• SVG Backgrounds from "A LIST apart".

My Talks

Use Page Down and Page Up to navigate. (SVG files using JessyInk.)

• Inkscape, SVG Open 2010.
• JessyInk demonstration.
• Inkscape, SVG Open 2011.
• Coons-Patch Mesh Gradients, SVG Open 2011.
• Inkscape, SVG Open 2012.
• SVG 2 for Artists, SVG Open 2012.
• The Future of SVG and Web Standards, Libre Graphics 2013.
• Inkscape Update, Libre Graphics 2013.
• SVG 2 for Artists, SVG Open 2013.
• SVG 2 for Artists, Libre Graphics 2014.
• SVG 2 for Artists and Developers, SVG Open 2014.