Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

Control Default SVG fill colors

Level 8

Control Default SVG fill colors

Hi there,


I wonder is it possible to control Default SVG fill colors via CSS codes in STYLE\Application panel?

If I want to asign orange to resources/Default/vu_seq_play.svg <circle class="base">.

Is it possible?


Any reply would be appreciated.



Tags (2)

Re: Control Default SVG fill colors

@dsgnrClarK  I believe we cannot can change the style of SVG from CSS codes in STYLE\Application panel.  However, will check internally and review if there is a way.



Re: Control Default SVG fill colors

I was googleing this the other day and what i saw indicated that the only was to do this was to use JS to modify the svg data to change the color. Here is a thread discussing this;

Re: Control Default SVG fill colors



I have done the same thing by googling and find the same thread.


I have checked and started to investigate about this 2 days ago.

It is very tricky!


Let's me explain the various solutions and results in Vuforia Studio.


1. Solution A: Use a CSS stylesheet.


It cannot work because in Preview or in Vuforia View, Image Widget is an img HTML tag.

svg is embedded inside it.

To have a CSS who can modify svg image, it should that this svg is present as a svg tag in HTML page.


I didn't find a find to insert a svg like that in Vuforia Studio.


Strange behavior when using a CSS like that to an Image Widget and enter svg-icon in Class field :


.svg-icon {
  filter: invert(1);



Colors of svg are inverted as expected.


2. Solution B:

    It is in working in progress in my side.

    When running app, changing img tag to svg.


    a) Load this javascript library in Vuforia Studio in Resources :

         It can do the conversion from img to svg tag

    b) In javascript code:

        - Load the javascript library

        - Add an event on load web page to apply that on right img id.



$scope.SVGInject = function(obj) {

$scope.imageOnLoad = function(obj) {

if (window.event.path[0].tagName=='img')


     Saddly, this code doesn't report no error or warning.

     It seems like event is not fired.


     - After that, a CSS stylesheet will be enought to change the fill attribute of path tag in svg.


3. Use build-in angular solution about that:

    I have found this web page about that.


    I didn't dig up more about this solution.

    It is the best if it is needed to update in many colors the svg with values from Widgets and values entered by end-usr. 


Best regards,