What is SVG and what is it used for?

To begin with, SVG is an abbreviation for Scalable Vector Graphics. It is an image format for vector graphics that is supported in all modern web browsers. SVGs are defined in XML, a language that is human-readable and search engine-friendly. This makes them easy to create and edit with any text editor.

Vector graphics and the advantages of SVG

Unlike raster graphics, which are made up of a grid of pixels, vector graphics are based on mathematical formulas. These formulas represent lines and shapes, so unlike pixel-based images, they are not distorted or blurred when enlarged or resized.

SVG files are therefore exceptionally suitable for logos, icons, infographics and any image that needs to be able to be displayed at different sizes without sacrificing quality. Moreover, SVG files tend to be smaller than their pixel-based counterparts, making them ideal for use on the web, where load time is crucial.

SVGs and raster images

Although SVGs are primarily intended for vector graphics, they can also contain raster images. However, this can cause problems. Because SVGs are essentially text files, they can grow exponentially in size when they contain raster images. Moreover, some platforms and services that support SVG may have problems displaying the embedded raster images correctly. For these reasons, it is usually better to keep raster images as separate files and not embed them in SVGs.

The flexibility of SVG: text and fonts

One of the many advantages of SVGs is their flexibility with regard to text. SVGs can contain text as part of the vector image. This text is selectable and searchable, just like the text on a web page, which can be an added advantage for search engine optimisation (SEO).

When including text in an SVG, creators can choose to reference the font or include the letters themselves as vectors. By referencing a font, the size of the SVG can be reduced. However, if the user does not have the font installed on their system, the text will not display correctly. By including letters as vectors, it can be guaranteed that the text is always displayed correctly, regardless of the fonts installed on the user's system. The downside is that this may increase the size of the SVG.

Embedding SVG in a webpage

When embedding SVGs in a web page, there are several approaches you can use, depending on your specific needs and desired use. In this section, I will explore some of the most commonly used methods.

1. Inline SVG

Inline SVG is a method where the SVG code is inserted directly into the HTML structure. This provides full control over the SVG elements and allows manipulation with CSS and JavaScript.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L3 14h9l-3 8 10-9h-8l3-11z"/>
</svg>

Two examples:

2. <img>-tag

Een andere eenvoudige manier om SVG's in te bedden is door gebruik te maken van de <img>-tag. Hierbij wordt het SVG-bestand opgegeven via het src-attribuut.

<img src="pad/naar/jouw/svg-bestand.svg" alt="Beschrijvende tekst">

An example:

3. <object>-tag

The<object>-tag can also be used to embed an SVG. Het voordeel hiervan is dat je toegang hebt tot de SVG als een documentobject, waardoor je deze kunt manipuleren met JavaScript.

<object data=“path/to/your/svg-file” type="image/svg+xml"></object>

An example:

4. SVG as background image

You can also set an SVG as the background image for an HTML element using CSS. This can be useful if you want to use the SVG as the background for a specific element, such as a div or a button

<style>
.my-element {
  background-image: url(‘path/to/your/svg-file.svg');
}
</style>

Choosing the right method for embedding SVGs depends on your specific needs and desired use in your web page. Try out different methods and choose the one that best suits your requirements.

Conclusion on SVG

In a world increasingly focused on digital visuals, SVG offers a powerful and flexible alternative to traditional image formats. Its ability to present images at any scale without losing quality, coupled with its compact file size and flexibility in handling text, makes SVG an essential tool for any digital professional.

However, like any technology, SVG should be used correctly. This means avoiding raster image embedding and carefully considering how text is included is essential for optimising performance and compatibility.

With a proper understanding of these elements, SVG can take your digital graphics to the next level, resulting in a sharper, more responsive and user-friendly user experience.