SVG… SVG… what is SVG

SVG (Scalable Vector Graphics) – a vector graphic file format that, unlike raster formats like JPG, PNG, and GIF, is composed of curves, not pixels. Due to the ability to assign different sizes to files of the same quality, SVGs work excellently as logos and also perform well for more complex graphics.

SVG has its roots in the 1990s and was created by the World Wide Web Consortium (W3C). Most popular web browsers easily support SVG format. The ability to scale without loss of quality, as well as ease of editing, makes it a preferred format for web designers.

Why use SVG?

• Relatively small file size in the context of website performance.
• The ability to resize without loss of quality.
• Increasing support for such file types by web browsers.
• The ability to edit using CSS and JS (animations!).

Depending on the type of implementation and the nature of the image, the way attributes are assigned for editing may vary to ensure digital accessibility according to WCAG criteria.

Guidelines for using SVG

The first and most important guideline for using SVG is defining the role that the image in this format plays on the website. Is it purely decorative, or does it serve some function on the site (e.g., a functional icon or button)?

If the graphic is merely an “addition” to written content and does not provide any substantive value but only enhances the visual aspect of the page, it should be considered decorative.

Add the aria-hidden=”true” attribute to hide SVG from screen readers.

Example:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden=”true”> 
<circle cx="50" cy="50" r="50"/> 
</svg>

If an SVG-implemented graphic is intended to convey information to the user, use the title attribute to describe the context of the graphic.

Example:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
<title>Czarny okrąg na białym tle</title> 
<circle cx="50" cy="50" r="50"/> 
</svg>

Summary

The ways to implement non-textual elements on a website depend on the context of the surrounding content. It’s important to first accurately determine the purpose of a given graphic and who the audience is or what role the graphic file should fulfill. Using reliable sources with detailed descriptions of the issue is also advisable.

At Kinaole, we pay special attention to non-textual elements when auditing our clients’ digital products. We provide guidance not only on technology implementation but also on the broader context of placing them on websites or in applications. We offer various solutions to find the most accessible and useful options together. Feel free to contact us!