Resources for using SVG in HTML
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.
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:
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
Use Page Down and Page Up to navigate. (SVG files using JessyInk.)