A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.
To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).
SVG and (X)HTML: Difference between revisions
Jump to navigation
Jump to search
(New page: The way to do vector graphics on the Web is SVG. Per http://lists.w3.org/Archives/Public/public-html/2007Nov/0487.html there are numerous ways to use SVG together with (X)HTML: # For an ...) |
m (typo) |
||
| Line 6: | Line 6: | ||
# For an SVG document that is a purely presentational decuration, referencing as a CSS background image is suitable (this is supported in experimental builds of Opera and Safari). | # For an SVG document that is a purely presentational decuration, referencing as a CSS background image is suitable (this is supported in experimental builds of Opera and Safari). | ||
# For an SVG document that supports rich interaction (and has more application-like properties) or that requires scripting interaction between the containing HTML document and the SVG, either <object> or <iframe> is suitable. This works today in the latest shipping versions of Safari, Opera and Firefox. <object> even works in IE with a suitable plugin installed. | # For an SVG document that supports rich interaction (and has more application-like properties) or that requires scripting interaction between the containing HTML document and the SVG, either <object> or <iframe> is suitable. This works today in the latest shipping versions of Safari, Opera and Firefox. <object> even works in IE with a suitable plugin installed. | ||
# In XHTML, the <svg> element in the SVG namespace is a suitable way to embed any kind of inline SVG | # In XHTML, the <svg> element in the SVG namespace is a suitable way to embed any kind of inline SVG directly in the same document. Many are working on a design to let this work in HTML as well. | ||
# In both Classic and XML serializations of HTML, SVG content can be dynamically generated by script and inserted into the DOM at runtime, with an svg:svg element as root. This is perhaps closest to the way <canvas> operates. This is supported by Safari, Opera and Firefox and is used by popular JavaScript libraries, such as the Dojo charting toolkit. | # In both Classic and XML serializations of HTML, SVG content can be dynamically generated by script and inserted into the DOM at runtime, with an svg:svg element as root. This is perhaps closest to the way <canvas> operates. This is supported by Safari, Opera and Firefox and is used by popular JavaScript libraries, such as the Dojo charting toolkit. | ||
Revision as of 17:02, 25 March 2008
The way to do vector graphics on the Web is SVG.
Per http://lists.w3.org/Archives/Public/public-html/2007Nov/0487.html there are numerous ways to use SVG together with (X)HTML:
- For an SVG document that is an image or animated image, without interaction, embedding in <img> is suitable (this is supported in experimental builds of Opera and Safari).
- For an SVG document that is a purely presentational decuration, referencing as a CSS background image is suitable (this is supported in experimental builds of Opera and Safari).
- For an SVG document that supports rich interaction (and has more application-like properties) or that requires scripting interaction between the containing HTML document and the SVG, either <object> or <iframe> is suitable. This works today in the latest shipping versions of Safari, Opera and Firefox. <object> even works in IE with a suitable plugin installed.
- In XHTML, the <svg> element in the SVG namespace is a suitable way to embed any kind of inline SVG directly in the same document. Many are working on a design to let this work in HTML as well.
- In both Classic and XML serializations of HTML, SVG content can be dynamically generated by script and inserted into the DOM at runtime, with an svg:svg element as root. This is perhaps closest to the way <canvas> operates. This is supported by Safari, Opera and Firefox and is used by popular JavaScript libraries, such as the Dojo charting toolkit.