SVG Integration Module Level 1
Status: ED
Group: svg
Status Text: A document providing guidance how to reference SVG.
ED: https://svgwg.org/specs/integration/
Shortname: svg-integration
Level: 1
Ignored Terms: , , , , , , ,
Introduction
This section is informative.
SVG is a vector graphic markup language to express art work and to create interactive, content rich applications. The vector graphics is described by geometry primitives like <circle>, <rect> or <path>. Furthermore, SVG describes SVG resources like <linearGradient> and <pattern> but also <mask> and <filter>. SVG makes use of image references, stylesheets like CSS, allows scripting with JavaScript and declarative animations with CSS Transitions, CSS Animations and SVG Animations giving it its actual strength. Geometries, SVG resources, stylesheets and scripts can be modularized and referenced.
In the last years, user agents were confronted with several attacking patterns to reveal privacy data of users. These attacks lead to a new understanding of the protection of privacy for the web platform. This specification extends SVG with existing security mechanisms to protect the privacy of the user.
SVG can also be used in a lot of different situations. Some might not be suited for devices or use cases with special needs. The section "Available features by referencing mode" provides a guidance with several predefined modes that combine certain features.
Examples for different devices/use cases missing.
The specification is also meant to be a reference for all SVG elements, SVG attributes and CSS properties used or defined by all SVG recommendations.
Module interactions
This specification extends the W3C recommendations SVG 1.1 [[!SVG11]], SVG 1.2 Tiny [SVGT12] and future recommendations of SVG. Furthermore, this specification provides a security model for referencing SVG and is meant to be a normative reference for every host language embedding SVG.
Referencing modes
SVG is a markup language that can be fetched and displayed as a root document. Furthermore, it can also be referenced or embedded by another host language such as HTML. This following document referencing modes apply:
- SVG embedding mode
-
The SVG document is embedded in a nested browsing context of a host language such as the <iframe> tag or the <object> tag in HTML or integration points such as for the <embed> tag in HTML or the <foreignObject> element in SVG.
Note: The <object> tag treats external resources as either a nested browsing context or as an image. SVG documents are always treated as a nested browsing context.
Research the behavior on referencing SVG by <embed>. Is it less restrictive than <object>?
- Inline SVG mode
-
The host language can define an integration point to embed SVG as part of its own document. Scripts, styles and the global time line are shared between the document of the host language and the included SVG markup. Both, the SVG markup and the host languages markup share the same document context. Events, such as "onload" rely on the event handling of the host language.
Events might not depend on host language to fire onload event.
- SVG resource mode
- Stylesheets such as CSS can reference certain parts of an SVG document by fragment identifiers. Often these SVG documents need to be fetched to serve as a source of resources.
- SVG image mode
- A host language such as HTML or CSS can reference SVG documents as images.
Fetching
Fetching is the process of loading and processing requested resources. Depending on the used document referencing mode, one of the following fetching policies apply:
Add fetching modes based on the fetching algorithm from HTML5
SVG not tainting canvas all the time
Available features by referencing mode
SVG Elements, Attributes, and Properties
This is a comprehensive list of all SVG elements from the SVG 1.1 [[!SVG11]] and SVG Tiny 1.2 [SVGT12] specifications. This document will be updated as new elements are minted.
SVG Elements
Add all SVG elements and the usage in specs.
SVG Attributes
Add all SVG attribtues and the usage in specs.
Properties
Add all CSS properties defined by SVG specs.
Acknowledgments
Thanks to Erik Dahlström for the help, careful reviews, comments, and corrections.