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.
Animating SVGs
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.
Flash use to be the best option for complex animation, but Flash is on its way out the door. Javascript and CSS have almost entirely taken over the animating space and, as it turns out, you can animate SVG’s with both. There are plenty of additional supplemental technologies for animating SVG’s; it really just comes down to what you prefer.
Using CSS
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.
Using JavaScript
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.
Velocity.js is a JavaScript library that is very easy to use. If you are already using jQuery (another JavaScript library), I recommend using Velocity.js. Its syntax is easier to understand than CSS or SMIL and it’s easy to convert your jQuery animations over to Velocity.js. You will have to include the library on the pages that you use it on, but this is easily done.
GSAP is even easier to use than Velocity.js, SMIL, or CSS. It is an entire platform made for animating anything JavaScript can access. GSAP has the most robust feature set; however, it does require a license for commercial use in certain situations. For a more in depth look at these options, take a look at this link. These aren’t your only options either.
Conclusion: SVG Rocks
With so many capabilities, SVGs stand out as the graphic for responsive web development. Since they can shrink and expand without losing any resolution, they are perfect for:
- Logos
- Icons
- Graphs
When it comes to User Experience (UX), SVG is the preferred medium for graphics because they are so easily animated using CSS and JavaScript. If you aren’t using SVG images for your logos, icons, and animation on your websites, you should really consider utilizing this verbose image format.