Search code examples
htmlsvgw3cw3c-validationsvg-animate

SVG SMIL HTML5 Bad value `none` for attribute fill on element set

I've received a SVG SMIL file that I want to use within a HTML5 project. I'm not to familiar when using SVG SMIL files and upon opening the file I can see it's in XML format and I've done all necessary changes to get it working in HTML5, however it does not validate via W3C which I would like to fix.

The problem seems to be that using value:none fails the validation in HTML5, in fact its repeated 11 times as reported by w3c Bad value none for attribute fill on element set.. I'm hoping one of you bright sparks can point me in the right direction in solving this problem You can see my full code below.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Project</title>
</head>
<body>
<svg version="1.1" viewBox="0 0 2560 1440" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <mask id="canvasMask"><rect x="0" y="0" width="2560px" height="1440px" fill="#FFFFFF" stroke="none"/></mask>
    </defs>
    <rect fill="#ffffff" stroke="none" x="0" y="0" width="2560px" height="1440px"/>
    <g id="id9bd0d08a1535f0fee8058e02" mask="url(#canvasMask)">
        <image id="idf94d0269df15dd8365325749" xlink:href="http://www.example.com/placeholder.png" width="2560px" height="1440px" visibility="hidden">
            <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
            <animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="10s" repeatCount="1" fill="none" from="1279.999 715.999" to="1279.999 715.999" calcMode="discrete"/>
            <animateTransform attributeName="transform" type="scale" additive="sum" begin="0s; loop.end" dur="10s" repeatCount="1" fill="none" from="1.007112705842029 1.0059462593277573" to="1.007112705842029 1.0059462593277573" calcMode="discrete"/>
            <animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="10s" repeatCount="1" fill="none" from="-1280.0 -720.0" to="-1280.0 -720.0" calcMode="discrete"/>
        </image>
        <g id="id8dea74305ccf397f1904b8e7" visibility="hidden">
            <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
            <animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="3.5s" repeatCount="indefinite" fill="none" from="0.0 0.0" to="0.0 0.0" calcMode="discrete"/>
            <animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="3.5s" repeatCount="indefinite" fill="none" from="-0.0 -0.0" to="-0.0 -0.0" calcMode="discrete"/>
            <path id="idfabee4aa5eaa0c6e65db7ea4" d="M 1113.895,597.719 L 1112.895,597.719 L 1111.895,597.719 L 1109.895,597.719 L 1105.895,598.719 L 1101.895,600.719 L 1097.895,601.719 L 1085.895,605.719 L 1077.895,606.719 L 1068.895,607.719 L 1060.895,608.719 L 1051.895,610.719 L 1026.895,613.719 L 1013.895,615.719 L 998.895,618.719 L 985.895,621.719 L 972.895,625.719 L 960.895,628.719 L 942.895,636.719 L 938.895,639.719 L 934.895,643.719 L 932.895,645.719 L 929.895,648.719 L 928.895,654.719 L 928.895,656.719 L 928.895,659.719 L 929.895,664.719 L 930.895,666.719 L 932.895,668.719 L 935.895,672.719 L 950.895,690.719 L 964.895,702.719 L 988.895,722.719 L 997.895,728.719 L 1004.895,731.719 L 1015.895,737.719 L 1022.895,740.719 L 1030.895,743.719 L 1038.895,748.719 L 1048.895,751.719 L 1062.895,756.719 L 1075.895,760.719 L 1093.895,765.719 L 1109.895,771.719 L 1152.895,784.719 L 1190.895,798.719 L 1212.895,808.719 L 1230.895,814.719 L 1245.895,824.719 L 1258.895,830.719 L 1271.895,838.719 L 1308.895,871.719 L 1315.895,880.719 L 1319.895,887.719 L 1326.895,904.719 L 1328.895,912.719 L 1329.895,920.719 L 1328.895,928.719 L 1326.895,935.719 L 1322.895,944.719 L 1315.895,953.719 L 1306.895,964.719 L 1298.895,971.719 L 1288.895,980.719 L 1280.895,987.719 L 1243.895,1008.719 L 1206.895,1019.719 L 1180.895,1024.719 L 1146.895,1027.719 L 1115.895,1027.719 L 1081.895,1027.719 L 1049.895,1024.719 L 988.895,1011.719 L 957.895,1002.719 L 930.895,995.719 L 910.895,989.719 L 889.895,981.719 L 869.895,975.719 L 852.895,968.719 L 820.895,951.719 L 805.895,941.719 L 787.895,929.719 L 772.895,914.719 " style="fill: none; stroke: #f46a0f; stroke-width: 2.0; stroke-opacity: 1.0" visibility="hidden">
                <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
                <set attributeName="visibility" attributeType="CSS" to="hidden" begin="3.5s; loop.end + 3.5s" dur="6.5s" fill="freeze"/>
                <animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="997.636 795.5" to="1563.636 593.5"/>
                <animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="-1051.395 -812.719" to="-1051.395 -812.719" calcMode="discrete"/>
            </path>
            <path id="id182b2443fa479d88d6788af0" d="M 1026.895,472.719 C 955.895,814.719 809.895,964.719 1122.895,952.719 C 1435.895,940.719 1658.895,907.719 1467.895,772.719 C 1276.895,637.719 1271.895,584.719 1158.895,536.719 C 1045.895,488.719 1026.895,472.719 1026.895,472.719 M 1026.895,472.719 " style="fill: none; stroke: #f46a0f; stroke-width: 2.0; stroke-opacity: 1.0" visibility="hidden">
                <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
                <set attributeName="visibility" attributeType="CSS" to="hidden" begin="3.5s; loop.end + 3.5s" dur="6.5s" fill="freeze"/>
                <animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="1180.703 695.832" to="1746.703 493.832"/>
                <animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="-1234.463 -713.052" to="-1234.463 -713.052" calcMode="discrete"/>
            </path>
        </g>
    </g>
    <rect id="looper" x="0" y="0" width="1" height="1" style="fill: none; stroke: none"><set id="loop" attributeName="x" to="0" begin="0s; loop.end" dur="10s" fill="freeze"/></rect>
</svg>
</body>
</html>
Solution

  • W3C HTML5 validator maintainer here. As far as I can see, the validator is behaving as expected here and in line with the document-conformance requirements in the SVG spec. Because at http://www.w3.org/TR/SVG/animate.html#FillAttribute (and as noted in another answer) the SVG defines fill = "freeze" | "remove", so fill="none" isn't valid.

    And not knowing what you're trying to achieve with fill="none" in your code, I can't suggest a valid alternative… So maybe if you post another question explaining what you're trying to achieve, you can get some answers for what to replace fill="none" to get it.