SVG Native: Open Sourcing SVG Native Viewer

Dirk Schulze
Apr 24, 2019 · 3 min read

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.

What is SVG?

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 consists of many features like:

Most features have been, since its original publication in 2001, adopted 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.

SVG Native

However, user interfaces for native applications have very strict requirements. Vector graphics need to be:

  1. performant: User interfaces are time critical. Vector graphics need to be processed and displayed fast.
  2. reliable User interfaces rely on stability (no crashes) and correct rendering everywhere. Vector graphics need to be simple enough.
  3. 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 subset in SVG Native

The new subset in SVG Native consists of the following categories and elements:

The following presentation attributes/CSS properties are supported:

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:

Note: At this point SVG Native is a draft proposal and changes may apply in the future.

Open sourcing SVG Native Viewer

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.

When to use SVG Native and when not?

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.

Differences to SVG Tiny 1.2

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.

Other Resources

Here some links to other sources:

Other vector graphic formats with similar use cases:

Follow the Adobe Tech Blog for more developer stories and resources, and check out Adobe Developers on Twitter for the latest news and developer products.

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store