SVG images are a developing format used to create lively graphics, icons, and logos on a range of courses. But what is an SVG image and how can you use it to enhance your eLearning? This blog explores more.
Scalable Vector Graphics (SVGs)—also known as a vectorized image—have been in development since 1998 by the main international standards organization for the World Wide Web. Major technology companies including IBM, Adobe and Microsoft were among those to make original submissions of the format. Since then, the specifications of SVGs have gone through several reinventions, including the incorporation of new HTML5 features and mobile profiles.
In their earliest form, the use of SVGs on the web was limited. Tim Berners-Lee, the inventor of the world wide web, criticized Internet Explorer for failing to accommodate the use of SVGs. However, the browser now provides some support for vectorized image use, while Google began to add SVG files to its search results in 2010.
Although SVGs are not as widely used as the more established JPG and PNG image formats, there is evidence to suggest that they are increasing in popularity and that they are used more by sites with higher traffic.
At a time when mobile phones generate more than 52% of worldwide website traffic, most types of mobile devices support SVGs. While not all authoring tools support the format, Gomo does. In this blog, we take a look at some of the ways SVGs benefit eLearning programs.
How is an SVG image used in eLearning?
In a learning context, an SVG file is an excellent option to have when it comes to improving the look and feel of courses. Learning designers use SVGs to enhance non-photographic images, icons, and logos and bring them to life, leading to more interactive learning experiences.
Learning design scenarios in which learning designers might choose to use SVGs include:
- When animation would benefit a course (JPGs and PNGs do not offer this)
- When transparent animated assets are required (GIFs, a better-known animation format, cannot provide this)
- When an asset needs to be scaled to size without suffering a loss in quality
SVGs give designers the versatility to create any kind of visual effect offered by programs such as Adobe After Effects. Once an SVG is added to a course, it can be set to loop, remain static or play through once.
In the example below, our colleagues at LEO Learning have made simple yet striking use of an SVG to ensure a visual asset looks more interesting and modern. In this instance, an arrow signposting learners to the next part of a course has been designed to move and flow towards the lower part of the page.
Despite having a very small file size, SVGs offer perfect quality even when learners zoom in to take a closer look at them. Learning designers also use SVG files to create animated diagrams and sequences of graphics, and courses created in Gomo can incorporate SVG icons in the navigation bars of client courses.
A vectorized image provides learning design style
Although SVGs are comparable in some ways to an animated GIF, we know that learning teams often prefer them because they offer a smaller, smoother and higher quality asset as part of visually attractive content. That’s why you need to make sure that your authoring tool can support them.
Gomo helps you to create eye-catching content that looks great on any device. SVGs are an asset worth considering as a fun way of enhancing icons, logos, and graphics without the need for large files.
However, it’s worth remembering that SVGs can require careful handling if your course needs to support Internet Explorer, so contact the Gomo team if you’re considering using them.