Snap Svg Animate Attributes
SVG has been one of the most underused technologies when it comes to web development. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using animations, many developers don’t know where to start. With great libraries like Snap.svg the use of SVG assets becomes more easy and today we’d like to explore how to animate SVG icons.
You’ve surely seen some great examples of animated icons using CSS transitions and animations like the Navicon Transformicons by Bennett Feely which were explained in this excellent collaborative tutorial by Sara Soueidan. We want to try to do something similar using SVG icons with the help of Snap.svg.
Please note that we are working with a modern JavaScript library for manipulating our SVGs. Older and non-supporting browsers will not be capable of all features.
Easy Svg Customization And Animation: A Practical Guide — Smashing Magazine
The first thing we do is to create some SVG icons using an SVG editor like Inkscape. We used a size of 64×64 pixel for the icons.
For each icon we want a special animation to happen. For example, for the zoom icon we’ll want to scale up the plus path. We’ll define what will happen for each icon in our script.
We’ll add the icons dynamically to our page using Snap.svg and if SVG is not supported we’ll simply show a background image for the span elements that we use to wrap each graphic:
Using Snap.svg For Rich Interactivity
The PNG icons were generated with the fabulous iconizr tool. You could as well use CSS sprites and define a active class but we decided to just do a very simple fallback for this demo.
If you add the class “si-icon-reverse” to the span, the icon will be initially rendered with the reversed “shape”. For instance, if you want to display the stop icon rather than the play icon, you can achieve that in the following way:
Now let’s take a look at what we are doing in the JavaScript. The idea is to do something with each icon. That can be some kind of transformation, like a rotation or a scale, or a change of a path altogether. With the Snap.svg we can dynamically load our SVGs, which we store in a folder, and manipulate them in a very practical way thanks to the powerful API.
Overview Of Svg Animation Usage In Web Design
Manoela Ilic is the founder and owner of Codrops. With her background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends in the community. She enjoys gardening and learning about off-grid living, as well as staying up-to-date on the latest industry trends and technologies.Snap.svg “The JavaScript SVG library for the modern web” is an all in one javascript library for working with vector based graphics, the documentation is a bit sparse, and even though I’ve worked with Snap.svg in the past, I would like to make a getting started post for future reference and to help those just getting started, at the end of these code samples both you and I will be able to present and animate with vector graphics, so lets get started.
Explanation: Snap provides a handy animate() function for your basic animation needs, it is a simple affair where you provide the attributes to change ( from their current value), time to make those changes, easing function (rate of change function) and a callback function to tie animations or call other functions.
Explanation: Like with animations, Snap tries to make it super simple to add interactions like mouse and touch events by simply calling the relevant method on your snap element, something like:
How To Load And Animate Svg Icons For Web Design
Note: I had some issues with the stock drag function, since it doesn't play nice with responsive displays, so some extra calculations need to be made for it to work, check the code.
Beyond simple primitives made with Snap, you can also import vector art made on other programs:Inkscape (Free) and Illustrator (Paid) are popular options , let’s figure out how to import some art…
Explanation: Importing external SVG Artwork is done by using snaps load function and a callback function to deal with the result. Note that while you can display complex art relatively easy, if you want to deal with parts of your svg programatically you need to format your svgs into something snap can work with, in this case my original svg artwork was an Illustrator file that got converted into a compound path (Object->CompoundPath->make) and named as mrCube in the layer option, and then saved as an svg. This way you can select and modify it once the svg is loaded with geom = data.select(#mrCube)
How To Approach Svg Animations: A Css Tutorial
In order to make more complex and interactive graphics, we need to deal with multiple elements and complex paths, so let’s try that.
Note: Our animations now use mina easing, to give the text that bounce, there is also an abbreviated transform animation that confusingly is not explained in Snaps documentation, but it is in Raphaël, a very similar svg library from the same author => Raphaël Library element transform.
Explanation: If you look under the hood( pun intended ), you might find there is a lot of code, but there is also a lot of repetition and there is nothing new from the previous examples, so nothing too scary; in general it goes like this:
Wave Effect Using Snap.svg
I personally love working with SVGs, they scale and display nicely and there are great tools for creating them, the problem usually is that they are not as performant as say HTML5 Canvas or CSS or easy to work with, Snap.svg is a super cool library that tries to bridge this gap and provide a basic yet complete set of tools for working with svg on the web, while not a complete replacement or solution, you can add very cool interactions in no time ( once you follow this or other guides ).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.
Svg Animation Tools To Make Creating Svg Much Easier
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.
Snap.svg Animation Tutorial For Beginners
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
Svg Part 2
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.
Svg Animation With Bootstrap Is Too Small
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
Posting Komentar untuk "Snap Svg Animate Attributes"