SVG Native is an upcoming W3C specification and a narrow collection of the most commonly used primitives of SVG. This subset brings vector graphics to native applications and draws resolution independent icons or sharp color fonts like for OpenType-SVG fonts.
SVG stands for Scalable Vector Graphics and is a 2D vector graphics format primarily for the web. Beside drawing basic shapes like circles, rectangles or arbitrary paths, SVG consist of many features like:
- full styling support with CSS (Cascading Style Sheets),
- filter effects,
- image masking,
- loading of various resources,
- interactivity,
- events,
- scripting and
- animations.
Most features have been, since its original publication in 2001, adapted and integrated by web browsers. Some features migrated or evolved to other web technologies beyond SVG. Examples are CSS Transforms, CSS Animations, Filter Effects or CSS Masking which apply to SVG and HTML.
User interfaces for native applications have very strict requirements. Vector graphics need to be:
- performant: User interfaces are time critical. Vector graphics need to be processed and displayed fast.
- reliable User interfaces rely on stability (no crashes) and correct rendering everywhere. Vector graphics need to be simple enough.
- secure: User interfaces are information sensitive. Unlike browsers, applications may not have a sandbox. Therefore, vector graphics need to be isolated and self-contained.
The full specification of SVG does not fulfill these requirements. This is different from the very limited subset of SVG Native!
The new subset in SVG Native consists of the following categories and elements:
- Shapes:
<circle>,<ellipse>,<rect>,<path>,<polygon>,<polyline>,<line> - Groups:
<defs>,<g> - Information:
<desc>,<title> - Gradients:
<linearGradient>,<radialGradient>,<stop> - Clipping:
<clipPath>(with limitations)
The following presentation attributes/CSS properties are supported:
color,clip-rule,fill,fill-rule,fill-opacity,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,visibility,clip-path,display,opacity,stop-opacity,stop-color
The attributes defined for each of the listed elements may have the following attributes: id and style (with limitations).
Length units are limited to: px, pt, pc, cm, mm and in.
Theming supported with a strongly restricted version of CSS Custom Properties (var() on fill, stroke, color and stop-color) are under consideration.
In particular it means there is no support for:
- masking, filters,
- interactions, hit-testing, scripting or animations,
- styling with CSS with the exception of presentation attributes or the
styleattribute.
Note: At this point SVG Native is a draft proposal and changes may apply in the future.
Adobe uses vector icons in more and more of its products like Adobe Illustrator, Premier Pro or Audition as well. Icons use the same subset of features as SVG Native. To support the development of the specification, we at Adobe decided to open source our SVG parser and renderer for user interfaces.
We call the implementation SVG Native Viewer. You can download the source code and get the build instructions at GitHub: https://github.com/adobe/svg-native-viewer
SVG Native Viewer is a lightweight, C++ based library. We added support for different system rendering engines starting with CoreGraphics (Quartz 2D) and Skia. We plan to add more in the future.
SVG Native Viewer will adapt to changes to the SVG Native specification as it progresses.
SVG Native was designed as an export format to be processed by native platforms. SVG Native is neither accessible nor semantic. Do not use SVG Native for web content or as an interchange format between applications unless it is going to be processed by underlying platforms only.
The World Wide Web Consortium (W3C), which governs the SVG specification, introduced SVG 1.2 Tiny in 2008. SVG Tiny 1.2 is a subset of SVG with mobile devices and multimedia in mind. The media elements <video> and <audio>, the new graphical effects (vector effects) and the support for interactions and scripting makes it unsuitable for the use cases of SVG Native.
Here some links to other sources:
Other vector graphic formats with similar use cases:
- XAML overview (WPF) for Windows
- Vector drawables overview for Android
Typo: The subst in SVG Native.