SVG Overlay and positioning question?

[TW Tones]

Folks,

I have a tiddler containing the following

<span style="position: absolute;">{{$:/core/images/home-button}}</span><span style="position: relative;">{{$:/core/images/close-others-button}}</span>

The result in the Home icon is overlaid with the close all "target" icon.

Without modifying the svgs is there a way to double the size of the home icon (or shrink the close all icon)  and have the close all icon centred inside the house?

Thanks in advance

Tony

[Mat]

Yes. You need to add a class to the span because you'll target the svg. So the general idea is:

<span class="foo">{{mysvgtiddler}}</span>

<style>
.foo svg {width:...; height:...;}
</style>

You mention "double the size" and it seems simple enough to use e.g "200%" then but % here is relative to the outer frame which is not the image. So you might have to specify in static measure units. You could also wrap both spans in a div and control its size.

<:-)