How to Create Animated SVG Markers for everviz Maps
How to Create Animated SVG Markers for everviz Maps
Animated SVG markers let you highlight locations on your map with motion, drawing the reader's eye to the stories that matter most. This article explains how to create your own and add them to an everviz map.
What is an animated SVG marker?
An SVG (Scalable Vector Graphics) file is a small, resolution-independent image format based on XML. Unlike a PNG or JPG, an SVG can contain CSS animations directly inside the file, which means the icon moves on its own with no JavaScript required. When used as a custom marker in everviz, the animation plays automatically on your map.
Requirements
For an animated SVG to work correctly as a marker in everviz, the file must meet the following requirements:
- Canvas size of 64x64px with `viewBox="0 0 64 64"`
- All animations defined as CSS `@keyframes` inside a `<style><![CDATA[...]]>` block within `<defs>`
- Fully self-contained, meaning no external stylesheets, fonts, or JavaScript
- Animations must use `transform: scale()` rather than animating SVG attributes like `r`, `rx`, or `ry` directly, to ensure compatibility with Firefox
- Vendor prefixes (`-webkit-`, `-moz-`, `-ms-`) included on all animations and transforms
Download the everviz marker pack
We have put together a free set of ready-to-use animated markers covering the most common newsworthy scenarios. Each icon is available in red (`#BC094A`) and navy (`#28277E`).
| Icon | Best used for |
| Pulsating circle | Breaking news, live events |
| Dual-ring pulse | Breaking news, high urgency |
| Bouncing pin | Key story locations |
| Radar pin | Tracking situations, live updates |
| Alert triangle | Warnings, urgent alerts |
| Signal tower | Live broadcasts, press locations |
Option 1: Use a design tool
If you prefer a visual workflow, the following tools can help you create and export animated SVGs.
SVGator is the most accessible option for non-developers. You design the icon and animate it using a timeline interface, then export a self-contained SVG file. No coding required.
Adobe Illustrator is ideal for drawing precise vector shapes. You design the icon in Illustrator and export it as an SVG, then open the file in a text editor to add the `@keyframes` animation code manually.
Figma works the same way as Illustrator for the drawing step. Use the SVG Export plugin for cleaner output, then add animations by hand in a code editor afterwards.
Once you have your SVG file, check it against the requirements listed above before uploading it to everviz.
Option 2: Generate with AI
You can use Claude (claude.ai) to generate a complete, ready-to-use animated SVG marker. Copy and paste the following prompt and fill in the details for your use case.
--- Prompt:
Create an animated SVG map marker icon for use on a web map. The icon should be 64x64px with `viewBox="0 0 64 64"`. Use `#BC094A` as the main colour.<br><br>The file must be fully self-contained, with all animations defined as CSS `@keyframes` inside a `<style><![CDATA[...]]>` block within `<defs>`. Include vendor prefixes (`-webkit-`, `-moz-`, `-ms-`) on all animations and transforms. Do not animate SVG attributes like `r`, `rx`, or `ry` directly. Use `transform: scale()` instead for Firefox compatibility. Include a `<filter>` with a subtle drop shadow in `<defs>`.<br><br>The animation should be [describe your animation, e.g. a pulsating circle / bouncing pin / flickering flame / radar rings expanding from the base].
The icon should represent [describe the concept, e.g. breaking news / fire / conflict / live broadcast].
---
Replace `#BC094A` with your own brand colour. Save the output as a `.svg` file and upload it directly to everviz.
Tips for better results
- Be specific about timing and movement. Mentioning the number of rings, stagger delays, or animation speed gives the AI more to work with.
- If the result does not animate in Firefox, ask Claude to replace any `r` or `rx`/`ry` animations with `transform: scale()` equivalents.
- You can ask for multiple colour variants in one go by specifying each hex value.
Adding the marker to your everviz map template
1. Open your map template in everviz
2. Open the preset editor, and choose icons. Upload your newly created icon.
3. In marker settings, ensure that the icon is available
4. Set the marker size and anchor point as needed
5. Save your template