Web design is all about grabbing and keeping the user’s attention in subtle ways. Graphics are one of the most fundamental options for increasing user engagement. As we become more immersed in a mobile-driven world, it’s important that graphics can adjust to multiple screen sizes.
There are many different image formats being utilized in web design and development, each with their own benefits and drawbacks:
- PNGs are great with transparencies
- GIFs are great with short, looping animations
- JPGs are great at preserving colors
But there is a lesser know image format that, though around since before 2003, is finally making a ripples in the web design world: SVG.
What’s an SVG?
SVG stands for “Scalable Vector Graphic.” An SVG image is actually an XML-formatted document that describes a vector graphic. A vector graphic is described as the use of geometrical points, lines, curves, and polygons to represent images. In very basic terms, SVGs contain coordinates for drawing images.
Why SVGs are Perfect for Responsive Design
An SVG’s method is a bit different than the way other image formats work. All of the other image formats contain instructions for each individual pixel in an image, which causes pixilation or blurriness in an image when scaled too large. SVGs do not have this problem since they simply draw and fill the area in the vector described, no matter the size. This inherent benefit makes SVGs perfect for mobile responsive web development that requires images to be scalable and small enough for mobile devices to load quickly. While this isn’t the only benefit to SVGs that has been turning heads lately, it’s not the only perk SVGs contain.
Movement has always been one of the easiest ways in which to captivate a user’s focus. Users expect certain movement based upon the action they take. They expect some visual indication when they hover over a link or when a page is loading, for example. Many designers and developers love to exceed expectations, wooing visitors with colorful animations and transitions.
CSS can be used for the majority of the animations that web developers need. You can add classes to individual vectors in an SVG by editing the file in a code editor, which allows you to target those specific elements for animation in CSS. The SVG just needs to be copy and pasted directly in the HTML or PHP document. Then using the animation, opacity, transform, transition, and @keyframes properties of CSS, you can manipulate an SVG as easily as any HTML element.
If you are looking for some more complex animations, then you would be better off using SMIL, Velocity.js, or GreenSock (GSAP). The one you choose really just comes down to personal preference.
Synchronized Multimedia Integration Language (SMIL) is the native animation built right on top of SVG. It uses a very straightforward syntax but is not supported in Internet Explorer at all.
Conclusion: SVG Rocks