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
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.
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.
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.