SVG colours on custom icons

Discussions about the preview versions of Virtual Radar Server.
Forum rules
Please bear in mind if you do install a preview version that it is unfinished code, there may be bugs, bits missing, things that don't work etc.

Posts in this forum will not show up in forum search results. Old threads will be pruned occasionally.
Post Reply
Posts: 65
Joined: Mon Aug 29, 2016 7:41 pm

SVG colours on custom icons

Post by UA4WIY » Sun Apr 30, 2017 6:58 am

In the priview version (01-JAN-2017 Plugins can now specify callback for setting SVG colours on custom icons.) the ability to change the colors in the SVG markers. Specify the way how to implement it.

Posts: 2249
Joined: Fri Feb 17, 2012 3:20 am

Re: SVG colours on custom icons

Post by agw » Sun May 07, 2017 4:09 pm

The SVG feature hasn't been finished yet, I'm still working on it.

If you want to override the non-selected and selected aircraft colours then you just need to override VRS.globalOptions.svgAircraftMarkerSelectedFill and VRS.globalOptions.svgAircraftMarkerNormalFill with CSS colours (e.g. '#ffff00'). That'll work for custom and stock aircraft markers.

The preview note is talking about configuring colours for custom markers. See this post for details on how to add an SVG marker:


To override the colours you need to add another field to the aircraft marker called svgFillColourCallback. The property should be a closure or a function that takes a VRS.Aircraft aircraft and a bool that indicates whether the aircraft has been selected by the user, and it should return the CSS colour that the SVG should be filled with.

The default declaration for it is:

Code: Select all

svgFillColourCallback:  function(aircraft, isSelected) { return isSelected ? VRS.globalOptions.svgAircraftMarkerSelectedFill : VRS.globalOptions.svgAircraftMarkerNormalFill; }
So for example, if you wanted it to be #00FF00 if it's below on the ground and not selected and #FFFF00 if it's on the ground and selected then you might do:

Code: Select all

svgFillColourCallback:  function(aircraft, isSelected) {
    if(aircraft.isOnGround.val) {
    	 return isSelected ? '#FFFF00' : '#00FF00';
    } else {
        return isSelected ? VRS.globalOptions.svgAircraftMarkerSelectedFill : VRS.globalOptions.svgAircraftMarkerNormalFill;
You cannot do that with stock aircraft markers yet but I am planning on supporting something similar for those.

Post Reply