Powerful Animations

The SVG animation toolkit for VS Code.

Powerful Animations is a VS Code extension for Microsoft 365 and Power Platform professionals, developers, consultants, designers, and enthusiasts, plus anyone else who works with SVG. Preview animations live as you edit, browse a growing library of copy-ready SVG assets, and build animated SVGs without leaving your editor.

Building for Power Apps? The extension has a full suite of tools for converting SVGs into Power Apps Image formulas, building dynamic variables, and generating With() formulas with default values baked in. No third-party dependencies. No extra tools. Just your SVG and a little more time back in your day.

Features

• Preview SVGs live as you edit, with playback controls built in
• Auto-detect SVG files so the right tools always show up
• Browse a library of free, copy-ready SVG animations (coming soon)
• Add animations to any static SVG in one step (coming soon)
• Access everything from the sidebar without touching the Command Palette
• Power Apps: Convert SVG markup into Image control formulas in one click
• Power Apps: Build dynamic SVGs with Power Fx variables
• Power Apps: Generate self-contained With() formulas with default values baked in

Commands

All commands are available in the Command Palette (Ctrl+Shift+P), via right-click on any SVG file, and as buttons in the SVG Tools sidebar panel.

Powerful Animations: Prepare SVG for Power Apps

Converts the selected SVG text (or the full document when nothing is selected) into a formula you can paste directly into a Power Apps Image control.

"data:image/svg+xml;utf8," & EncodeUrl("<svg viewBox='0 0 100 100'>...</svg>")

That is it. The formula is copied to your clipboard and optionally opened in a new file so you can review it before pasting. One command and you are done.

Powerful Animations: Convert to Single Quotes

Converts double quotes to single quotes throughout the selected text or full document and copies the result to the clipboard. Handy when you need Power Apps-friendly SVG text without running the full Prepare command.

Powerful Animations: Create Dynamic SVG Variable

This is the one you will come back to again and again.

Select a hardcoded SVG value like #ff0000, 1500ms, or 1 and run this command. Name your variable, make your selections using the on-screen prompts in the command bar, and the extension replaces the selected value with a live Power Fx expression and copies a ready-to-paste formula to your clipboard.

"data:image/svg+xml;utf8," & EncodeUrl("...<style>.spinner { animation: spinnerRotate 1500ms linear forwards " & varRepeatCount & "; }</style>...")

Now varRepeatCount can be driven by any Power Apps variable, control property, or formula. Your SVG just became dynamic.

Two ways to apply the variable

Option 1 -- Create Working Copy and Insert Variable (recommended)

Opens a new untitled file with the dynamic formula and leaves your original SVG untouched. This is the recommended starting point since inserting Power Fx expressions means the result is no longer a valid standalone SVG file.

Once you choose this option, you get one more choice -- your formula style:

• Simple variable replacement -- uses an existing variable or formula from your app:

"data:image/svg+xml;utf8," & EncodeUrl("...<style>.spinner { animation: spinnerRotate 1500ms linear forwards " & varRepeatCount & "; }</style>...")

• With() formula -- includes the selected value as the default, giving you a fully self-contained formula you can paste immediately and wire up later:

With(
    {
        varRepeatCount: 1
    },
    "data:image/svg+xml;utf8," & EncodeUrl("...<style>.spinner { animation: spinnerRotate 1500ms linear forwards " & varRepeatCount & "; }</style>...")
)

The With() option is especially useful when you want to paste a complete working formula into Power Apps first and connect the variable to app logic as a second step.

Option 2 -- Insert Variable in Current Document

Updates the active document instead of creating a new file. Use this when you are already working in a dynamic SVG draft and want to add another variable on top of what is already there. No secondary choice here -- it inserts and you are done.

Selection guardrails

The command will not let you accidentally wreck yourself:

• No selection: it reminds you to select an SVG property value first
• Entire document selected: it stops so you do not replace the whole thing with a variable name
• Multi-line selection: it asks you to confirm before continuing

Good selections: #ff0000, 1500ms, 0.7, rotate(360deg), infinite

SVG Preview Panel

This is where things get fun.

Open any SVG file and click the preview icon in the editor toolbar. A live preview panel opens beside your editor and updates as you type. No extra extensions, no browser tabs, no alt-tabbing.

It even handles Power Apps formulas

Here is the part that gets people: if you open a prepared Power Apps formula file (the kind that starts with "data:image/svg+xml;utf8," & EncodeUrl(...)) and click preview, the panel strips the formula wrapper and renders the actual SVG.

With() formulas go further. The extension reads your variable defaults directly from the With block and substitutes them into the SVG before rendering. So varFillColor in your SVG becomes #ff0000 in the preview. The animation runs with real values.

What you see is what Power Apps gets.

Studio Bar

The floating toolbar at the bottom of the preview panel gives you playback controls for animated SVGs.

The bar fades to 40% opacity when you are not using it so it stays out of the way. Hover and it snaps back. More controls are on the way.

Sidebar

Open the Powerful Animations sidebar from the activity bar to access commands without the Command Palette.

SVG Tools

Three command cards give you one-click access to the most-used commands. No keyboard shortcuts required, no Command Palette, just buttons.

Animation Gallery

Coming soon. A growing library of free, copy-ready SVG animations. Works anywhere SVG is supported, not just Power Apps.

Featured Video

A curated video updated over time as new features ship. Good place to start if you are new to the extension.

Recommended Workflow

1. Open an SVG file
2. Run Prepare SVG for Power Apps to get a baseline formula
3. Select a hardcoded value you want to make dynamic
4. Run Create Dynamic SVG Variable, name it, choose With() formula
5. Click the preview icon to verify it looks right with real values
6. Paste into Power Apps

Settings

Notes

• Once Power Fx expressions are inserted, the result is no longer a valid standalone SVG file. Use the working copy option when you want to keep the original SVG intact.
• The SVG Preview panel renders SVGs using the webview's built-in browser engine. Complex filters or non-standard SVG features may look slightly different in Power Apps.
• This extension is free.

Coming Soon

• Animation Gallery: a free library of copy-ready SVG animations that works anywhere SVG is supported
• Add Simple Animation: add Pulse or Spin to any static SVG in one step, no animation experience required
• Studio Bar controls: speed (half, normal, double), background switcher (dark, light, checkerboard, custom color), and fit/actual size
• Power Apps: canvas frame simulation so you can preview exactly how your SVG fits an Image control
• Power Apps: multi-variable With() workflow improvements
• Snippets: ready-to-paste Power Apps Image control formulas as native VS Code snippets

Built by Warner Digital for the Microsoft 365 and Power Platform community.