I am trying to add SVG animations generator to http://preloaders.net project, everything is fine but the Internet Explorer problem - it does not support simple <animateTransform>, so I have to include a JS library inside an svg file that solves this problem, but I am trying to make the final SVG image as optimum as possible so I need that library to include the JS file for IE only. I am new to SVG and I couldn't find any solution for the standalone SVG files. I need something like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.0"
width="128"
height="128"
viewBox="0 0 128 128"
xml:space="preserve">
<!--[if IE]>
<script type="text/ecmascript" xlink:href="smilIE.js"/>
<![endif]-->
<defs>
<style>
.cls-1 {
fill: #1cd3a2;
fill-rule: evenodd;
}
</style>
</defs>
<g>
<path id="Spinners_AJAX_loaders" data-name="Spinners AJAX loaders" class="cls-1" d="M118.748,57.281a11.55,11.55,0,0,0-8.437-3.576,11.994,11.994,0,0,0-11.89,11.926,11.88,11.88,0,0,0,11.89,11.858,11.533,11.533,0,0,0,8.437-3.508A11.675,11.675,0,0,0,118.748,57.281ZM95.928,88.449a10.466,10.466,0,0,0-7.734,3.128,10.2,10.2,0,0,0-3.131,7.574,10.561,10.561,0,0,0,3.131,7.725,10.431,10.431,0,0,0,7.734,3.113,10.318,10.318,0,0,0,7.607-3.113,10.518,10.518,0,0,0,3.261-7.725,10.16,10.16,0,0,0-3.261-7.574A10.356,10.356,0,0,0,95.928,88.449Zm1.6-42.645a13.072,13.072,0,0,0,12.976-13,13.007,13.007,0,1,0-26.014,0A13.07,13.07,0,0,0,97.526,45.8ZM62.178,102.28a9.329,9.329,0,0,0-6.9,2.868,9.5,9.5,0,0,0-2.813,6.949,9.2,9.2,0,0,0,2.813,6.813,9.87,9.87,0,0,0,13.805,0,9.191,9.191,0,0,0,2.876-6.813,9.573,9.573,0,0,0-2.876-7.017A9.4,9.4,0,0,0,62.178,102.28Zm0-97.081a13.6,13.6,0,0,0-9.971,4.079,13.379,13.379,0,0,0-4.089,9.887,13.651,13.651,0,0,0,4.089,10.008,14.225,14.225,0,0,0,19.943,0A13.712,13.712,0,0,0,76.3,19.165,13.439,13.439,0,0,0,72.15,9.278,13.606,13.606,0,0,0,62.178,5.2ZM28.492,39.236a6.314,6.314,0,0,0,4.6-1.849,6.513,6.513,0,0,0,0-9.234,6.571,6.571,0,0,0-9.14,0A6.466,6.466,0,0,0,28.492,39.236Zm0,50.546a8.571,8.571,0,0,0-6.135,2.624A7.99,7.99,0,0,0,19.8,98.39a8.292,8.292,0,0,0,2.558,6.119,8.516,8.516,0,0,0,12.272,0,8.3,8.3,0,0,0,2.556-6.119,7.989,7.989,0,0,0-2.556-5.983A8.574,8.574,0,0,0,28.492,89.782ZM18.65,60.273a7.2,7.2,0,0,0-5.307-2.23,7.481,7.481,0,0,0-5.434,2.23,7.257,7.257,0,0,0-2.172,5.358,7.428,7.428,0,0,0,7.606,7.587,7.151,7.151,0,0,0,5.307-2.175,7.463,7.463,0,0,0,2.237-5.412A7.319,7.319,0,0,0,18.65,60.273Z"/>
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="4s" repeatCount="indefinite"></animateTransform>
</g>
</svg>
The part is usual workaround for HTML, but is there such thing for SVG? I could do some JS coding that would include the file, but I was wondering if there is a "short code" solution.
Thanks in advance.
Theoretically you could have useed the switch-element and the requiredFeatures attribute for this. But unfortunately you can't.
https://bugs.chromium.org/p/chromium/issues/detail?id=682228
EDIT
this does not really work since all other browsers do support switch and requiredFeatures, but do not bypass the child elements. All but the first elements are not rendered, but script elements will run anyways. I think thats against the spec...
EDIT 2
This has been "clarified" in SVG2:
"conditional processing will have no effect on never-rendered elements; in particular, conditional processing does not affect the processing of a ‘style’ or ‘script’ element."
https://svgwg.org/svg2-draft/struct.html#ConditionalProcessing
FWIW, I don't think the intention in 1.1 was for s to be "switchable" since they are not "rendered" / part of the rendering tree. Seeing that there's interoperable behavior here and that behavior is specced, I will have to call this WontFix. Sorry.
So this will not work :-( you will have to resort to using a scripted solution...
I will leave the answer here for documentation purpose...
The ‘switch’ element evaluates the ‘requiredFeatures’, ‘requiredExtensions’ and ‘systemLanguage’ attributes on its direct child elements in order, and then processes and renders the first child for which these attributes evaluate to true. All others will be bypassed and therefore not rendered.
So have a g-element with requiredFeatures="http://www.w3.org/TR/SVG11/feature#Animation" as first Element inside a switch and a script-element as second element. The first Element should be true for all clients supporting SMIL, the second for all others...
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="128" height="128" viewBox="0 0 128 128">
<switch>
<g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Animation">
<text y="20">Animation</text>
<script>
alert("animation")
</script>
</g>
<g>
<text y="40">No Animation</text>
<script>
alert("no animation")
</script>
</g>
<defs>
<style>
.cls-1 {
fill: #1cd3a2;
fill-rule: evenodd;
}
</style>
</defs>
<g>
<path id="Spinners_AJAX_loaders" data-name="Spinners AJAX loaders" class="cls-1" d="M118.748,57.281a11.55,11.55,0,0,0-8.437-3.576,11.994,11.994,0,0,0-11.89,11.926,11.88,11.88,0,0,0,11.89,11.858,11.533,11.533,0,0,0,8.437-3.508A11.675,11.675,0,0,0,118.748,57.281ZM95.928,88.449a10.466,10.466,0,0,0-7.734,3.128,10.2,10.2,0,0,0-3.131,7.574,10.561,10.561,0,0,0,3.131,7.725,10.431,10.431,0,0,0,7.734,3.113,10.318,10.318,0,0,0,7.607-3.113,10.518,10.518,0,0,0,3.261-7.725,10.16,10.16,0,0,0-3.261-7.574A10.356,10.356,0,0,0,95.928,88.449Zm1.6-42.645a13.072,13.072,0,0,0,12.976-13,13.007,13.007,0,1,0-26.014,0A13.07,13.07,0,0,0,97.526,45.8ZM62.178,102.28a9.329,9.329,0,0,0-6.9,2.868,9.5,9.5,0,0,0-2.813,6.949,9.2,9.2,0,0,0,2.813,6.813,9.87,9.87,0,0,0,13.805,0,9.191,9.191,0,0,0,2.876-6.813,9.573,9.573,0,0,0-2.876-7.017A9.4,9.4,0,0,0,62.178,102.28Zm0-97.081a13.6,13.6,0,0,0-9.971,4.079,13.379,13.379,0,0,0-4.089,9.887,13.651,13.651,0,0,0,4.089,10.008,14.225,14.225,0,0,0,19.943,0A13.712,13.712,0,0,0,76.3,19.165,13.439,13.439,0,0,0,72.15,9.278,13.606,13.606,0,0,0,62.178,5.2ZM28.492,39.236a6.314,6.314,0,0,0,4.6-1.849,6.513,6.513,0,0,0,0-9.234,6.571,6.571,0,0,0-9.14,0A6.466,6.466,0,0,0,28.492,39.236Zm0,50.546a8.571,8.571,0,0,0-6.135,2.624A7.99,7.99,0,0,0,19.8,98.39a8.292,8.292,0,0,0,2.558,6.119,8.516,8.516,0,0,0,12.272,0,8.3,8.3,0,0,0,2.556-6.119,7.989,7.989,0,0,0-2.556-5.983A8.574,8.574,0,0,0,28.492,89.782ZM18.65,60.273a7.2,7.2,0,0,0-5.307-2.23,7.481,7.481,0,0,0-5.434,2.23,7.257,7.257,0,0,0-2.172,5.358,7.428,7.428,0,0,0,7.606,7.587,7.151,7.151,0,0,0,5.307-2.175,7.463,7.463,0,0,0,2.237-5.412A7.319,7.319,0,0,0,18.65,60.273Z"
/>
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="4s" repeatCount="indefinite"></animateTransform>
</g>
</svg>