When working on visual design for the web, choosing the correct image format is essential.  The rise of responsive design, mobile devices, and high-pixel-density displays have made this process trickier than ever. When working with photography, and 3D imagery, JPGs and PNGs are still the best formats to use. Saving images up for 2x to 4x displays is still required. However, if you’re working with icons, logos and other 2D graphics, SVGs are a format you should seriously consider.

SVGs are vector graphics and can scale seamlessly for your target device. They will always look crystal clear, even on high-definition displays. SVGs are small. They take up only a fraction of the file size compared with their PNG, GIF or JPG equivalents. And, since SVGs automatically scale, designers don’t have to save out 2x to 4x equivalent of the same graphic. Developers don’t have to write media queries to call different versions of the same graphic. Browers don’t have to detect and load different versions of the same graphic. It all happens seamlessly. Automatically.

When considering SVGs you may bring EPS or native AI files to mind. They are also a vector, scalable etc. But SVGs have some important differences, which make them really fascinating to work with.

SVGs were first introduced during the World Wide Web Consortium (W3C) in 1999 as a way to bring vector graphics to the web. The idea was to create a graphics file format that could be controlled using XML. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with standard design software. In 2018 all major browsers on desktop and mobile have SVG rendering support.

SVG drawings can be interactive and can include animation, defined in the SVG XML elements or via scripting that accesses the SVG Document Object Model (DOM). SVG uses CSS for styling and JavaScript for scripting. Text, including internationalization and localization, appearing in plain text within the SVG DOM enhances the accessibility of SVG graphics.

All of this technical information means your UI development partners are probably excited about using SVGs whenever possible. There are several ways to use them, depending on the objective.

Some major things you need to know:

• Consider saving your files as SVGs any time you are creating 2D Graphics for the web
• SVGs can be created using Illustrator, Sketch and other popular design software
• Resolution independent
• Supported by all modern browsers
• Future-proof (W3C standard)
• Easy to make and edit
• Manipulatable with CSS & JS
• Highly compressible

If you’re interested in learning more about SVGs consider the following related articles:

How to Export SVGs for the Web from Illustrator
SVGs, CSS and Javascript: Where Images and Code Cross

Until next time.

PS. If you have questions about user experience, web design or development post your question to our Ask a Question section and one of our contributors may answer in a post. Thanks!