Working with SVG files is not an option anymore.With a huge amount of high definition devices out there, it's not sustainableto export different sizes of the same bitmap assets and target specific device resolutions through CSS media queries. We need to rely on vector graphics whenever it's possible.
Today's resource isa very simple icon, that we imported as inline SVG into our index.html file. After having optimized the svg code, we tried to push it one step further by animating the iconusing CSS and Snap.svg, which is a javascript SVG library created by the Adobe team. To be honest, it's not that easyto animate svg files withthe current browsers support status quo, but we learned some tricks along the way that we're happy to share with you!
The easiest way to create an SVG illustration is to use graphic editors such as Adobe Illustrator or Sketch. Pick the one you preferand create an icon(or download our source file). Most of what you create in these apps is SVGfriendly, meaning that the graphics you create can be translated into code. The easiest way to realize that is to save an icon as .svg file, then open it with a code editor.
How Svg Line Animation Works
To make you an example: since our final icon is animated in 2 steps, I created 2 separate layers in Illustrator, one for the loading effect and one for the buildings. Since the visibility of the cd-buildings layer is turned off, I can expecta
Applied to that element in the output code. Also, layers and groups in Illustrator are considered groups in the SVG code exported (which is a good thing). Layer titles in AI will be assigned as #id values in the SVG code.
While exporting .svg from AI, default settings work just fine. I just make sure that CSS Properties is set to Style Elements, in order to separate style from content - AI automatically creates classes.
Css Vs Svg: The Final Round(up)
I personally don't use tools to automatically clean up SVG code for me. Since I always start from thegraphic editor, I found outthe best way to export clean code is to be thorough while designing -and following the tips I suggested before.
As you can see, Illustrator created some classes for us. Also, the structure is pretty clean already. By giving a name to groups and layers in AI, we can now easily find them in the SVGcoding structure.
First of all, since we want to include this graphic as inline SVG, we can grab only the code wrapped into the
Scroll Icon Animation
I'm working witha HTML5 document, so I can remove the namespace declaration and add a title and description to improve the file accessibility.
Next step is to create more semantic classes in CSS to replace the ones created by Illustrator. The icon is quite minimal, therefore the CSS is gonna be just few classes:
Yes, we can modifySVG presentation attributes inside our CSS file! We can now delete the style from the SVG code and assign the classes accordingly to the elements.
Animated Svg Icon Library
Also, I didsome changes to the structure: I moved some elements downin the SVG structure, the reason being that the lower an element is in the structure, the higher its z-index. Finally I changed some coordinates as well - very small details, like moving elements couple of pixels around if they weren't perfectly aligned. You know, unnecessary stuff designers love to waste time with.
Applied to the SVG: it's because we will animate the clouds in and out the canvas, and for some unknown reasons IE shows them even when they are out, unless we apply the overflow property. Also you may notice a rectangle (
Class in case javascript is disabled: as fallback we don't show the loading icon, but the buildings (it just makes more sense).
How To Style And Animate Svg Elements With Css — Medialoot
We decided to animate our svg using JavaScript rather than SMIL in order to support Internet Explorer (if you are interested in the SMIL technique check out this guideby Sara Soueidan).
Rectangle element (which is the door element of the first house on the left). We wanted this element to be hidden at the beginning and then animate itsheight from 0 to 28px. So, in the HTML structure, we set the
The door expands from top to bottom, but we wanted the opposite effect! So we applied a 180deg rotation to the element.
Create Loading Animations With Svg And Css
One important note: at the beginningwe tried appling a CSSrotation (rather than using the svg transform attribute), but unfortunately CSS transformations on SVG are currently not supported in IE11 and below.
Function accepts three parameters: the first one is the angle of rotation, the second and the third ones the coordinates of the center of rotation.
Function doesn't accept, as argument, the transform origin coordinates (the default one is the svg upper-left corner). To scale an object by a given factor around a point, you can combine two transformations:
Best Css Animation Courses To Take In 2023 — Class Central
Element (crimson circle which is drawn when you click the play button). To create this animation, we used the two svg attributes
. Imagining the circle as a dashed line, the stroke-dasharray lets you specify dash length and gaps, while thestroke-dashoffsetlets you change where the dasharray starts. In our case we set:
One important note: the stroke-dashoffset attribute for a circle elementcannot be animated using the animate() method directly (while it works fine for a path element); this is why we have been using the Snap.animate() method and stored the returned animation objectin the globalAnimation variable in order to stop the animation when user clicks on the pause button:
Why You Should Use Svg Images: How To Animate Your Svgs And Make Them Lightning Fast
Once the circle animation is completed, we start animating the buildings and the cloudsusing thetechnique described at the beginning of this paragraph.
That's it! Hopefully browsers support will get better soon, and we will rely on SVG technology not only to create scalable graphic elements, but also complex animations ;)
0 Response to "Svg Icons Animated With Css"
Posting Komentar