New SVG spec irons out overlaps with HTML, CSS

SVG (Scalable Vector Graphics), the stalwart XML-based language for describing 2D vector graphics, is getting a renewal, with an upgrade focused on closer alignment with HTML and CSS.

The World Wide Web Consortium has authored SVG 2, which is now feature-complete. It’s moving to a security review phase en route to becoming a formal standard.

“Some features of SVG 2 are already available in browsers today,” said Doug Schepers, W3C staff contact for SVG 2 Working Group. “We hope to have broad support in browsers and authoring tools in Q1 2017.”

Improved harmony with HTML and CSS is on SVG 2’s long list of features. Developed in parallel with HTML and CSS, SVG has had overlapping but slightly different features or keywords as these other two W3C technologies, Schepers said. “For SVG 2, we’ve identified and harmonized those overlaps, making SVG match the same behavior as HTML or CSS.” For example, SVG used an XLink feature for some attributes that always tripped up authors, he said. This made SVG different and harder to author than HTML. XLink has been eliminated in SVG 2.

“In other cases, we’ve seen features that started in SVG that were useful for CSS or HTML, like gradients or transforms, and we’ve spread those features out to be used outside SVG, unifying them with CSS and taking them out of the core SVG 2 spec,” Schepers noted.

W3C also taken a major step to allow almost all SVG geometry properties to be described as CSS properties. Authors can use whichever syntax they prefer and can animate or dynamically generate SVG geometry through CSS. SVG 2 also features text-wrapping using standard CSS text layout algorithms, which saves authors from having to manually lay out static lines of text.

SVG 2 includes the z-index style property, which allows authors to separate out logical document placement with rendering order. For example, each text label could be grouped with the element they are labeling, but be rendered on a virtual layer above all the graphics, said Schepers. Nonscaling strokes, meanwhile, will allow users to zoom in on an element like a map pin without the stroke outline growing to distort the shape.

Elements added in SVG 2 offer such capabilities as defining two-dimensional gradients with arbitrary shapes. New elements, Schepers said, enable smoother, more seamless fill patterns for more interesting shape backgrounds that scale well with smaller file sizes.

Version 2 also deprecates some features not universally supported in browsers. These include SVG Fonts and SMIL (Synchronized Multimedia Integration Language) animation. SVG Fonts was replaced by the SVG table allowed in the OpenType font specification, while SMIL was replaced by declarative animation in CSS or scripted animation.

Schepers stressed that SVG, which dates back to the late 1990s, remains vital. “SVG is already essential to the functioning of many popular sites, such as The New York Times and many other news sites, which use SVG for interactive data visualizations,” he said. “It’s also increasingly important for responsive mobile sites. As browser performance and consistency improves, more sites are relying on SVG, and this is the focus of SVG 2.” He added that in recent years, Canvas usage has decreased in favor of SVG, and with Flash increasingly deprecated, authors have turned to SVG along with CSS and HTML.