A small star that turns beside a stationary label can draw attention without moving the entire illustration. Animation in an SVG can target just that star, leaving the rest of the artwork in place. A moving SVG graphic also stays scalable, making it useful for an interface icon or a decorative web illustration.
The essential connection is simple: give the element a name, then point an animation at that name. The example below uses CSS inside a standalone SVG, so you can save one file and open it in a browser to see the result.
Animated SVG: Build a Small Example
Copy the following into a plain-text file named star.svg. Open it in a modern browser. A gold star should rotate slowly inside a dark circle; the circle remains still.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"
role="img" aria-label="A rotating gold star inside a circle">
<style>
.star {
transform-box: fill-box;
transform-origin: center;
animation: spin 4s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.star { animation: none; }
}
</style>
<circle cx="60" cy="60" r="52" fill="#172b4d" />
<path class="star" fill="#ffd166"
d="M60 25 L68 48 L92 48 L72 63 L80 87
L60 73 L40 87 L48 63 L28 48 L52 48 Z" />
</svg>
The viewBox establishes a 120-by-120 coordinate system. The circle and path are separate elements, so styling the path does not rotate the background. The path’s class="star" connects it to the .star CSS rule. The keyframes named spin define the end of a full turn; the animation property sets its duration, steady timing, and repetition.
transform-box: fill-box makes the star’s own bounds the reference for its centered rotation. Without the intended origin, an element can orbit around an unexpected point. The reduced-motion rule stops the spin when the browser receives that user preference, leaving the star visible. See MDN’s transform-box explanation for how the reference box affects the pivot.
Apply the idea to your own artwork
Open a copy of your vector in a text editor or export a fresh SVG from your design application. Identify the element you want to move. It might be a path, a circle, or a group <g> containing several shapes. Assign it a descriptive class, then add a matching CSS rule and keyframes. Keep the original design file so you can revise the illustration separately.
If the art has several pieces that should move as one, group them and apply the transform to the group. Inspect the group’s bounds and pivot before choosing a rotation. A character’s arm, for example, should usually turn around its shoulder rather than the center of the arm’s bounding box. You may need to set an explicit origin and adjust it while previewing.
An svg animation can also change opacity or position. Start with one property and a short movement. For a gentle pulse, change opacity between two visible values and return to the starting value. For a translation, move the element a few units and back. Repeating an identical start and end state avoids a jump at the loop boundary.
When you animate svg artwork, leave room inside the viewBox for the full range of motion. A moving shape can be clipped at the viewport edge even though its original position fits. Test the graphic at its intended display size: a subtle motion that works on a large canvas may disappear in a small icon.
Choose how to place it on a page
An animated svg saved with its CSS inside the file can be referenced with an HTML <img> element. This keeps the asset separate and easy to reuse. Give the image suitable alt text when it conveys information, or an empty alt when it is decorative. Test the actual file in the browsers and publishing system you plan to use.
Inline SVG places the markup directly in the HTML document. Page CSS and JavaScript can then target its elements, which is helpful for hover, focus, or state changes. Keep class and ID names distinct when multiple graphics share a page. Inline code also increases page markup, so a separate image may be simpler for a repeated decoration.
An SVG loaded as an image has restrictions. Scripts do not run in that image context, and external resources may not load. The page’s stylesheet cannot directly select paths inside an external <img> file. MDN’s guide to SVG as an image describes these limits. If the effect needs page interaction, use inline markup and test the interaction rather than relying on a script inside an image file.
Pick a delivery format
For a website that accepts SVG, retain the vector file when the animation works in the chosen embedding method. A self-contained file can carry simple CSS motion; inline markup gives the page more control. Some publishing platforms sanitize SVG or remove style elements, so upload a small test and view the published page.
For a video editor or a platform that does not play SVG motion, render the movement to a supported video format such as MP4. A GIF can be convenient for a short looping preview, but it is rasterized and has a limited color palette. Check transparency, frame rate, dimensions, and file size for the destination. Keep the original vector and animation source for later edits.
SVG animations are most useful when the movement supports the content. Avoid rapid flashing and provide a stable alternative for people who prefer reduced motion. If the movement conveys essential information, ensure that the static state or accompanying text communicates it too.
Test the final result
Open the file directly, then test it in the exact context where it will appear. Check the pivot, loop seam, clipping, and scale. Toggle your operating system’s reduced-motion preference and confirm the star becomes still. If it does not move at all, check the class spelling, keyframe name, and whether the platform preserved the <style> element.
Now save the example as star.svg, open it in a browser, and change the duration from four seconds to six. Compare the two speeds, then apply the same technique to one clearly named element in a copy of your artwork.
