See the Pen Message Center Static by Lars Miller ( on CodePen. It might not seem like much, but when you get into more complex images, the gains can be much greater. File size? The PNG comes in at 2k and the SVG at 1k. See the Pen Message Center Static – PNG by Lars Miller ( on CodePen.Īs a contrast, in this pane, you can see that with SVG, we can increase the size of the image as well as change the color with no loss in quality. When you double a bitmap, what were the instructions for one pixel now become the instructions for 4 pixels (a bigger square) and well… it looks terrible. We can make the image bigger, but with a serious loss in quality. We cannot access the individual pixels in a PNG, so we cannot change the color. What if we want it at a larger size or different color? No, PNG won’t allow us to change any of that. Now, if I were to export this icon as a PNG, it would work… most of the time. Let’s take a look at a mobile phone ringing icon that our designer Dillan created for a recent project. Bitmap vs Vectorīefore I dive into how/why on animation, I feel it’s necessary to show that the difference between bitmaps (PNGs, JPGs, GIFs) and vector files (SVG, AI, EPS) is that bitmaps store what each pixel looks like, while vectors are instructions sent to the browser (or another program) on how to draw that design. I’ll forgo explaining why one might want animations on their page(s). Let’s dive into what they are, how to go about animating SVGs, and the serious advantages in both quality and small file size. Using SVGs on web pages is an old idea that’s becoming newer and better with the rise of CSS animations.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |