I want to dive into the wonderful world of .svg animation for the website I'm working for.
I'm looking to do an icon that animates on hover. I have found multiple tutorials that can all help me out, however, I noticed that there are a lot of different ways to achieve an svg animation.
I can find very little info on what is the most supported way to animate an svg. Is it with a js library? The animate tag? css animation?
A js library seems best to me, but I like the idea of using css as well. Can someone tell me more about the browser support of these methods?
There are lots plugins are available to animate svg.few are listed here
snapsvg
GSAP
segmentjs
you can checkout crossbrowser compatibility here.
Related
Does someone know how to do svg animations with CSS or small JS ?
Maybe there's a plugin to do that ?
https://wappalyzer.com/
MS-Edge doesn't support SMIL animations.
MS Edge doesn't support animating svg's with css either.
Google Chrome was planning to depricate SMIL (because you can use css animations instead), but they decided not to for now (but they probably will in the future)
So your remaining options are: javascript or give microsoft the finger and decide not to support their browser and use css animations (preferably) or SMIL.
Hope it helps and gives you some insight in what (not to) do. To answer in more detail I really need to know what you are trying to animate. That said, you should find plenty of examples/tutorials when you google for it. If you want to find something specific you can always check the Scalable Vector Graphics (SVG) 1.1 (Second Edition) Specification.
Some Context
I am playing around with Angular-material and trying to see how well it plays with bootstrap. The Angular-material start project shows off some of the cool things it can do, but it seems like it seems like Angular Material still requires a lot of custom CSS for my non-designer skills. Ergo, why I'm trying to see if it's a good idea to try to use bootstrap and angular-material together.
If this is a terrible idea, please let me know.
My Problem
The icons in the side panel of this codepen should be circles, but they are squares! I can see the border-radius property with Chrome debugger tools but I cannot figure out why it is not being honored.
To add to the mystery, when you click one of the items then all of the icons below that do in fact become circles for a moment.
Can someone with more CSS experience than myself tell me what's going on or how I might debug this more completely?
And any feedback about using angular-material + bootstrap together is also much appreciated.
I also experienced this problem using angular, where the border-radius is not honored, when trying to style an element that is part of a ng-repeat. I found that if you apply the style to the child element of the ng-repeat instead it will honor the border-radius property. This is more of a workaround than a solution, as I also don't understand why this happens.
So in your case you could do:
.avatar svg {
border-radius: 50%;
}
Recently i have come up with problem with background image like a ipad theme that contain a video, problem is that size of video may change, so i thought of trying border- image properties of CSS3. the major properties of css3 could be made cross browser compatible by using some technique or other. currently i use css PIE. but it doesn't support image border property in its recent version, IS there any way round. Just need to fix it. IE is really a pain :(
I thought of using some "Ninja in your browser" script it didn't worked.
Nope. There's currently no way to get border-image into all versions of Internet Explorer. PIE is working on it for IE9, from what I've found, but ran into some breaking problems (see more info in this duplicate question).
From the sound of it, your best bet is probably to allow IE to gracefully degrade by using a simple border or background.
Looking at http://www.css3maker.com/ I see the menu items like "Border Radius" getting animated on mouseover. How was this achieved using CSS?
I did not look how it was done in that website. But jQuery can do wonders with animation. It's a javascript API that is becoming widely used.
CSS animations can be done using the transition property.
Check http://www.css3creations.com/ for demos.
I'm just wondering what is the least expensive way to use a lot of gradients in a site's design.
I feel certain that CSS will be less expensive for the browser than SVG, but I could not justify this without tests. I would suggest that you create your page with your many gradients in CSS and if (and only if) you find performance to be a problem should you try SVG or other technologies.
I would lean more towards CSS for this one. Seeing as it is CODE rather than an image.
Also, if you are leaning more towards using CSS, why not make it viewable and or workable in IE 8 and below, via CSS3pie? http://css3pie.com/
This is an interesting question. In my personal experience webkit has been faster with svg, but I could be wrong.
I created a test fiddle with css transitions and they look about the same, perhaps someone with more experience can extend the stress case:
http://jsfiddle.net/KLCEw/
Keep in mind that SVG gradients are best embedded through data-uri's so they don't create new requests to the server.