I'm creating SVG loading animations that needs to be displayed on the front end whenever a web page is loading or being requested, however I don't know what would be the best solution to calling in a range of SVG animations would be.
I know I could store an SVG on a CDN and request the image that way
and I know I can store the SVG raw script in the HTML as well, but my SVG animations need to be reusable under different circumstances, for example I want it to be small the size of a button or full page with a white background etc.
My idea is storing a range of raw SVG's like a sprite sheet in a html document wrapped in and classes for all different circumstances, e.g. one sized small, one sized big, one with a white background etc etc, and then make a query that yields in these different types of SVG animations when needed. But I feel this is completely wrong, can anyone help and point me in the right direction?
Thank you for your time.
答案 0 :(得分：1)
There are a few ways you could go about this.
Save your SVG file as an individual .svg file and include that wherever you need it <img src="/path/to/animation.svg" />.
Store the SVGs in a sprite and include that in your document. It has to be included BEFORE you actually want to use the sprite, otherwise Internet Explorer will not be happy. Or use a polyfill.
This can be broken down into two separate ways also, inline and external.
Just spit the raw SVG code out into the page template and reference the sprite <svg xlink:href="#svganimation"></svg>.
Very similar to above, but you store the SVG in a separate file and reference the sprite <svg xlink:href="/path/to/sprite.svg#animation></svg>.
The downsides of these techniques is that you have no control over the styling of the sprite with CSS, and all animations will have to be done either in the SVG file itself, or with JS.
Use a templating language and include the raw SVG code wherever you need it. You get the ability to animate and style using CSS, but lose the caching advantage.
There is nothing inherently wrong with any technique, but for larger animations, having a sprite sheet might become unwieldy to manage, and you will be loading a larger file for potentially no reason, so you lose some caching advantage. It's more useful for icons. Using completely inline SVGs lose any browser caching, but you gain the ease of animation via CSS.