The Practical Beginner’s Guide to SVG
Although the format is not particularly new, SVG images are increasingly popular in the design of websites. All major web browsers support the format and SVG is changing the way we think about and render images for the web.
Why at they so popular? And what exactly is different about an SVG file? Today, we have the answers and everything else you need to know to get started with this file type. (As a little bonus, all of the images in this post are available in SVG from Creative Market.)
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
What is SVG?
Scalable Vector Graphics, or SVG, are a vector-based image format developed for the web. (You can learn more about vector versus raster formats in a previous Design Shack article.)
The format has increased in popularity thanks to high definition displays, where users can see every pixel (if they exist). Because SVG is a vector format, image render in the same manner – and in perfect detail – regardless of size.
The markup language was first developed by the World Wide Web Consortium, which is more commonly known as W3C, in 1999. W3C defines SVG as “a markup language for describing two-dimensional graphics applications and images, and a set of related graphics script interfaces.” It is supported by all modern browsers – so you don’t have to worry about whether SVG files will render properly or not – and works regardless of device type.
Practical Applications
So what makes SVG so popular and why are more designers using it? Simply, because it works.
SVG files are small and scalable. While the format is best-suited for shapes, it has a variety of practical applications. Brand logos, icons, user interface elements and plenty of other design bits can work in the SVG format. The biggest bonus is that they are vectors. So an SVG image can be used at almost any size. (Some of the tiniest files can only be so large.)
SVG files are easy to manipulate and control as well. Not only can an SVG be saved as a static image, but you can also add interactivity and filters to make the image even more fun. (SVG files can be animated and colored.)
Here are a few practical applications for SVG use:
- Logos or images
- As a background image
- As an object, such as a button
- Mapping
- Charts or drawings
As a general rule, SVG is best-suited for images that might evolve or change over time or by device type or include animation or other dynamic effects. Use the format for visuals such as logos, sketches, shapes, graphics and charts, or other simple images.
Pros of Using SVG
So why would you move away from the trusty JPG or GIF to SVG? There are plenty of reasons why this format might be the best use in your projects. (And there is even the potential to use SVG for print as well.)
- SVG is a vector format. This alone is important when thinking about responsive design, where image sizes often change based on device. An SVG is small enough that one file can do all the work and there is no loss of quality on larger screens.
- SVG images and behaviors are defined with XML, meaning images can be searched indexed, scripted and compressed.
- You can do almost anything with an SVG image that you can do with any other image, such as including a variety of design techniques. It’s easy to add filters, blend modes, bur effects, color, clipping and masking, drop shadows and almost any other technique you like.
- SVG files are accessible.
- SVG works with open web standards.
- You can create SVG using text-based code or with image that you draw. This allows some freedom, depending on your need and level of expertise in different areas.
- Files sizes are tiny and can be minified. This means graphics that might have been large other wise are not, increasing load times. (Always a bonus.)
Cons of Using SVG
You are probably sold on SVG after reading through all the benefits, right? But there are a few negatives to consider as well.
- Older browsers – such as Internet Explorer 8 or lower — don’t support SVG. You can probably find a work-around (or might not care), but should know there could be some users that don’t see your images.
- SVG does not work for complex images such as photos. It is a format designed for shapes and lines only.
What’s Next for SVG?
The future of SVG is just starting. As an adopted mobile image format (and standard), the use and development of SVG will only continue to grow.
According to W3C, “SVG 2 is currently under development, and will add new ease-of-use features to SVG, as well as more closely integrating with HTML, CSS, and the DOM, and deprecating features not supported by all browsers.”
Other additions are also being tossed around. Print hardware companies are looking at ways to better use SVG for printing processes and has the support of industry leaders such as Adobe and Canon. Usage in mapping and GIS is also expanding, allowing for better mapping and zoom capabilities.
When you really start to think about it, there’s an almost endless opportunity for how to use and implement SVG into projects across the web and in printed design. (That’s one of the beauties of the vector-based format.)
SVG Resources
Now that you are a little more excited about SVG and can see why and how it can be useful for your projects, we have a list of resources to help you get started.
- Exporting SVG for the Web with Adobe Illustrator
- Embed SVG Directly into HTML Pages
- Up and Running with SVG Video Series
- SVG Profiles
- CSS Tricks: Using SVG
Conclusion
Are you already using SVG for your projects? If not, are you ready to make the change?
SVG is growing in popularity almost daily and because it is an open-source tool, these changes and advances are read for you immediately. You aren’t tied to any one vendor or product and can create images that are completely compatible across the modern web.
Stock Photos Courtesy of Creative Market.