Style SVG Elements With SVG Attributes

Handwritten by TVD

Should we style SVG elements with CSS?

Best practice is to style SVG elements using SVG attributes. This approach strengthens the separation between application View and application Components. It also adheres to the W3C SVG Spec, thereby providing the necessary stability required for cross-browser compatibility.

Our Gauges Look-and-Feel and Dynamic Updates

Some of you will have requirements or features where you may need to change your application’s look-and-feel on the fly. Best to leverage our JavaScript Gauges API and Raphael.js to handle cross browser, cross platform concerns.

If the entire application look-and-feel changes - Light to Dark for example. Use the set “method” to update a style property and “refresh” the gauge instance. E.g.

var knots = new Gauge("knots");
. . .
knots.set("baseColor", "#000000");
. . .
knots.refresh();

That will allow you to theme the application and still maintain browser and device flexibility because we strictly use SVG attributes to style SVG elements.

Modern Web Application Development

Modern web application development necessitates separation of concerns. Here, best practice is to use HTML5 to reinforce the meaning and structure of your application. CSS3 is very useful in defining our look-and-feel or presentation for human users. Together, this use of HTML and CSS forms the basis of semantic web application development.

Best Practice

Styling SVG elements basically works the same way as in regular HTML elements. SVG, in fact, shares some common properties with HTML as well. However, there are other properties that are intended specifically for SVG elements which have their own specification apart from CSS.

For example, in a regular HTML element, we can add a background color either with the “background-color” or the “background” CSS property. However, with an SVG element, it is a little bit different.

With an SVG element, the background color is specified with the “fill” property instead. Also, an SVG element’s border is specified with “stroke” property, not with the “border” property like we do in regular CSS. You can see the complete list of SVG element attributes on the W3C spec.

What this means for us as Developers is we need to apply CSS properties to style HTML elements and SVG attributes to style SVG elements. This is the cornerstone of the semantic web.

Following this best practice provides the necessary stability we need to succeed at cross-browser compatibility. Indeed, this strict adherence to semantic development is what allows us to build applications that run on Windows/Mac OSX Browsers, then turn around and run that very same application on an iPhone, iPad and Android.

discuss on twitter


every day thousands of developers use our charts & gauges to get the job done right

JavaScript Charts JavaScript Gauges JavaScript Flight Gauges


← return to all articles