[qtwebkit 5.4.2 - WEC7-x86] Unable to load svg image from file (*.svg)

VinayVerma

I was able to successfully build qtwebkit-5.4.2 for WEC7-x86. However while trying the webkit example browser (qtwebkit-examples\examples\webkitwidgets\browser), it is not able to load svg images with file as source (*.svg). Also, when I tried to insert the same svg inline, it loads fine. I also tried the Desktop (x86) build for qtwebkit-5.4.2 and it is able to load the attached html perfectly.

I tried searching if there is a known issue, but didn't find anything (some people have faced issues with incorrect height etc of svg).

Could someone please suggest a solution or possible approach to debug.

Thanks.

Below is the html used:

/<html>
<head>
    <title>Welcome</title>
    <style>
        body, button {
            margin: 0 auto;
            font-size: 40px;
            font-family: Tahoma, Verdana, Arial, sans-serif;
        }

        .backimage_svg {
            width: 155px;
            height: 155px;
            background-image: url("polygon.svg");
            background-color: rgb(255,255,204);
        }

        .backimage_png {
            width: 155px;
            height: 155px;
            background-image: url("polygon.png");
            background-color: rgb(255,204,204);
        }
    </style>
</head>
<body>
    <!-- [OK] Inline SVG -->
    <p style="background-color: yellow" id="test">
        <svg id="logomark" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155" onclick="xxx()">
            <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 " />
        </svg>
    </p>
    <p style="background-color: lime">
        <!-- [OK]  img element with PNG -->
        1<img src="polygon.png" border="1">
        <!-- [NG]  FancyBrowser fails to render SVG as img's source -->
        2<img src="polygon.svg" border="1">
        <!-- [OK]  PNG as background-image specified by CSS -->
        3<img class="backimage_png" border="1">
        <!-- [NG]  FancyBrowser fails to render SVG as background-image specified by CSS -->
        4<img class="backimage_svg" border="1">
    </p>
    <div class="backimage_svg">5</div>
    <div class="backimage_png">6</div>

    <button class="backimage_svg">7</button>
    <button>8<object class="backimage_svg"></object></button>
    <button>
        9<svg id="logomark" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155">
            <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 " />
        </svg>
    </button>
    <button class="backimage_png">10</button>
</body>
</html>

Below is the polygon.svg file:

<svg width="155" height="155" xmlns ="http://www.w3.org/2000/svg">
  <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 "/>
</svg>

Below are the screenshots when rendered on Desktop Vs WEC7 (qtwebkit-5.4.2 example browser):
Desktop:
0_1531200059268_DesktopFancyBrowserQt5.4.2.png

WEC7:
0_1531200089145_Wec7FancyBrowserQt5.4.2.png

VinayVerma

@VinayVerma UPDATE: I tried the qtsvg example (qtsvg\examples\svg\svgviewer) and it is able to load svg image from file source. It would be really helpful if someone could point me precisely to the code which is handling this part. I'll then try a comparison between WEC7 and Desktop code. Thanks.

Konstantin Tokarev

I guess SVG support is just disabled in your WEC build for the sole purpose of reducing binary size

VinayVerma

This post is deleted!

VinayVerma

@Konstantin-Tokarev Hi Konstantin,

Thanks for your quick reply. In case the SVG support is disabled, would it still be possible to display inline SVG images (the first polygon image above)?

Also, could you please suggest how to check if SVG support is enabled/disabled, and how to enable in case it is disabled.

Thanks.

Ashna

@VinayVerma Were you able to find a solution to the above problem? I am facing the exact same issue.