Embedded svgs are hidden

[mlhoutel]

Summary of your problem or feature request

Svgs embedded in the main frame are not displayed.

The global style from the containing html file will be applied on each embedded svg and hide them.

The responsible style: src/templates/player.html l.25

svg {
    display: none;
}

Why use embedded svgs ?

The usage of embedded svgs (instead of <image> with reference) is required in order to make them interactive (as a link for instance).

The current solution to make them appear is for the user to manually overwrite the style:

• In each embedded svg (style="display: block;")
• In the root svg (<style> svg { display: block; } </style>)

Version of Sozi and other relevant software

• Which version of Sozi are you using? v22.03.25
• Which drawing software did you use? Inkscape 0.92.2 (5c3e80d, 2017-08-06)
• On which platform? CentOs7 x64
• If your problem happens when playing a presentation, which browsers have you tried? Firefox 91.10.0esr (64-bit), Chromium 102.0.5005.115 (64-bit)

Steps to reproduce the problem

1. Create a simple svg file containing an embedded svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle>
    </svg>
</svg>

2. Open the created svg file in sozi
3. Save the sozi project
4. Open the generated html file in a web browser

Expected behavior

Embedded svgs should appear normally.

Observed behavior

They are currently hidden.

Hints and solutions (optional)

The main frame should already be hidden during the loading, thanks to the sozi-blank-screen overlay z-index (src/templates/player.html l.98).

If we want to prevent the main frame to appear briefly before the loading screen on low config/for heavy svg file, we could specify the CSS selector to target only the svgs at the root, as such:

body > svg {
    display: none;
} 

[mlhoutel]

Thanks