
I'm looking to use SVG images instead of PNGs on my custom character sheet. Except, they don't seem to work. If I upload a PNG file to my github and use CSS in roll20 to place it as a background image, everything is good to go, but if i use the same code to place an SVG, it doesn't show.
Is SVG not supported on custom character sheets? Or am I missing something?
HTML:
<div>
<div>
<input type="radio" value="0" name="attr_npc_narr_xp" class="sheet-tri sheet-zero" checked/>
<span></span>
<input type="radio" value="1" name="attr_npc_narr_xp" class="sheet-tri sheet-xptri"/>
<span></span>
<input type="radio" value="2" name="attr_npc_narr_xp" class="sheet-tri sheet-xptri"/>
<span></span>
<input type="radio" value="3" name="attr_npc_narr_xp" class="sheet-tri sheet-xptri"/>
<span></span>
</div>
</div>
CSS:
WORKS:
/* white XP tri */
input.sheet-xptri[type=checkbox] + span,
input.sheet-xptri:checked ~ input.sheet-xptri[type=radio] + span,
input.sheet-xptri:checked ~ input.sheet-xptri[type=radio] + span {
background-image: url(https://raw.githubusercontent.com/haushalter/VigorRPG/master/xp-tri-small-0.png);
}
DOESN'T WORK:
/* white XP tri */
input.sheet-xptri[type=checkbox] + span,
input.sheet-xptri:checked ~ input.sheet-xptri[type=radio] + span,
input.sheet-xptri:checked ~ input.sheet-xptri[type=radio] + span {
background-image: url(https://raw.githubusercontent.com/haushalter/VigorRPG/master/xp-tri-small-0.svg);
}
Is SVG not supported on custom character sheets? Or am I missing something?
HTML:
<div>
<div>
<input type="radio" value="0" name="attr_npc_narr_xp" class="sheet-tri sheet-zero" checked/>
<span></span>
<input type="radio" value="1" name="attr_npc_narr_xp" class="sheet-tri sheet-xptri"/>
<span></span>
<input type="radio" value="2" name="attr_npc_narr_xp" class="sheet-tri sheet-xptri"/>
<span></span>
<input type="radio" value="3" name="attr_npc_narr_xp" class="sheet-tri sheet-xptri"/>
<span></span>
</div>
</div>
CSS:
WORKS:
/* white XP tri */
input.sheet-xptri[type=checkbox] + span,
input.sheet-xptri:checked ~ input.sheet-xptri[type=radio] + span,
input.sheet-xptri:checked ~ input.sheet-xptri[type=radio] + span {
background-image: url(https://raw.githubusercontent.com/haushalter/VigorRPG/master/xp-tri-small-0.png);
}
DOESN'T WORK:
/* white XP tri */
input.sheet-xptri[type=checkbox] + span,
input.sheet-xptri:checked ~ input.sheet-xptri[type=radio] + span,
input.sheet-xptri:checked ~ input.sheet-xptri[type=radio] + span {
background-image: url(https://raw.githubusercontent.com/haushalter/VigorRPG/master/xp-tri-small-0.svg);
}