Untitled

<html>
        <div style="margin: 1px, 1px; float: left; text-align: left; border-style: solid; display:flex; height: 100%; width: 100%; overflow-y: hidden; overflow-x: hidden; white-space: nowrap">

        <svg  width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block; position: relative; float:left">

            <image width="100%" height="100%" x="0px" y="0px" xlink:href="profilo.svg" style="display: block;"/>

            <g width="100%" height="100%" x="0px" y="0px" id="raccoltaNavi" style="display: inline-block; position: absolute; width: 100%; height: 100%">

                    <g transform="translate(75 75) rotate(45 37 9)" id="viaggio1_g">
                        <svg width="36px" height="18px" id="viaggio1" preserveAspectRatio="xMinYMin meet" viewBox="0 0 454.66666 110.66667">
                            <image x="0px" y="0px" width="100%" height="100%" cursor="pointer" xlink:href="nave.svg" />
                        </svg>
                    </g>

                    <g transform="rotate(10) translate(0 0)  scale(0.5 0.5)" id="viaggio2_g">
                        <svg width="38px" height="9px" id="viaggio2" preserveAspectRatio="xMinYMin meet" viewBox="0 0 454.66666 110.66667">
                            <image x="0px" y="0px" width="100%" height="100%" cursor="pointer" xlink:href="nave.svg" />
                        </svg>
                    </g>
            </g>

        </svg>
        </div>
</html>