Animations are not working after building svgstore

[rbirbeck]

I recently migrated our grunt/browserify/grunt-svgstore project to webpackge/webpack-svgstore-plugin.

Everything is working great, except that the animations that we previously embedded in to our SVGs no longer animate. The initial SVG renders and then no movement.

It appears as if something is happening to the SVG structure after it is run through the svgstore plugin. Here is the source SVG file:

<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title desc" role="img" fill="AAAAAA">
    <title>
        Loading Spinner Animated
    </title>
    <desc>
        This is an animated loading spinner, all animation is within the SVG.
    </desc>
    <path d="M5.386 19.817c-.584 4.44.595 8.84 3.32 12.39 5.628 7.333 16.172 8.722 23.504 3.095 7.332-5.628 8.72-16.173 3.093-23.504-3.57-4.65-9.406-7.12-15.238-6.447-.264.028-.51-.16-.54-.428-.03-.267.16-.51.43-.54 6.166-.707 12.345 1.902 16.12 6.822 5.956 7.76 4.488 18.917-3.27 24.87-3.215 2.467-7.01 3.66-10.78 3.66-5.33 0-10.604-2.385-14.092-6.932C5.048 29.042 3.8 24.386 4.42 19.69c.595-4.532 2.86-8.578 6.392-11.447H5.57c-.27 0-.488-.22-.488-.488 0-.27.218-.488.487-.488h6.678c.27 0 .488.218.488.488v6.68c0 .27-.218.487-.488.487s-.488-.217-.488-.488V8.737c-3.53 2.724-5.792 6.657-6.374 11.08z">
        <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 22 22"
                to="360 22 22"
                dur="3s"
                repeatCount="indefinite" />
    </path>
</svg>

Previously this was creating a an SVG store that looked this using https://github.com/FWeinb/grunt-svgstore:

<svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" style="display: none;" cleanup="true">
    <symbol role="img" aria-labelledby="title desc" viewBox="0 0 44 44" id="icon-loading-animated">
        <title>Loading Spinner Animated</title>
        <desc>This is an animated loading spinner, all animation is within the SVG.</desc>
        <path d="M5.386 19.817c-.584 4.44.595 8.84 3.32 12.39 5.628 7.333 16.172 8.722 23.504 3.095 7.332-5.628 8.72-16.173 3.093-23.504-3.57-4.65-9.406-7.12-15.238-6.447-.264.028-.51-.16-.54-.428-.03-.267.16-.51.43-.54 6.166-.707 12.345 1.902 16.12 6.822 5.956 7.76 4.488 18.917-3.27 24.87-3.215 2.467-7.01 3.66-10.78 3.66-5.33 0-10.604-2.385-14.092-6.932C5.048 29.042 3.8 24.386 4.42 19.69c.595-4.532 2.86-8.578 6.392-11.447H5.57c-.27 0-.488-.22-.488-.488 0-.27.218-.488.487-.488h6.678c.27 0 .488.218.488.488v6.68c0 .27-.218.487-.488.487s-.488-.217-.488-.488V8.737c-3.53 2.724-5.792 6.657-6.374 11.08z">
            <animateTransform attributeName="transform" type="rotate" from="0 22 22" to="360 22 22" dur="3s"
                              repeatCount="indefinite"/>
        </path>
    </symbol>
</svg>

Using the webpack-svgstore-plugin the generated SVG looks like this:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" viewBox="0 0 44 44" cleanup="false">
<symbol viewBox="0 0 44 44" id="icon-loading-animated">
    <desc>This is an animated loading spinner, all animation is within the SVG.</desc>
    <path d="M5.386 19.817c-.584 4.44.595 8.84 3.32 12.39 5.628 7.333 16.172 8.722 23.504 3.095 7.332-5.628 8.72-16.173 3.093-23.504-3.57-4.65-9.406-7.12-15.238-6.447a.487.487 0 0 1-.11-.967c6.166-.706 12.345 1.903 16.12 6.823 5.956 7.76 4.488 18.917-3.27 24.87a17.648 17.648 0 0 1-10.78 3.66c-5.33 0-10.604-2.385-14.092-6.932A17.615 17.615 0 0 1 4.42 19.69a17.61 17.61 0 0 1 6.392-11.447H5.57a.49.49 0 0 1 0-.976h6.677c.27 0 .488.218.488.488v6.68c0 .27-.218.487-.488.487s-.488-.217-.488-.488V8.737a16.645 16.645 0 0 0-6.376 11.08z"></path>
    <animateTransform attributeName="transform" type="rotate" from="0 22 22" to="360 22 22" dur="3s"
                      repeatCount="indefinite"></animateTransform>
</symbol>
</svg>

As you can see the animateTransform element has been moved to a sibling of the path element.

Here is the config in webpack.config.js:

{
    ...
        plugins: [
            new SvgStore( path.join( 'app', 'svg', '*.min.svg' ), path.join( '..', 'svg' ), {
                name: 'concierge-icons.svg',
                svg: {
                    viewBox: '0 0 44 44',
                    style: 'display: none;',
                    cleanup: 'false'
                }
            } ),
    ...
}

Am I doing something obviously wrong?

[lgordey]

@rbirbeck Try to use plugin version from branch https://github.com/lgordey/webpack-svgstore-plugin/tree/feature/activate-xmlmode Is it works for you?

And about your config example.

You can pass only xmlns and style options in svg object. You don't need to set viewBox, because you have it in your svg source. And if you want to pass some svgo options (cleanup), you can make it through svgoOptions:

svgoOptions: {
  // here
}

[rbirbeck]

@lgordey - this is much better!

I am seeing this issue now, and please let me know if this is the intended functionality, for the same svg I copied above the compiled SVG store asset looks like:

<symbol id="icon-loading-animated">
    <desc><![CDATA[This is an animated loading spinner, all animation is within the SVG.]]></desc>
    <path d="M5.386 19.817c-.584 4.44.595 8.84 3.32 12.39 5.628 7.333 16.172 8.722 23.504 3.095 7.332-5.628 8.72-16.173 3.093-23.504-3.57-4.65-9.406-7.12-15.238-6.447a.487.487 0 0 1-.11-.967c6.166-.706 12.345 1.903 16.12 6.823 5.956 7.76 4.488 18.917-3.27 24.87a17.648 17.648 0 0 1-10.78 3.66c-5.33 0-10.604-2.385-14.092-6.932A17.615 17.615 0 0 1 4.42 19.69a17.61 17.61 0 0 1 6.392-11.447H5.57a.49.49 0 0 1 0-.976h6.677c.27 0 .488.218.488.488v6.68c0 .27-.218.487-.488.487s-.488-.217-.488-.488V8.737a16.645 16.645 0 0 0-6.376 11.08z">
        <animateTransform attributeName="transform" type="rotate" from="0 22 22" to="360 22 22" dur="3s"
                          repeatCount="indefinite"></animateTransform>
    </path>
</symbol>

So we can see that the animateTransform element is in the correct place, however my viewBox attribute has been stripped.

[lgordey]

@rbirbeck I fix moment with viewBox in the same branch, try it, now it should work.

So we need to make some tests and I think you will see this changes in next release.

[rbirbeck]

That did it. Thanks, @lgordey.

Any idea when the next release might ship?

[rbirbeck]

@lgordey - hey, just checking in on this, would it be helpful if our team wrote some unit test coverage for this issue?

[lgordey]

@rbirbeck Sure, it will be great!

And about next release, I hope we will make it tomorrow night. Just need to test some cases.

[lgordey]

@rbirbeck Hi! Try 2.1.3 plugin version.