It depends on the browser and platform.
Check this out: SVG Scaling
Depending on the browser, the scaling will be fine, or it will blur the second animation. Firefox is fine, but Chrome's result is terrible.
The solution is to either:
- bring in the SVG at a very high resolution (larger than the final output required), and then scale it down
- scale the elements in the SVG itself. Example: Basic Tween Scale on Chrome with Snap and GSAP
Or switch to PNG.
PS these examples were down in GSAP, not Edge. You may have to manually change the output code produced by Edge Animate after exporting it. I have not tested this, since I avoid EA nowadays, seeing it is no longer a viable application.
"bring in the SVG at a very high resolution"
I thought SVG-files didnt have an issue with resolution since it´s based on vector. I thought that was the whole point...
When a transform is applied to the SVG it is converted to bitmap first prior to transformation in a browser such as Safari and Chrome.
Yep, correct, just tested it. It's in Safari that it blurs and pixelates it. But it looks fine in Chrome and Firefox. Good to know for future use!
For me it blurs in Chrome.
Really? Interesting, mine shows up fine. What system and versions you using? Mac or PC?
PC. Of course it only happens randomly like all the other constant problems with the software.