At a time when programs like Flash ruled the world, the SVG file format came into existence. Developed by the World Wide Web Consortium (W3C), SVGs are graphics that are coded in XML markup language and vector-based rather than pixel-based. In other words, SVG is to graphics as HTML is to text.
SVG was created out of necessity, as a web alternative for the PostScript document format, which had been originally created for print. To solve inherent problems with the PostScript format, a group of companies banded together. The W3C SVG Working Group consisted of representatives from Microsoft, Google, Adobe, Apple, IBM, and others.
The SVG format, as the group defined it, has been around since 1999, but web designers and developers have only recently leveraged the power of SVGs to improve their work. The rise of smartphones and support by major browsers started to boost the format’s popularity after 2010.
These days there are plenty of opportunities to use SVGs, but there is a small learning curve when first starting to create and export them. A lot of designers are guilty of creating files that are not ready for delivery.
Here at LookThink, we have fully adopted SVGs any time we create vector objects, iconography, or illustrations; and we have a pretty good system for implementation.
Why use SVGs?
They are a very powerful medium! SVGs are...
-
Pixel perfect at all screen resolutions, which is necessary for responsive development
-
Typically very small in terms of file size
- Easily editable through code and design programs
- Supported natively on all modern web browsers
- Useful for icons, UI elements, illustrations, animations, logos
It’s worth noting that raster formats such as PNGs and JPGs have been the default format for most web graphics, but these are more useful for photographs or when SVG isn’t supported.
By contrast, vector-based graphics that are exported as raster formats require special attention to avoid common problems. These problems, such as anti-aliasing and poor rendering quality, occur when raster images are scaled above 100% (see example below). Because high-definition displays (like Apple's Retina display) require images to be scaled to 200%, you will lose image quality if an additional image at 200% is not created.
How to use SVGs
Do you have a vector graphics editor? Do you have a finished design? So all you have to do is right click and save right? Not quite.
The SVG will be that much more useful and flexible if the designer and developer have a mutual understanding of its purpose and placement.
The proper creation of SVG icons or other UI elements requires a little more forethought. When saving a PNG or JPEG, the designer’s only concern when passing the file to a developer was verifying the right size and format of the graphic. Generally, the developer should not need to manipulate the image any further.
Unlike raster images, SVG’s are a two-way street between developers and designers. Before the designer even begins creating the image, there should be a conversation with the developer about how it will be implemented. The SVG will be that much more useful and flexible if the designer and developer have a mutual understanding of its purpose and placement.
Best practices and examples
K.I.S.S (Keep It SVG Simple)
These are just a few suggestions to keep in mind before sending off SVGs. Not every rule is hard and fast but these guidelines offer a good starting point.
Do...
-
Do name all your layers. Your layers will convert to the names of each group in the resulting code. Set up a reliable naming convention or ask the developer about their preference.
-
Do get rid of any unnecessary points when working with paths. Ideally you should use the preset shape tools for any basic shapes; mathematically they are easier to manipulate, adjust, and resize for different display resolutions. If using Adobe Illustrator, use the Simplify setting to get rid of surplus points in your artwork. Under the Application bar navigate to the Object -> Paths -> Simplify.
-
Do use whole numbers instead of decimals wherever possible in your file.
-
Do make sure all objects are opaque. Use tints instead of transparencies to get a similar effect.
-
Do fit all artwork to an artboard. In most programs you can find a similar setting that does this function.
-
Do convert all text to outlines.
-
Do flatten all elements in your layers. Avoid doing any unnecessary rotates and transforms while designing.
Don’t...
-
Don’t use clipping masks. If you do use clipping masks while designing, try to use your design programs boolean operations (union, subtract, intersect, or difference) or just expand/convert to outlines before exporting.
-
Don’t use unnecessary amounts of groups in your final file.
-
Don’t use blending modes.
-
Don’t use layer effects. Consider instead using SVG filters or gradients which in contrast to layer effects are not pixel-based.
-
Don’t save over an existing SVG. If you have to edit your SVG, make sure to edit the design in the original source file.
Before
After
When working with SVGs, like with any good design, you have to consider the final product in order for your design to precisely be replicated the way you intend. Not correctly packaging an SVG can result in bad implementation, an unnecessary round of edits, and extended timelines especially for more complex illustrations.
Following these best practices will set you on the right track and help you to better design with the end product in mind. Plus, you’ll be helping the developers who ultimately have to implement the design solution!